AngularJS Best Practices
•Descargar como PPTX, PDF•
18 recomendaciones•4,747 vistas
AngularJS Best Practices - Templates -Directives -Businesses logic -$scope -Performance optimization tips AngularJS 1.3
Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (20)
Destacado
Destacado (11)
Similar a AngularJS Best Practices
Similar a AngularJS Best Practices (20)
Último
Último (20)
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
- 41. Narek Mamikonyan @nmamikonyan narekmamikonyan@gmail.com
Notas del editor
- Image source: http://pixabay.com/en/tombstone-rip-dead-death-funeral-159792/