Weitere ähnliche Inhalte Ähnlich wie Angular 2 - Core Concepts (20) Mehr von Fabio Biondi (18) Kürzlich hochgeladen (20) Angular 2 - Core Concepts2. 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
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
8. 2 ANGULAR 2 CORE CONCEPTS
Imports
Component Name
selector name <tab-bar/>
Component
Decorator
template
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
16. ANGULAR 2 CORE CONCEPT2
<map/>
Input property
item:Country
Template Binding
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
22. 2 ANGULAR 2 CORE CONCEPTS
2. Configure
System.js
3. Bootstrap
2/2
4. DISPLAY <widget/>
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
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>
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
43. 2 ANGULAR 2 CORE CONCEPTS
• setTimeout(), setInterval()
• User Events (click, input change..)
• XHR Requests
45. 2 ANGULAR 2 CORE CONCEPTS
ZONE.JS INTERCEPTS ALL
ASYNC OPERATIONS
Angular has its own NgZone to
controls Change Detections