Download - Angular 2: core concepts
![Page 2: Angular 2: core concepts](https://reader033.vdocuments.mx/reader033/viewer/2022050900/58729e171a28ab07208b524b/html5/thumbnails/2.jpg)
2 ANGULAR 2 CORE CONCEPT
FABIOBIONDIUI Developer and Trainer
Sviluppo, formazione e consulenza su AngularJS, React, CreateJS, D3.js e diverse librerie Javascript.
![Page 3: Angular 2: core concepts](https://reader033.vdocuments.mx/reader033/viewer/2022050900/58729e171a28ab07208b524b/html5/thumbnails/3.jpg)
2 ANGULAR 2 CORE CONCEPT
MATTEORONCHISenior Software Engineer
Appassionato di architetture e ottimizzazioni da poco aggiunto al team di Workwave
![Page 4: Angular 2: core concepts](https://reader033.vdocuments.mx/reader033/viewer/2022050900/58729e171a28ab07208b524b/html5/thumbnails/4.jpg)
ANGULARCOMMUNITIES
G+: AngularJS Italia
Facebook: AngularJS Developer Italiani
![Page 5: Angular 2: core concepts](https://reader033.vdocuments.mx/reader033/viewer/2022050900/58729e171a28ab07208b524b/html5/thumbnails/5.jpg)
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
![Page 6: Angular 2: core concepts](https://reader033.vdocuments.mx/reader033/viewer/2022050900/58729e171a28ab07208b524b/html5/thumbnails/6.jpg)
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
![Page 7: Angular 2: core concepts](https://reader033.vdocuments.mx/reader033/viewer/2022050900/58729e171a28ab07208b524b/html5/thumbnails/7.jpg)
COMPONENTFUNDAMENTALS
![Page 8: Angular 2: core concepts](https://reader033.vdocuments.mx/reader033/viewer/2022050900/58729e171a28ab07208b524b/html5/thumbnails/8.jpg)
2 ANGULAR 2 CORE CONCEPT
Imports
Component Name
selector name
Component Decorator
template
![Page 10: Angular 2: core concepts](https://reader033.vdocuments.mx/reader033/viewer/2022050900/58729e171a28ab07208b524b/html5/thumbnails/10.jpg)
2 ANGULAR 2 CORE CONCEPT
<widget />
<tab-bar />
<map />
![Page 11: Angular 2: core concepts](https://reader033.vdocuments.mx/reader033/viewer/2022050900/58729e171a28ab07208b524b/html5/thumbnails/11.jpg)
2 ANGULAR 2 CORE CONCEPT
Country Model
AUTOMATICALLY GENERATESCLASS PROPERTIES
![Page 12: Angular 2: core concepts](https://reader033.vdocuments.mx/reader033/viewer/2022050900/58729e171a28ab07208b524b/html5/thumbnails/12.jpg)
ANGULAR 2 CORE CONCEPT2
COMPONENT INJECTION
MODEL
INPUT PROP
OUTPUT EVENT
![Page 13: Angular 2: core concepts](https://reader033.vdocuments.mx/reader033/viewer/2022050900/58729e171a28ab07208b524b/html5/thumbnails/13.jpg)
<map [item]="country">
[…]INPUT PROPERTY
MAP COMPONENT
![Page 14: Angular 2: core concepts](https://reader033.vdocuments.mx/reader033/viewer/2022050900/58729e171a28ab07208b524b/html5/thumbnails/14.jpg)
ANGULAR 2 CORE CONCEPT2
Input property item:Country
Template Binding
![Page 15: Angular 2: core concepts](https://reader033.vdocuments.mx/reader033/viewer/2022050900/58729e171a28ab07208b524b/html5/thumbnails/15.jpg)
<tab-bar [data]="list" (onTabSelect)="doIt($event)">
[…]INPUT PROPERTY
(…)OUTPUT EVENT
TABBARCOMPONENT
![Page 16: Angular 2: core concepts](https://reader033.vdocuments.mx/reader033/viewer/2022050900/58729e171a28ab07208b524b/html5/thumbnails/16.jpg)
ANGULAR 2 CORE CONCEPT2
ANGULAR 2 Built-in DIRECTIVES
ngFor,ngClass
CLICK EVENT
INPUT PROPS
OUTPUT EVENTS
1/2
![Page 17: Angular 2: core concepts](https://reader033.vdocuments.mx/reader033/viewer/2022050900/58729e171a28ab07208b524b/html5/thumbnails/17.jpg)
ANGULAR 2 CORE CONCEPT2
OUTPUT EVENT
EMIT EVENT
2/2Emitter
![Page 18: Angular 2: core concepts](https://reader033.vdocuments.mx/reader033/viewer/2022050900/58729e171a28ab07208b524b/html5/thumbnails/18.jpg)
ANGULARBOOSTRAPng.bootstrap(src.Widget)
![Page 19: Angular 2: core concepts](https://reader033.vdocuments.mx/reader033/viewer/2022050900/58729e171a28ab07208b524b/html5/thumbnails/19.jpg)
ANGULAR 2 CORE CONCEPT2
1. LOAD LIBRARIES
1/2
![Page 20: Angular 2: core concepts](https://reader033.vdocuments.mx/reader033/viewer/2022050900/58729e171a28ab07208b524b/html5/thumbnails/20.jpg)
ANGULAR 2 CORE CONCEPT2
2. Configure System.js
4. DISPLAY <widget/>
3. Bootstrap
2/2
![Page 21: Angular 2: core concepts](https://reader033.vdocuments.mx/reader033/viewer/2022050900/58729e171a28ab07208b524b/html5/thumbnails/21.jpg)
DEPENDENCY INJECTION
![Page 22: Angular 2: core concepts](https://reader033.vdocuments.mx/reader033/viewer/2022050900/58729e171a28ab07208b524b/html5/thumbnails/22.jpg)
2 ANGULAR 2 CORE CONCEPT
• @injectable to enable injection to services • Support multiple providers • Application level injections • Component level injections
NEW DEPENDENCY INJECTION ENGINE
![Page 23: Angular 2: core concepts](https://reader033.vdocuments.mx/reader033/viewer/2022050900/58729e171a28ab07208b524b/html5/thumbnails/23.jpg)
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) {} }
![Page 24: Angular 2: core concepts](https://reader033.vdocuments.mx/reader033/viewer/2022050900/58729e171a28ab07208b524b/html5/thumbnails/24.jpg)
2 ANGULAR 2 CORE CONCEPT
Simple Service
export class MyService {
getData() { return loadData.load(); } }
![Page 25: Angular 2: core concepts](https://reader033.vdocuments.mx/reader033/viewer/2022050900/58729e171a28ab07208b524b/html5/thumbnails/25.jpg)
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
![Page 26: Angular 2: core concepts](https://reader033.vdocuments.mx/reader033/viewer/2022050900/58729e171a28ab07208b524b/html5/thumbnails/26.jpg)
COMPONENT LIFECYCLE
![Page 27: Angular 2: core concepts](https://reader033.vdocuments.mx/reader033/viewer/2022050900/58729e171a28ab07208b524b/html5/thumbnails/27.jpg)
2 ANGULAR 2 CORE CONCEPT
“ Angular only calls a directive/component hook method if it is defined. “ [docs]
![Page 28: Angular 2: core concepts](https://reader033.vdocuments.mx/reader033/viewer/2022050900/58729e171a28ab07208b524b/html5/thumbnails/28.jpg)
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
![Page 29: Angular 2: core concepts](https://reader033.vdocuments.mx/reader033/viewer/2022050900/58729e171a28ab07208b524b/html5/thumbnails/29.jpg)
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>
![Page 30: Angular 2: core concepts](https://reader033.vdocuments.mx/reader033/viewer/2022050900/58729e171a28ab07208b524b/html5/thumbnails/30.jpg)
CHANGE DETECTION
![Page 31: Angular 2: core concepts](https://reader033.vdocuments.mx/reader033/viewer/2022050900/58729e171a28ab07208b524b/html5/thumbnails/31.jpg)
2 ANGULAR 2 CORE CONCEPT
Angular Application are Data Driven
Data Model Components
![Page 32: Angular 2: core concepts](https://reader033.vdocuments.mx/reader033/viewer/2022050900/58729e171a28ab07208b524b/html5/thumbnails/32.jpg)
2 ANGULAR 2 CORE CONCEPT
DATA CHANGES -> VIEW UPDATES
Data Model Components
![Page 33: Angular 2: core concepts](https://reader033.vdocuments.mx/reader033/viewer/2022050900/58729e171a28ab07208b524b/html5/thumbnails/33.jpg)
2 ANGULAR 2 CORE CONCEPT
CHANGE DETECTION TRAVELS TOP TO BOTTOM
CD
CD CD
CD CD CD
CD CD Cha
nge
Dete
ctio
n Fl
ow
![Page 34: Angular 2: core concepts](https://reader033.vdocuments.mx/reader033/viewer/2022050900/58729e171a28ab07208b524b/html5/thumbnails/34.jpg)
2 ANGULAR 2 CORE CONCEPT
CHANGE DETECTION IS DEFINED AT COMPONENT LEVEL
![Page 35: Angular 2: core concepts](https://reader033.vdocuments.mx/reader033/viewer/2022050900/58729e171a28ab07208b524b/html5/thumbnails/35.jpg)
2 ANGULAR 2 CORE CONCEPT
CHANGE DETECTION CAN SHOULD BE OPTIMIZED
• Immutable Data • Observable • Custom BUS Systems …
![Page 36: Angular 2: core concepts](https://reader033.vdocuments.mx/reader033/viewer/2022050900/58729e171a28ab07208b524b/html5/thumbnails/36.jpg)
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
![Page 37: Angular 2: core concepts](https://reader033.vdocuments.mx/reader033/viewer/2022050900/58729e171a28ab07208b524b/html5/thumbnails/37.jpg)
2 ANGULAR 2 CORE CONCEPT
CHANGE DETECTION WITH IMMUTABLE DATA
CD
CD
CD CD
CD CD Cha
nge
Dete
ctio
n Fl
ow
![Page 38: Angular 2: core concepts](https://reader033.vdocuments.mx/reader033/viewer/2022050900/58729e171a28ab07208b524b/html5/thumbnails/38.jpg)
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
![Page 39: Angular 2: core concepts](https://reader033.vdocuments.mx/reader033/viewer/2022050900/58729e171a28ab07208b524b/html5/thumbnails/39.jpg)
2 ANGULAR 2 CORE CONCEPT
CHANGE DETECTION WITH OBSERVABLES
CD
CD
CD
CDCha
nge
Dete
ctio
n Fl
ow
![Page 40: Angular 2: core concepts](https://reader033.vdocuments.mx/reader033/viewer/2022050900/58729e171a28ab07208b524b/html5/thumbnails/40.jpg)
WHAT CAUSE CHANGE DETECTION
![Page 41: Angular 2: core concepts](https://reader033.vdocuments.mx/reader033/viewer/2022050900/58729e171a28ab07208b524b/html5/thumbnails/41.jpg)
2 ANGULAR 2 CORE CONCEPT
• setTimeout(), setInterval()• User Events (click, input change..)• XHR Requests
![Page 42: Angular 2: core concepts](https://reader033.vdocuments.mx/reader033/viewer/2022050900/58729e171a28ab07208b524b/html5/thumbnails/42.jpg)
GET IN THE ZONE
![Page 43: Angular 2: core concepts](https://reader033.vdocuments.mx/reader033/viewer/2022050900/58729e171a28ab07208b524b/html5/thumbnails/43.jpg)
2 ANGULAR 2 CORE CONCEPT
ZONE.JS INTERCEPTS ALL ASYNC OPERATIONS
Angular has its own NgZone to controls Change Detections