5 angularjs features

ngularJS features
by Alexey Migutsky
all links are on the last slide
…and related gotchas

1. SCOPE
In 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
$parent
directive’s scope
transcluded $scope

2. DIGESTING
Run, $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. DATABINDING
My 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. MODULARITY
True 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

5 angularjs features

More Related Content

What's hot (20)

Viewers also liked (6)

Similar to 5 angularjs features (20)

Recently uploaded (20)

5 angularjs features