Fabio Biondi e Matteo Ronchi ci presentano AngularJS 2, analizzando la nuova sintassi per la creazione di componenti che ora assumono un ruolo fondamentale all’interno del framework. Iscriviti qui per partecipare ad altri Tech Webinar: http://goo.gl/iW81VD Scrivici a training@codemotion.it Tw: @codemotionTR

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
index.html

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

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

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