Introduction to Angular.JS

1
Introduction to Angular.JS

• Sayed Ahmed
• Computer Science and Engineering, BUET,
  Bangladesh
• MSc, Computer Science, Canada
• http//sayed.justetc.net

2
Recent Study on Angular.JS

• Checked on Angular and created the following
  training video
• https//www.youtube.com/watch?v5NAC6DfB1VY
• Partially Read the Book Mastering Web
  Application development in AngularJS
• Watched the video
• Google I/O 2013 - Design Decisions in AngularJS
• https//www.youtube.com/watch?vHCR7i5F5L8c

3
Recent Study on AngularJS

• Watched this but pretty lightly
• Introduction to Angular JS
• https//www.youtube.com/watch?v8ILQOFAgaXE
• Pretty lightly watched
• Karl Seamon - Angular Performance - NG-Conf
• https//www.youtube.com/watch?vzyYpHIOrk_Y
• Tried to watch but did not finish still in my
  tablet
• Security with Angular JS
• https//www.youtube.com/watch?v18ifoT-Id54
• Testing Strategies for Angular JS
• https//www.youtube.com/watch?vUYVcY9EJcRs

4
Theory Behind AngularJS

• MVVM Such as Angular.JS and Knockout.js
• http//en.wikipedia.org/wiki/Model_View_ViewModel
  
• KnockOut.js
• http//en.wikipedia.org/wiki/Knockout.js
• Presentation Model by Martin Fowler
• http//martinfowler.com/eaaDev/PresentationModel.h
  tml (theory behind MVVM)

5
Angular.JS resources Related JavaScript
framework Stuff

• Why Angular? and Why not Angular
• 10 reasons why use angular?
• http//www.sitepoint.com/10-reasons-use-angularjs/
  
• Why Does Angular.js Rock?
• http//angular-tips.com/blog/2013/08/why-does-angu
  lar-dot-js-rock/
• Check the total article and esp the section Why
  not Angular, Why not Backbone, Why not Ember
• https//moot.it/blog/technology/frameworkless-java
  script.html 
• These articles do worth reading
• http//angular-tips.com/blog/archives/
• Bite-sized web development training with
  AngularJS
• https//egghead.io/

6
Angular.JS resources Related JavaScript
framework Stuff

• Mastering Web Application Development with
  AngularJS
• http//www.packtpub.com/angularjs-web-application-
  development/book
• CRUD Application Demo with Angular
• https//github.com/angular-app/angular-app
• Angular.JS Wiki
• https//github.com/angular/angular.js/wiki
•  

7
Angular Validations

• Recent AngularJS also makes use of regular
  expressions for form validations such as
• ltinput type"text" ng-pattern"a-zA-Z" /gt

8
AngularJS and Browser Support

• AngularJS will work with the latest versions of
  Chrome, Firefox, Safari, and Opera, as well as
  Internet Explorer version 8, 9, and 10. You will
  need to do some extra work for IE8
• To make AngularJS Work with IE8 use the following
• lthtml ng-app"application_name"
  id"application_name"gt
• Though ng-app"application_name" is sufficient
  for the other browsers as mentioned in point 1
  for IE 8, id attribute is also required
• We cannot make IE to recognize and include
  templates in the following manner
• ltng-include"'myInclude.tpl.html'"gtlt/ng-includegt
  
• Though, we can take a different strategy to make
  IE8 recognize and include templates by using
• ltdiv ng-include"'myInclude.tpl.html'"gtlt/divgt

9
AngularJS and Browser Support

• we have to make IE8 recognize ltng-include""gt to
  be able to use this custom tag to include
  templates. We can do that by using
