Angular js performance improvements

Angular js performance improvements

• 1.
  AngularJS performance improvements By GauravSuman
• 2.
  Improvement Areas ●watchers ●ng-repeat ●bind once ●ng-animation
• 3.
  Watchers $scope.$watch {{ }} typebindings Most directives (i.e. ng-show) Scope variables scope: { bar: '='} Filters {{ value | currency }}
• 4.
  ng-repeat By default, onmodel change, ng-repeat will create new DOM element for each element in collection. Example code: ... <div><ul> <a ng-repeat=”site in sites”> {{ site }} </a> </ul></div> … sites=[“www.google.com”, “www.youtube.com”]
• 5.
  ng-repeat track byprop(2) ... <div><ul> <a ng-repeat=”site in sites track by $index”> {{ site }} </a> </ul></div> ... This will not re-create already DOM elements if sites array is being appended by new sites. JSFiddle: http://jsfiddle.net/SeKk7/
• 6.
  Bind once ... <div><ul> <a> {{::site }} </a> </ul></div> ... If site value is not undefined, then watcher will be removed after rendering. Useful for non changing values. JSFiddle: http://jsfiddle.net/taly2808/y48wqjqs/
• 7.
  ng-animate By default, ifyou include the ngAnimate module in your AngularJS application, all of the structural and class changes in your application that use the $animate service (ex, ngRepeat, ngIf, ngSwitch, ngClass) will start to examine the DOM (Document Object Model) to see if the relevant DOM elements should be animated in or out. This requires additional processing.
• 8.
  Other Improvements Areas Paginationwith ng-repeat. Debounce ng-model. choosing between ng-if and ng-show.
• 9.
  THANK YOU