Optimizing AngularJS Application
•
3 likes•1,767 views
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.
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Similar to Optimizing AngularJS Application
Similar to Optimizing AngularJS Application (20)
More from Md. Ziaul Haq
Recently uploaded
Recently uploaded (20)
Optimizing AngularJS Application
- 2. Md. Ziaul Haq Sr. JavaScript Developer oDesk Inc. @jquerygeek
- 3. ¡ What && Why
- 4. ¡ Identify the problems ¡ The solution with best practices ¡ Few more best practices
- 7. ¡ Network related issue ¡ Unexpected characters ¡ Slow DOM ¡ Slow watcher
- 8. ¡ Minify your codes § Use Uglify
- 10. ¡ Write minify safe code § Use Dependency Annotation
- 11. ¡ Without Dependency Annotation myApp.service(’myService’, function($http){ console.log($http); });
- 12. ¡ Without Dependency Annotation myApp.service("myService", function(a){ console.log(a) });
- 13. ¡ With Dependency Annotation myApp.service(’myService’, [‘$http’, function($http){ console.log($http); }]);
- 14. ¡ Use ‘ng-‐annotate’ § https://github.com/olov/ng-‐annotate
- 15. ¡ Lot of network request § Mostly for template files
- 16. ¡ Cache the templates § Use $templateCache service
- 17. myApp.run([‘$templateCache’, function($templateCache) { $templateCache.put('tpls/ hello.html', '<div class='hello '>Hello, {{world}}!</div>’); }]);
- 18. ¡ For grunt § https://github.com/karlgoldstein/grunt-‐html2js ¡ For gulp § https://github.com/fraserxu/gulp-‐html2js
- 20. ¡ Template tag {{ }} in landing page
- 21. — Hide the body/some element, till bootstrap angular — Use ng-‐cloak
- 22. <Style> [ng-cloak] { display: none; } </style> <body ng-cloak>
- 23. ▪ Hide individual expressions ▪ Use ng-‐bind <span ng-bind=”data.value”> </span>
- 26. ¡ Optimize ng-‐repeat § Use the track by syntax <li ng-repeat=” item in data.items track by item.id ”> </li>
- 27. ¡ Use bind-‐once <li ng-repeat=” item in ::data.items"> {{::item.title}} </li>
- 28. ¡ Filter in controller, not in ‘ng-‐repeat’
- 30. ¡ Do you need $watch? ¡ Use unWatch ¡ Keep $watch smaller and focused ¡ Avoid loop in $watch
- 31. ¡ Avoid deep comparison $scope.user = { id: grrey, name: Gandaf Grey, email: ggreay@gmail.com } $scope.$watch('user', function(newUser) { //... }, true);
- 32. ¡ Keep filter simple with single task ¡ Use bind-‐once ¡ Keep less item in ng-‐repeat
- 35. ¡ Bootstrap Angular app § Angular-‐seed https://github.com/angular/angular-‐seed § Angular-‐fun https://github.com/CaryLandholt/ AngularFun
- 36. ¡ 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.
- 37. ¡ Separate the business logic § Service ▪ Should not refer DOM ▪ All business login in service
- 38. § Directive ▪ DOM manipulations must in directives ▪ Use scope instead of $scope in link ▪ Isolated scope for reusable components. ▪ Custom prefix to avoid conflict ▪ Don’t use ‘ng’ and ‘ui’ as prefix.
- 39. § Use of Directive ▪ Use ‘data’ prefix for valid HTML " <div data-my-directive> </div>
- 40. ¡ Choose the better one § Use promises ($q) instead of old callbacks. § Use ngIf instead of ngShow & ngHide
- 41. ¡ Choose the better one § Use ng-‐src instead of src=“{{ }}” § Use ng-‐href instead of href=“{{ }}”
- 42. ¡ Avoid old/jQuery habit § $timeout instead of setTimeout § $interval instead of setInterval § $window instead of window § $document instead of document § $http instead of $.ajax
- 43. ¡ https://docs.angularjs.org/ ¡ https://github.com/mgechev/angularjs-‐style-‐ guide ¡ ng-‐book
- 45. Thanks, all. J Drop me a line if more question jquerygeek@elance-‐odesk.com