ngularJS features

by Alexey Migutsky

all links are on the last slide

…and related gotchas

1. SCOPEIn scope we trust [1]

Scope is created

$rootScope (always there)

ng-repeat(for each iteration, inherits)

ng-include(inherits)

ng-switch(inherits)

ng-if(when creating element)

ng-controller (inherits)

ng-model(inherits, thro implicit controller)

ng-view(inherits, thro controller)

directive with scope:true(inherits)

directive with transclude:true(inherits, sibling)

directive with scope: {} (does not inherit)

Scope is not created

directive with scope: false (default value)

All directives, not mentioned on the previous slide

Angular always tracks child-parent relationships, even without inheritance

but $parent referencing is bad!

There can be only 1 scope per 1 element [2]

Directives are not mixins Isolated scope can isolate non-isolated scopes on the same element

Transcluded scope is sibling to directive’s scope

$parentdirective’s scope

transcluded $scope

2. DIGESTINGRun, $digest, run! [3]

Do not use $digest, use $apply in directives.

$digest is a single run, not the full cycle

$watch expression is called in $scope’s context!

In the expression this will refer to the $scope!Do not use $watch with property getters without binding.

$digest event propagates inside isolated scopes!

The change in parent scope will trigger isolated watchers

Use events to handle ‘model changes’ sparingly [4]

Use $watch instead.Digest cycle is fast…

…until you write bloated $watch exressions.

Watchtower [5] comes to the rescue!

3. DATABINDINGMy name is Bind, Data Bind [6]

Expressions are JavaScript-like code

In case of emergency use $eval() and not eval()

Expressions have no flow control

Great decision for templates!

Expressions are evaluated against current scope.

Remember the $watch gotcha?

Expressions can have function call reference

You can specify parameters to be passed upon the call.“someMethodCall( param1, param2 )”

Not very common, is it?

It should be called like this in JS:someMethodCall( { param1 : ‘value’,

param2: ‘value2’})

4. DEPENDENCY INJECTION

Injections are the best thing ever invented ... [7]

The only orthodoxal way to establish relationships between components is DI.

Remember the ‘minification problem’[8]

Use array-based declarations.Or just use ngmin [9].

AngularJS ‘runtime’ is an IoC container.

Read it like this: you should wrap 3rd party components, which are not integrated with angular, into directives/services.

You can’t inject (use) them as is!

5. MODULARITYTrue independence and freedom can only exist in doing what's right. [10]

Always use angular.module syntax

It is good for testing.It is good for decoupling.

It helps manage dependencies.

Prefer module-per-feature approach [11]

It is good for testing.It is good for refactoring and maintenance.

Using Angular with module loaders can be tricky

Angular ‘modules’ has a different nature.Need some handcrafting to make modules and ‘modules’ play nicely.

Keep services/directives/modules as independent as possible. This is #1 priority.

Use isolated scope for main directives.Keep shared state in services.Keep constructors in factories.

[1] In scope we trust[2] 1 scope per 1 element[3] Run, $digest, run![4] Why dirty checkings and not events?[5] Project 'Watchtower'[6] My name is Bind, Data Bind![7] Injections are the best things...[8] Minification problem in Angular[9] ngmin[10] True independence and freedom

can only exist in doing what's right. [11] module-per-feature architecture

Links

@mr_mig_by Alexey Migutsky