Optimizing AngularJS Application
3 likes1,769 views
The document provides best practices for optimizing JavaScript code in AngularJS development, addressing issues like slow performance and unexpected characters. It emphasizes the importance of dependency injection, template caching, and minimizing DOM manipulations, along with guidance on using directives and promises. It also highlights resource links for further reference and encourages best coding habits to improve efficiency.
![¡ With
Dependency
Annotation
myApp.service(’myService’,
[‘$http’, function($http){
console.log($http);
}]);](https://image.slidesharecdn.com/optimizingangularjsapp-140927110242-phpapp02/85/Optimizing-AngularJS-Application-13-320.jpg)
![myApp.run([‘$templateCache’,
function($templateCache) {
$templateCache.put('tpls/
hello.html', '<div class='hello
'>Hello, {{world}}!</div>’);
}]);](https://image.slidesharecdn.com/optimizingangularjsapp-140927110242-phpapp02/85/Optimizing-AngularJS-Application-17-320.jpg)
![<Style>
[ng-cloak] {
display: none;
}
</style>
<body ng-cloak>](https://image.slidesharecdn.com/optimizingangularjsapp-140927110242-phpapp02/85/Optimizing-AngularJS-Application-22-320.jpg)
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