A quick overview about Angular 2 Components, DI, Lifecycle and Change Detection. Interactive slides: http://slides.fabiobiondi.com/angular2-core-concepts Plunkr: http://plnkr.co/edit/vllrTYuOo6VJE7vMPEfQ?p=preview

1. ANGULAR 2
CORE CONCEPTS
FABIO BIONDI / MATTEO RONCHI2
unshift.xyz

2. 2 ANGULAR 2 CORE CONCEPTS
FABIOBIONDI
UI Developer and Trainer
Sviluppo, formazione e
consulenza su
AngularJS, React,
CreateJS, D3.js e diverse
librerie Javascript.
fabiobiondi.com

3. 2 ANGULAR 2 CORE CONCEPTS
MATTEORONCHI
Senior Software Engineer
Appassionato di
architetture e
ottimizzazioni da poco
aggiunto al team di
Workwave
@cef62

4. ANGULARCOMMUNITIES
AngularJS Italia
AngularJS Developer Italiani

5. 2 ANGULAR 2 CORE CONCEPTS
• Goodbye $scope
• No more controllers
• Component Based-UI
• 1-way data flow
• ES6 / Typescript
• New built-in directives
ANGULAR 2 VS 1.X

6. 2 ANGULAR 2 CORE CONCEPTS
• New DI system
• Performance
• Better Mobile Support
• Server side render e Native Script
• Embrace Flux and RxJS
• Change Detection System
ANGULAR 2 VS 1.X

7. COMPONENTFUNDAMENTALS

8. 2 ANGULAR 2 CORE CONCEPTS
Imports
Component Name
selector name <tab-bar/>
Component
Decorator
template

9. CREATE A WIDGET

10. 2 ANGULAR 2 CORE CONCEPTS
<widget />
<tab-bar />
<map />
Open Plnkr

11. 2 ANGULAR 2 CORE CONCEPTS
Country.ts (model)
Automatically generates
class properties

12. 2 ANGULAR 2 CORE CONCEPTS
Component
Injection
<widget/> (partial)
Component Name
Selector <widget/>

13. 2 ANGULAR 2 CORE CONCEPTS
INPUT PROP
OUTPUT EVENT
INPUT PROP
<widget/> (partial)

14. 2 ANGULAR 2 CORE CONCEPTS
<widget/> (completed)
1
2
3

15. <map [item]="country">
[…]
INPUT PROPERTY
MAP COMPONENT

16. ANGULAR 2 CORE CONCEPT2
<map/>
Input property
item:Country
Template Binding

17. <tab-bar [data]="list"
(onTabSelect)="doIt($event)">
[…]
INPUT PROPERTY
(…)
OUTPUT EVENT
TABBARCOMPONENT

18. ANGULAR 2 CORE CONCEPT2
1/2
<tab-bar/>
FRAMEWORK
DIRECTIVES
ngFor,ngClass

19. ANGULAR 2 CORE CONCEPT2
ASSIGN EMITTER
EMIT EVENT
2/2
<tab-bar/>
CURRENT TAB

20. ANGULARBOOSTRAP
ng.bootstrap(src.Widget)

21. 2 ANGULAR 2 CORE CONCEPTS
1. LOAD LIBRARIES
1/2

22. 2 ANGULAR 2 CORE CONCEPTS
2. Configure
System.js
3. Bootstrap
2/2
4. DISPLAY <widget/>

23. DEPENDENCY INJECTION

24. 2 ANGULAR 2 CORE CONCEPTS
• @injectable to enable injection to services
• Support multiple providers
• Application level injections
• Component level injections
NEW DEPENDENCY INJECTION ENGINE

25. 2 ANGULAR 2 CORE CONCEPTS
import { SubComp } from `./sub-comp`
import { MyHelper } from `./my-helper`
@Component({
template: `<sub-comp></sub-comp>`
directives: [SubComp]
})
class MyComp {
constructor(private helper: MyHelper) {}
}

26. 2 ANGULAR 2 CORE CONCEPTS
Simple Service
export class MyService {
getData() {
return loadData.load();
}
}

27. 2 ANGULAR 2 CORE CONCEPTS
import {Injectable} from ‘angular2/core’;
@Injectable()
export class MyService {
constructor(public loadData:LoadData) {}
getData() {
return loadData.load();
}
}
Inject Service to a Service

28. COMPONENT LIFECYCLE

29. 2 ANGULAR 2 CORE CONCEPTS
“ Angular only calls a directive/
component hook method if it is
defined. “ [docs]

30. 2 ANGULAR 2 CORE CONCEPTS
BASE HOOKS
(components & directives)
ngOnChanges input property value changes
ngOnInit Initialization step
ngDoCheck every change detection cycle
ngOnDestroy before destruction

31. 2 ANGULAR 2 CORE CONCEPTS
@Directive({selector: '[my-spy]'})
class Spy implements OnInit, OnDestroy {
ngOnInit() {
console.log(`onInit`);
}
ngOnDestroy() {
console.log(`onDestroy`);
}
}
Usage: <div my-spy>...</div>

32. CHANGE DETECTION

33. 2 ANGULAR 2 CORE CONCEPTS
Angular Application are Data Driven
Data Model Components

34. 2 ANGULAR 2 CORE CONCEPTS
DATA CHANGES -> VIEW UPDATES
Data Model Components

35. 2 ANGULAR 2 CORE CONCEPTS
CHANGE DETECTION
TRAVELS TOP TO BOTTOM
CD
CD CD
CD CDCD
CD CD
ChangeDetection
Flow

36. 2 ANGULAR 2 CORE CONCEPTS
CHANGE DETECTION IS
DEFINED AT COMPONENT LEVEL

37. 2 ANGULAR 2 CORE CONCEPTS
CHANGE DETECTION
CAN SHOULD BE OPTIMIZED
• Immutable Data
• Observable
• Custom BUS Systems …

38. 2 ANGULAR 2 CORE CONCEPTS
@Component({
template: `
<h1>{{user.name}}</h1>
<h3>{{user.nickName}}</h3> `,
changeDetection: ChangeDetectionStrategy.OnPush
inputs: [user]
})
class MyComp {}
Enable Smart Change Detection

39. 2 ANGULAR 2 CORE CONCEPTS
CHANGE DETECTION
WITH IMMUTABLE DATA
CD
CD
CD CD
CD CD
ChangeDetection
Flow

40. 2 ANGULAR 2 CORE CONCEPTS
@Component({
template: `
<h1>{{user.name}}</h1>
<h3>{{user.nickName}}</h3> `,
changeDetection: ChangeDetectionStrategy.OnPush
})
class MyComp {
@Input() user$:Observable<User>;
constructor(private detector: ChangeDetectorRef) {}
ngOnInit() {
this.user$.subscribe((user) => {
this.user = user;
this.detector.markForCheck();
})
}
}
Change Detection with Observable

41. 2 ANGULAR 2 CORE CONCEPTS
CHANGE DETECTION
WITH OBSERVABLES
CD
CD
CD
CD
ChangeDetection
Flow

42. WHAT CAUSE
CHANGE DETECTION

43. 2 ANGULAR 2 CORE CONCEPTS
• setTimeout(), setInterval()
• User Events (click, input change..)
• XHR Requests

44. GET IN THE ZONE

45. 2 ANGULAR 2 CORE CONCEPTS
ZONE.JS INTERCEPTS ALL
ASYNC OPERATIONS
Angular has its own NgZone to
controls Change Detections

46. THANKS!
MATTEO RONCHI / @cef62
FABIO BIONDI / fabiobiondi.com