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

Best Practices

Directory structure

When angular still loading

• 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)

Use

Templates

Now we have powerful templates

• 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.

Directive

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

• 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

General

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

• 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 ?

Optimizing angular

Angular 1.3

Angular 1.3

• Performance (3-4x faster)

• DOM manipulation

• Dirty checking

• Memory usage

• Animations

• Forms

• Flexible validation

• Debouncing

• Error reporting

• Other

• $watchGroup

• templateNamespace

Performance

Performance

Performance

• $httpProvider.useApplyAsync(true);

• one-time binding

form - ngModel

• ngModel.$validators

• $parsers + $formatters

• ngModel.$asyncValidators

• ngModel.ngModelOptions

form - ngModel.$validators

form - ngModel.$validators

form - ngModel.$asyncValidators

form - ngModel.ngModelOptions.debounce

form - ngModel.ngModelOptions-getter/settter

form - ngModel.ngModelOptions.updateOn

form - ngMessages

form - ngMessages

form - ngMessages

form - ngMessages

Other - composable SVG

Other - allOrNothing

Other - $watchGroup

Other - strictDI

ng-europe 2014

video | follow-up post

Angular 2.0

Angular 2.0

controllers

DDO

$scope

angular.module

jqLite

generic binding syntax

benchpress

WTF instrumentation

DI query mechanism

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

Q&A

Narek Mamikonyan

@nmamikonyan

narekmamikonyan@gmail.com