Upload
codemotion
View
674
Download
0
Embed Size (px)
Citation preview
2 ANGULAR 2 CORE CONCEPT
FABIOBIONDIUI Developer and Trainer
Sviluppo, formazione e consulenza su AngularJS, React, CreateJS, D3.js e diverse librerie Javascript.
2 ANGULAR 2 CORE CONCEPT
MATTEORONCHISenior Software Engineer
Appassionato di architetture e ottimizzazioni da poco aggiunto al team di Workwave
ANGULARCOMMUNITIES
G+: AngularJS Italia
Facebook: AngularJS Developer Italiani
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
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
COMPONENTFUNDAMENTALS
2 ANGULAR 2 CORE CONCEPT
Imports
Component Name
selector name
Component Decorator
template
2 ANGULAR 2 CORE CONCEPT
<widget />
<tab-bar />
<map />
2 ANGULAR 2 CORE CONCEPT
Country Model
AUTOMATICALLY GENERATESCLASS PROPERTIES
ANGULAR 2 CORE CONCEPT2
COMPONENT INJECTION
MODEL
INPUT PROP
OUTPUT EVENT
<map [item]="country">
[…]INPUT PROPERTY
MAP COMPONENT
ANGULAR 2 CORE CONCEPT2
Input property item:Country
Template Binding
<tab-bar [data]="list" (onTabSelect)="doIt($event)">
[…]INPUT PROPERTY
(…)OUTPUT EVENT
TABBARCOMPONENT
ANGULAR 2 CORE CONCEPT2
ANGULAR 2 Built-in DIRECTIVES
ngFor,ngClass
CLICK EVENT
INPUT PROPS
OUTPUT EVENTS
1/2
ANGULAR 2 CORE CONCEPT2
OUTPUT EVENT
EMIT EVENT
2/2Emitter
ANGULARBOOSTRAPng.bootstrap(src.Widget)
ANGULAR 2 CORE CONCEPT2
1. LOAD LIBRARIES
1/2
ANGULAR 2 CORE CONCEPT2
2. Configure System.js
4. DISPLAY <widget/>
3. Bootstrap
2/2
DEPENDENCY INJECTION
2 ANGULAR 2 CORE CONCEPT
• @injectable to enable injection to services • Support multiple providers • Application level injections • Component level injections
NEW DEPENDENCY INJECTION ENGINE
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) {} }
2 ANGULAR 2 CORE CONCEPT
Simple Service
export class MyService {
getData() { return loadData.load(); } }
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
COMPONENT LIFECYCLE
2 ANGULAR 2 CORE CONCEPT
“ Angular only calls a directive/component hook method if it is defined. “ [docs]
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
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>
CHANGE DETECTION
2 ANGULAR 2 CORE CONCEPT
Angular Application are Data Driven
Data Model Components
2 ANGULAR 2 CORE CONCEPT
DATA CHANGES -> VIEW UPDATES
Data Model Components
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
2 ANGULAR 2 CORE CONCEPT
CHANGE DETECTION IS DEFINED AT COMPONENT LEVEL
2 ANGULAR 2 CORE CONCEPT
CHANGE DETECTION CAN SHOULD BE OPTIMIZED
• Immutable Data • Observable • Custom BUS Systems …
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
2 ANGULAR 2 CORE CONCEPT
CHANGE DETECTION WITH IMMUTABLE DATA
CD
CD
CD CD
CD CD Cha
nge
Dete
ctio
n Fl
ow
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
2 ANGULAR 2 CORE CONCEPT
CHANGE DETECTION WITH OBSERVABLES
CD
CD
CD
CDCha
nge
Dete
ctio
n Fl
ow
WHAT CAUSE CHANGE DETECTION
2 ANGULAR 2 CORE CONCEPT
• setTimeout(), setInterval()• User Events (click, input change..)• XHR Requests
GET IN THE ZONE
2 ANGULAR 2 CORE CONCEPT
ZONE.JS INTERCEPTS ALL ASYNC OPERATIONS
Angular has its own NgZone to controls Change Detections