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