This document provides an overview of core Angular 2 concepts, including: 1) Angular 2 introduces components instead of controllers and uses a one-way data flow instead of $scope. It is also written in TypeScript. 2) Angular 2 has a new dependency injection system, improved performance, better mobile support, and server-side rendering capabilities compared to AngularJS 1.x. 3) Key concepts in Angular 2 include components, communication between components, dependency injection, and the component lifecycle. Change detection and zones are also discussed.

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

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

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

4. ANGULARCOMMUNITIES
G+: AngularJS Italia
Facebook: AngularJS Developer Italiani

5. 2 ANGULAR 2 CORE CONCEPT
• 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 CONCEPT
• 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 CONCEPT
Imports
Component Name
selector name
Component
Decorator
template

9. <widget />
Open Plnkr
COMPONENT COMMUNICATION

10. 2 ANGULAR 2 CORE CONCEPT
<widget />
<tab-bar />
<map />

11. 2 ANGULAR 2 CORE CONCEPT
Country Model
AUTOMATICALLY GENERATES
CLASS PROPERTIES

12. ANGULAR 2 CORE CONCEPT2
COMPONENT
INJECTION
MODEL
INPUT PROP
OUTPUT EVENT

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

14. ANGULAR 2 CORE CONCEPT2
Input property
item:Country
Template Binding

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

16. ANGULAR 2 CORE CONCEPT2
ANGULAR 2 Built-in
DIRECTIVES
ngFor,ngClass
CLICK
EVENT
INPUT PROPS
OUTPUT EVENTS
1/2

17. ANGULAR 2 CORE CONCEPT2
OUTPUT EVENT
EMIT EVENT
2/2Emitter

18. ANGULARBOOSTRAP
ng.bootstrap(src.Widget)

19. ANGULAR 2 CORE CONCEPT2
1. LOAD LIBRARIES
1/2

20. ANGULAR 2 CORE CONCEPT2
2. Configure
System.js
4. DISPLAY <widget/>
3. Bootstrap
2/2

21. DEPENDENCY INJECTION

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

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

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

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

26. COMPONENT LIFECYCLE

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

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

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

30. CHANGE DETECTION

31. 2 ANGULAR 2 CORE CONCEPT
Angular Application are Data Driven
Data Model Components

32. 2 ANGULAR 2 CORE CONCEPT
DATA CHANGES -> VIEW UPDATES
Data Model Components

33. 2 ANGULAR 2 CORE CONCEPT
CHANGE DETECTION
TRAVELS TOP TO BOTTOM
CD
CD CD
CD CDCD
CD CD
ChangeDetection
Flow

34. 2 ANGULAR 2 CORE CONCEPT
CHANGE DETECTION IS
DEFINED AT COMPONENT LEVEL

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

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

37. 2 ANGULAR 2 CORE CONCEPT
CHANGE DETECTION
WITH IMMUTABLE DATA
CD
CD
CD CD
CD CD
ChangeDetection
Flow

38. 2 ANGULAR 2 CORE CONCEPT
@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

39. 2 ANGULAR 2 CORE CONCEPT
CHANGE DETECTION
WITH OBSERVABLES
CD
CD
CD
CD
ChangeDetection
Flow

40. WHAT CAUSE
CHANGE DETECTION

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

42. GET IN THE ZONE

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

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