Superheroic JavaScript MVW Frame

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

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

Best Practices

Directory structure

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
o Should not do DOM manipulations
o Should 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
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

General
Use promises ($q) instead of callbacks.
Use $resource or RestAngular instead of $http when

working in REST API

Use angulars provided services instead of native ,
$timeout,$interval,$window, $document
AngularJS reserved prefix $, dont use it when defining a
variables
In DI order should be angulars 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
Dont 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

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

generic binding syntax

DI query mechanism

angular.module
jqLite

benchpress
WTF instrumentation

ng-europe 2014
video | follow-up post

References
AngularJS blog post
AngularJS style guide
ng-europe
Ben Nadels blog
Todd Mottos blog
ng-newsletter
angular-test-patterns

Q&A

Narek Mamikonyan
@nmamikonyan
narekmamikonyan@gmail.com