Sayed Ahmed Computer Science and Engineering, BUET, Bangladesh MSc, Computer Science, Canada

 Checked on Angular and created the following training video   Partially Read the Book: Mastering Web Application development in AngularJS  Watched the video  Google I/O Design Decisions in AngularJS 

 Watched this but pretty lightly  Introduction to Angular JS   Pretty lightly watched  Karl Seamon - Angular Performance - NG-Conf   Tried to watch but did not finish [still in my tablet]  Security with Angular JS   Testing Strategies for Angular JS 

 MVVM: Such as Angular.JS and Knockout.js   KnockOut.js   Presentation Model by Martin Fowler  ml (theory behind: MVVM) ml (theory behind: MVVM)

 Why Angular? and Why not Angular  10 reasons why use angular?   Why Does Angular.js Rock?   Check the total article and esp the section: Why not Angular, Why not Backbone, Why not Ember   These articles do worth reading:   Bite-sized web development training with AngularJS 

 Mastering Web Application Development with AngularJS  development/book development/book  CRUD Application Demo with Angular   Angular.JS Wiki  

 Recent AngularJS also makes use of regular expressions for form validations such as: 

 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   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   Though, we can take a different strategy to make IE8 recognize and include templates by using 

 we have to make IE8 recognize to be able to use this custom tag to include templates. We can do that by using  document.createElement('ng-include'); document.createElement('ng-view');...  Supporting IE7 for AngularJS You need to do everything that you did for IE8. AngularJS was not tested with IE7; so you need to adjust stuff as they come along IE7 does not have many APIs commonly present in web-browsers such as JSON API You will need libraries such as to be included in your application to support JSON  5. IE6 is not supported

 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

 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 to pay?

 Another Tip  If the page is mostly static, put at the bottom and use ng-bind If the page is mostly dynamic, put at the top and use ng-cloak  Examples of using ng-cloak  Hello, {{name}}!  Example of using ng-bind  Hello, !  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

 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 style and 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. tag 2. $templateCache

 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 :  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.

 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.JS

 Securing Your AngularJS Applications Some 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  Prevent cross-site scripting (XSS),  Prevent cross-site request forgery (XSRF) attacks  Block JSON injections

 AngularJS Templates Securing: $templateCache caches templates if you want to use this. We need to remove the cache for each user login  The following or similar stuff can help Cache-Control: no-cache, no-store, must- revalidate Pragma : no-cache Expires : 0

 using https can address the snooping and man in the middle attack  You need to prevent JSON Injection Vulnerability to 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 side AngularJS escapes all HTML in text that is displayed through the ng-bind directive, or template interpolation (that is text in {{curly braces}}).

 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.

 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.

 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.

 Localization Support in Angular : Writing International Applications in AngularJS Under 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: ...

 Related examples: {{now | date:'fullDate'}} will return full date based on the locale as set {{100 | currency:'€'}} {{ | 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.error': 'There was a problem removing a user.'... }  In your HTML, you can write something like below  Hello, {{name}}!  to  {{'greetings.hello' | i18n}}, {{name}}!  You do understand that you need the JSON for the locale with the key greetings.hello  ----

 Building Your Own Directives  Directives can appear as HTML elements, attributes, comments, or CSS classes.  Examples  Defining a Directive  angular.module('app', []).directive('myDir', function() { return myDirectiveDefinition; });

 Writing a Button Directive  describe('button directive', function () { var $compile, $rootScope; beforeEach(module('directives.button')); beforeEach(inject(function(_$compile_, _$rootScope_) { $compile = _$compile_; $rootScope = _$rootScope_; }));  it('adds a "btn" class to the button element', function() { var element = $compile(' ')  ($rootScope); expect(element.hasClass('btn')).toBe(true); });  }); });

 Using the button directive  Click Me!  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; }

 ngModelCtrl.$parsers.push(validateEqual); ngModelCtrl.$formatters.push(validateEqual);  scope.$watch(attrs.validateEquals, function() { ngModelCtrl.$setViewValue(ngModelCtrl.$vi ewValue); }); } }; });

 Plunker   Batarang

    Bindonce