Optimizing AngularJS Application

  • Published on

  • View

  • Download

Embed Size (px)


Optimizing AngularJS Application, that include with some useful best practices to in AngularJS. The best practices defined here is well stablished in Angular team itself and developers in community.


<ul><li> 1. Md. Ziaul Haq Sr. JavaScript Developer oDesk Inc. @jquerygeek </li> <li> 2. What &amp;&amp; Why </li> <li> 3. Identify the problems The solution with best practices Few more best practices </li> <li> 4. Network related issue Unexpected characters Slow DOM Slow watcher </li> <li> 5. Minify your codes Use Uglify </li> <li> 6. Write minify safe code Use Dependency Annotation </li> <li> 7. Without Dependency Annotation myApp.service(myService, function($http){ console.log($http); }); </li> <li> 8. Without Dependency Annotation myApp.service("myService", function(a){ console.log(a) }); </li> <li> 9. With Dependency Annotation myApp.service(myService, [$http, function($http){ console.log($http); }]); </li> <li> 10. Use ng-annotate https://github.com/olov/ng-annotate </li> <li> 11. Lot of network request Mostly for template files </li> <li> 12. Cache the templates Use $templateCache service </li> <li> 13. myApp.run([$templateCache, function($templateCache) { $templateCache.put('tpls/ hello.html', '<div>Hello, {{world}}!</div>); }]); </li> <li> 14. For grunt https://github.com/karlgoldstein/grunt-html2js For gulp https://github.com/fraserxu/gulp-html2js </li> <li> 15. Template tag {{ }} in landing page </li> <li> 16. Hide the body/some element, till bootstrap angular Use ng-cloak </li> <li> 17. </li> <li> 18. Hide individual expressions Use ng-bind </li> <li> 19. https://builtwith.angularjs.org/ </li> <li> 20. Repeating manipulation </li> <li> 21. Optimize ng-repeat Use the track by syntax </li> <li> 22. Use bind-once </li><li> {{::item.title}} </li> <li> 23. Filter in controller, not in ng-repeat </li> <li> 24. Do you need $watch? Use unWatch Keep $watch smaller and focused Avoid loop in $watch </li> <li> 25. Avoid deep comparison $scope.user = { id: grrey, name: Gandaf Grey, email: ggreay@gmail.com } $scope.$watch('user', function(newUser) { //... }, true); </li> <li> 26. Keep filter simple with single task Use bind-once Keep less item in ng-repeat </li> <li> 27. Bootstrap Angular app Angular-seed https://github.com/angular/angular-seed Angular-fun https://github.com/CaryLandholt/ AngularFun </li> <li> 28. Separate the business logic Controller Manipulate DOM in Controller Directives Commonly used functions as service. Use $emit, $broadcast or $on to communicate with other controller. </li> <li> 29. Separate the business logic Service Should not refer DOM All business login in service </li> <li> 30. Directive DOM manipulations must in directives Use scope instead of $scope in link Isolated scope for reusable components. Custom prefix to avoid conflict Dont use ng and ui as prefix. </li> <li> 31. Use of Directive Use data prefix for valid HTML " </li> <li> 32. Choose the better one Use promises ($q) instead of old callbacks. Use ngIf instead of ngShow &amp; ngHide </li> <li> 33. Choose the better one Use ng-src instead of src={{ }} Use ng-href instead of href={{ }} </li> <li> 34. Avoid old/jQuery habit $timeout instead of setTimeout $interval instead of setInterval $window instead of window $document instead of document $http instead of $.ajax </li> <li> 35. https://docs.angularjs.org/ https://github.com/mgechev/angularjs-style- guide ng-book </li> <li> 36. Thanks, all. J Drop me a line if more question jquerygeek@elance-odesk.com </li> </ul>