• ltheadgtlt!--if lte IE 8gtltscriptgtdocument.create
  Element('ng-include')document.createElement('ng-
  view'). . .lt!endif--gtlt/headgt
• Supporting IE7 for AngularJSYou need to do
  everything that you did for IE8.AngularJS was
  not tested with IE7 so you need to adjust stuff
  as they come alongIE7 does not have many APIs
  commonly present in web-browsers such as JSON
  APIYou will need libraries such as
  http//bestiejs.github.io/json3/ to be included
  in your application to support JSON
• 5. IE6 is not supported

10
Optimize the Landing page for AngulaJS based
Applications

• The Issue and Why Optimize
• In general, the landing web-page should load fast
  to have a good impression of the
  application/web-site. However, that usually
  requires some extra work and tuning.
• If you have developed a single page
  web-application with AngularJS or you have
  developed a single page web-based mobile
  application with AngularJS, you need to optimize
  the landing page.
• It can be tricky to load and display the first
  page right with mobile this becomes more tricky.
  And with Angular, you have to download additional
  Angular libraries that will inject information or
  data to make the page look right. If not done
  right, you may end up showing the templates, and
  lots of curly braces ( user.name ) to your
  users.
• For rescue, there are three helps
• ng-bind Angular Directive
• ng-cloak Angular Directive
• AMD Asynchronous JavaScript Module Loading with
  Require.js

11
Optimize the Landing page for AngulaJS based
Applications

• Recommendations
• If your first page has lots of dynamic contents,
  use ng-cloak directive for the dynamic
  data/information blocks that will hide those
  sections before AngularJS can kick in and inject
  data/information. You can even place it in the
  body tag.
• If your first page has mostly static content, use
  ng-bind for the static content (i.e where you
  were using curly braces ). You can also
  assign some default values for those static
  places so that before Angular kicks in the
  default value will be shown. If you do not
  provide default values those places will be empty
  before Angular fills information.
• If your page has a mix of dynamic and static
  contents, you can use ng-cloak, and ng-bind
  together.
• You can use asynchronous loading of JavaScript
  modules. You can use smaller JS files and link
  them to the pages where they are required. Now,
  based on the dependencies the scripts will load
  asynchronously. However, if a page needs too many
  of the script files, there will be more network
  overhead. You need to be smart about dividing and
  linking those script files. Though, performance
  gain by this strategy probably is debatable. You
  probably need to measure the performance gain,
  and again in real world, is the client ready
  topay?

12
Optimize the Landing page for AngulaJS based
Applications

• Another Tip
• If the page is mostly static, put ltscriptgt at the
  bottom and use ng-bindIf the page is mostly
  dynamic, put ltscriptgt at the top and use ng-cloak
• Examples of using ng-cloak
• ltdiv ng-controller"" ng-cloakgtlth1gtHello,
  name!lt/h1gtlt/divgt
• Example of using ng-bind
• ltdiv ng-controller""gt Hello, ltspan
  ng-bind"name"gtlt/spangt!lt/divgt
• If you use Require.js to load angular, you cannot
  use ng-app directive. You need to use
  angular.bootstrap method from JavaScript instead
• Reference
• Book Mastering Web Application Development with
  AngularJS

13
Optimizing AngularJS Page Loading

• Optimizing AngularJS Page Loading
• Optimizing web-applications for faster
  performance often include reducing network
  activities, reducing send and receive requests
  over the network/internet, and reducing data
  downloads. Minification of JavaScript, CSS, and
  HTML files can help with that. AngularJS kind of
  forces to write minification safe JavaScript, and
  writing array styleand annotation based function
  declaration is recommended.
• Creating partial templates and loading related
  templates in combination may help. Probably, need
  some experiment and planning before than doing it
  on the fly. Two ways to preload templates 1.
  ltscriptgt tag 2. templateCache

14
Optimizing AngularJS Page Loading

• You may want to read one of our other articles on
  optimizing landing pages for AngularJS single
  page applications by usinng ng-cloak, and ng-bind
• Using Asynchronous script loader such as
  Require.Js does not improve the performance a lot
  according to the book as listed in the reference
  section. Hence, so far, AMD is not recomended
  with AngularJS
• You can check how to use Require.JS in your
  applications at http//requirejs.org/docs/start.
  html .
• You may want to use them in non-AngularJS
  projects. The idea is, you have to have a
  consistent project directory structure esp for
  JavaScript files as recommended and specified by
  Require.Js. In your, HTML file you refer to the
  main.js file, single entry point for loading JS
  code. In that main.js, you will use Require.JS
  esp. require() to load other JS files
  asynchronously and as required by your
  application.

15
Optimizing AngularJS Page Loading

• To use Require.JS with JQuery, you can check the
  following resource. The adoption may need
  different considerations for a new project or for
  adapting existing code for Require.JShttp//requi
  rejs.org/docs/jquery.html

16
Securing Your AngularJS Applications

• Securing Your AngularJS ApplicationsSome
  security measures can be as follows
• Take security measures at the entry and exit
• points of data to and from the server
• Secure the server and prevent unauthorized access
  to data, and HTML
• Encrypt the connection i.e https//
• Prevent cross-site scripting (XSS),
• Prevent cross-site request forgery (XSRF) attacks
• Block JSON injections

17
Securing Your AngularJS Applications

• AngularJS Templates SecuringtemplateCache
  caches templates if you want to use this. We need
  to remove the cache for each user login
• The following or similar stuff can
  helpCache-Control no-cache, no-store,
  must-revalidatePragma no-cacheExpires 0

18
Securing Your AngularJS Applications

• using https can address the snooping and man in
  the middle attack
• You need to prevent JSON Injection
  Vulnerabilityto do this, you can add )',
  before your JSON, though not valid JSON but helps
  to prevent JSON injection vulnerability.
• Prevent XSS attack in the client sideAngularJS
  escapes all HTML in text that is displayed
  through the ng-bind directive, or template
  interpolation (that is text in curly braces).

19
Performance Improvement of AngularJS
Applications Writing Robust AngulaJS Applications

