AngularJS Best Practices
Download as PPTX, PDF18 likes4,751 views
The document provides a comprehensive overview of AngularJS, including its features, best practices, and optimization tips for both AngularJS 1.x and 2.0. It discusses modularity, dependency injection, directives, two-way binding, and various performance enhancements. Additionally, it covers usage guidelines for controllers, services, and scopes, as well as recommendations for improving efficiency in web applications built with AngularJS.
AngularJS Best Practices
- 1. Superheroic JavaScript MVW Framework
- 2. Table of contents •Short about AngularJS •AngularJS Best practices •AngularJS 1.3 •AngularJS 2.0
- 3. • Modularity • Dependency injection • Two – way binding • Directives • Filters • Templating • Services • Testing ready …. Etc. Why angular is powerful
- 7. Templates When angular still loading Use • Use ng-bind only for index.html or ng-cloak • For rest use {{ }} • When you need to set the src of an image dynamically use ng-src instead of src with {{ }} template. • When you need to set the href of an anchor tag dynamically use ng-href instead of href with {{ }} template. • Instead of using scope variable as string and using it with style attribute with {{ }}, use the directive ng-style with object-like parameters and scope variables as values: • Use $templateCache to decrease XHR calls (Optimization tips)
- 8. Now we have powerful templates
- 9. Directive • Name your directives with lowerCamelCase. • Use the dash-delimited format e.g ng-bind • Use prefixed names e.g my-customer • Reserved prefixes ng & ui • Clean up scope.$on('$destroy', ...) • use controller when you want to expose an API to other directives. Otherwise use link.
- 10. Business logic • Controllers oShould not do DOM manipulations oShould have view behavior • Services o Should not contain large DOM manipulations o Have logic independent of view o For session-level cache you can use $cacheFactory. (Optimization tips)
- 11. • Scope is read-only in view - Scope must refer to the model not to be a model (model is javascript object) • Scope is write-only in controller • $rootScope Unsubscribing watchers manually Demo with model Demo without model $scope
- 12. General • Use promises ($q) instead of callbacks. • Use $resource or RestAngular instead of $http when working in REST API • Use angular’s provided services instead of native , $timeout,$interval,$window, $document • AngularJS reserved prefix $, don’t use it when defining a variables • In DI order should be angular’s at first, then customs • Prefer the usage of controllers instead of ng-init
- 13. Cool, What about performance ?
- 14. Optimizing angular • Guaranteed watchers count is 2.000, link to count watchers • Limit DOM filters (Angular 1.2.x) • Each filter runs twice per $digest cycle • Use $filter provider - $filter('filter')(array, expression, comparator); • For content what should be rendered only once use bindonce (Angular 1.2.x) or {{::myVar}} (Angular 1.3.x) • $timeout & $interval functions has third argument which will skip $digest loop
- 15. Optimizing angular • Don’t write crazy things in $watch callback it will kill your app • $watch has two comparison modes • referential (default) - quick, shallow comparison • deep - slow, recurses through objects for a deep comparison; also makes a deep copy of the watched value each time it changes • $watchCollection function is a sort-of mid-ground between the two $watch() configurations • referential (default) - quick, shallow comparison lika default $watch • goes one-level deep and performs an additional, shallow reference check of the top level items in the collection • Avoid deep $watch whenever possible, instead use $watchCollection
- 16. Optimizing angular • ng-repeat - track by $index • By default, ng-repeat creates a dom node for each item and destroys that dom node when the item is removed. • With track by $index, it will reuse dom nodes. • Very Bad Practice: $$postDigest • $$ means private to Angular, so be aware that the interface is not stable • Fires a callback after the current $digest cycle completes • $timeout or $evalAsync ?
- 17. Angular 1.3
- 18. Angular 1.3 • Performance (3-4x faster) • DOM manipulation • Dirty checking • Memory usage • Animations • Forms • Flexible validation • Debouncing • Error reporting • Other • $watchGroup • templateNamespace
- 19. Performance
- 20. Performance
- 21. Performance • $httpProvider.useApplyAsync(true); • one-time binding
- 22. form - ngModel • ngModel.$validators • $parsers + $formatters • ngModel.$asyncValidators • ngModel.ngModelOptions
- 33. Other - composable SVG
- 36. Other - strictDI ng-europe 2014 video | follow-up post
- 37. Angular 2.0
- 38. Angular 2.0 controllers DDO $scope angular.module jqLite generic binding syntax DI query mechanism benchpress WTF instrumentation ng-europe 2014 video | follow-up post
- 39. References AngularJS blog post AngularJS style guide ng-europe Ben Nadel’s blog Todd Motto’s blog ng-newsletter angular-test-patterns
- 40. Q&A
Editor's Notes
- #39: Image source: http://pixabay.com/en/tombstone-rip-dead-death-funeral-159792/