Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

AngularJS Best Practices

4,373 views

Published on

AngularJS Best Practices
- Templates
-Directives
-Businesses logic
-$scope
-Performance optimization tips
AngularJS 1.3

Published in: Technology
  • Be the first to comment

AngularJS Best Practices

  1. 1. Superheroic JavaScript MVW Framework
  2. 2. Table of contents •Short about AngularJS •AngularJS Best practices •AngularJS 1.3 •AngularJS 2.0
  3. 3. • Modularity • Dependency injection • Two – way binding • Directives • Filters • Templating • Services • Testing ready …. Etc. Why angular is powerful
  4. 4. Best Practices
  5. 5. Directory structure
  6. 6. 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)
  7. 7. Now we have powerful templates
  8. 8. 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.
  9. 9. 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)
  10. 10. • 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
  11. 11. 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
  12. 12. Cool, What about performance ?
  13. 13. 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
  14. 14. 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
  15. 15. 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 ?
  16. 16. Angular 1.3
  17. 17. Angular 1.3 • Performance (3-4x faster) • DOM manipulation • Dirty checking • Memory usage • Animations • Forms • Flexible validation • Debouncing • Error reporting • Other • $watchGroup • templateNamespace
  18. 18. Performance
  19. 19. Performance
  20. 20. Performance • $httpProvider.useApplyAsync(true); • one-time binding
  21. 21. form - ngModel • ngModel.$validators • $parsers + $formatters • ngModel.$asyncValidators • ngModel.ngModelOptions
  22. 22. form - ngModel.$validators
  23. 23. form - ngModel.$validators
  24. 24. form - ngModel.$asyncValidators
  25. 25. form - ngModel.ngModelOptions.debounce
  26. 26. form - ngModel.ngModelOptions-getter/settter
  27. 27. form - ngModel.ngModelOptions.updateOn
  28. 28. form - ngMessages
  29. 29. form - ngMessages
  30. 30. form - ngMessages
  31. 31. form - ngMessages
  32. 32. Other - composable SVG
  33. 33. Other - allOrNothing
  34. 34. Other - $watchGroup
  35. 35. Other - strictDI ng-europe 2014 video | follow-up post
  36. 36. Angular 2.0
  37. 37. 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
  38. 38. References AngularJS blog post AngularJS style guide ng-europe Ben Nadel’s blog Todd Motto’s blog ng-newsletter angular-test-patterns
  39. 39. Q&A
  40. 40. Narek Mamikonyan @nmamikonyan narekmamikonyan@gmail.com

×