• Performance Improvement of AngularJS
  Applications Writing Robust AngulaJS
  Applications
• Ideally, you need to measure the performance and
  apply the strategy based  on the outcome. Your
  intuition may be wrong unless you verify it
  against real life situations and measure it.
  Also, testing the performance on real or sample
  data may help depending on the Application.

20
Performance Improvement of AngularJS
Applications Writing Robust AngulaJS Applications

• That's right, I did not experience it, but the
  right knowledge is, you need to be careful about
  using the digest loop. Too many iterations such
  as 50 loops or 100 loops may make your
  applications unresponsive. The numbber of watches
  inside  the digest loops, and how fast those
  watches run also affect performance a lot. You
  can either reduce the numbber of watches or make
  the watches faster. You can also monitor memory
  usage by those watches. Less memory use can make
  your application faster.

21
Performance Improvement of AngularJS
Applications Writing Robust AngulaJS Applications

• ng-repeat directive is also performance
  sensitive. If you use ng-repeat to work on
  collections having 100s of items, it may cause
  performance penalty. So either plan and limit the
  entries in your collections or write custom
  directives for the purpose. In either case, do it
  in such a way so that it causes less performance
  penalty. You need to measure though.

22
Localization Support in Angular Writing
International Applications in AngularJS

• Localization Support in Angular Writing
  International Applications in AngularJSUnder the
  AngularJS library there is a folder i18n where
  en-us locale related data are kept. If you want
  to use a different locale you can do it as
  follows. Notice the script tag with
  lib/angular/angular-locale_fr-ca.js to support
  for fr_ca locale. The .js file should have
  something as below
• angular.module('locale', 'ngLocale') module
  definition with a dependency on the ngLocale
  module
• lt!doctype htmlgtlthtml ng-app"locale"gtltheadgtltmet
  a charset"utf-8"gtltscript src"lib/angular/angula
  r.js"gtlt/scriptgtltscript src"lib/angular/angular-l
  ocale_fr-ca.js"gtlt/scriptgtltscript
  src"locale.js"gtlt/scriptgtlt/headgtltbody
  ng-controller"LocaleCtrl"gt...lt/bodygt

23
Localization Support in Angular Writing
International Applications in AngularJS

• Related examplesnow date'fullDate' will
  return full date based on the locale as set100
  currency''1000.5 number
• Handling Translations The text to be translated
  for different language.The primary idea is, you
  have to have JSON structure with key value pairs
  for different locales. You need to use the keys
  in places where you want the translations based
  on the user  locale.
• Example'crud.user.remove.success' 'A user
  was removed successfully.','crud.user.remove.erro
  r' 'There was a problem removing a user.'. .
  .
• In your HTML, you can write something like below
• ltspangtHello, name!lt/spangt
• to
• ltspangt'greetings.hello' i18n,
  name!lt/spangt
• You do understand that you need the JSON for the
  locale with the key greetings.hello
• ----

24
Building Your Own Directives in AngularJS

• Building Your Own Directives
• Directives can appear as HTML elements,
  attributes, comments, or CSS classes.
• Examplesltmy-directivegtlt/my-directivegtltinput
  my-directivegtlt!-- directive my-directive--gtltinp
  utgt
• Defining a Directive
• angular.module('app', ).directive('myDir',
  function() return myDirectiveDefinition)

25
Building Your Own Directives in AngularJS

• Writing a Button Directive
• describe('button directive', function () var
  compile, rootScopebeforeEach(module('directive
  s.button'))beforeEach(inject(function(_compile_
  , _rootScope_) compile _compile_rootScop
  e _rootScope_))
• it('adds a "btn" class to the button element',
  function() var element compile('ltbuttongtlt/bu
  ttongt')
• (rootScope)expect(element.hasClass('btn')).toBe
  (true))
• ))

26
Using the button directive

• Using the button directive
• ltbutton type"submit"gtClick Me!lt/buttongt
• Implementing a Custom Validation Directives
• Now we have our tests in place, so we can
  implement the functionality of the directive
• myModule.directive('validateEquals', function()
  return require 'ngModel', link
  function(scope, elm, attrs, ngModelCtrl)
  function validateEqual(myValue) var valid
  (myValue scope.eval(attrs.validateEquals))
  ngModelCtrl.setValidity('equal',
  valid) return valid ? myValue undefined

27
Using the button directive

• ngModelCtrl.parsers.push(validateEqual)ngModelC
  trl.formatters.push(validateEqual)
• scope.watch(attrs.validateEquals, function()
  ngModelCtrl.setViewValue(ngModelCtrl.viewValu
  e) ) )

28
Tools

• Plunker
• http//plnkr.co/
• Batarang

29

• http//todomvc.com/
• http//karma-runner.github.io/
• https//github.com/vojtajina/testacular/
• Bindonce