AngularJS Best Practices

Superheroic JavaScript MVW Framework

Table of contents •Short about AngularJS •AngularJS Best practices •AngularJS 1.3 •AngularJS 2.0

• Modularity • Dependency injection • Two – way binding • Directives • Filters • Templating • Services • Testing ready …. Etc. Why angular is powerful

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)

Now we have powerful templates

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.

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)

• 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

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

Cool, What about performance ?

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

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

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 ?

Angular 1.3 • Performance (3-4x faster) • DOM manipulation • Dirty checking • Memory usage • Animations • Forms • Flexible validation • Debouncing • Error reporting • Other • $watchGroup • templateNamespace

Performance • $httpProvider.useApplyAsync(true); • one-time binding

form - ngModel • ngModel.$validators • $parsers + $formatters • ngModel.$asyncValidators • ngModel.ngModelOptions

form - ngModel.$asyncValidators

form - ngModel.ngModelOptions.debounce

form - ngModel.ngModelOptions-getter/settter

form - ngModel.ngModelOptions.updateOn

Other - strictDI ng-europe 2014 video | follow-up post

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

References AngularJS blog post AngularJS style guide ng-europe Ben Nadel’s blog Todd Motto’s blog ng-newsletter angular-test-patterns

Narek Mamikonyan @nmamikonyan narekmamikonyan@gmail.com

AngularJS Best Practices

More Related Content

What's hot

Viewers also liked

Similar to AngularJS Best Practices

Recently uploaded

AngularJS Best Practices

Editor's Notes