Angular 2 - Core Concepts
13 likes10,331 views
The document outlines key concepts of Angular 2, emphasizing the transition from AngularJS with features such as a component-based UI, one-way data flow, and enhanced mobile support. It discusses new aspects like dependency injection, change detection, and lifecycle hooks, as well as performance improvements. The document serves as a primer for developers transitioning to Angular 2, detailing the framework's architecture and functionalities.
![<map [item]="country">
[…]
INPUT PROPERTY
MAP COMPONENT](https://image.slidesharecdn.com/angularjscoreconcepts-160322235139/85/Angular-2-Core-Concepts-15-320.jpg)
![<tab-bar [data]="list"
(onTabSelect)="doIt($event)">
[…]
INPUT PROPERTY
(…)
OUTPUT EVENT
TABBARCOMPONENT](https://image.slidesharecdn.com/angularjscoreconcepts-160322235139/85/Angular-2-Core-Concepts-17-320.jpg)
![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) {}
}](https://image.slidesharecdn.com/angularjscoreconcepts-160322235139/85/Angular-2-Core-Concepts-25-320.jpg)
![2 ANGULAR 2 CORE CONCEPTS
“ Angular only calls a directive/
component hook method if it is
defined. “ [docs]](https://image.slidesharecdn.com/angularjscoreconcepts-160322235139/85/Angular-2-Core-Concepts-29-320.jpg)
![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>](https://image.slidesharecdn.com/angularjscoreconcepts-160322235139/85/Angular-2-Core-Concepts-31-320.jpg)
![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](https://image.slidesharecdn.com/angularjscoreconcepts-160322235139/85/Angular-2-Core-Concepts-38-320.jpg)
Angular 2 - Core Concepts
- 1. ANGULAR 2 CORE CONCEPTS FABIO BIONDI / MATTEO RONCHI2 unshift.xyz
- 2. 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
- 15. <map [item]="country"> […] INPUT PROPERTY MAP COMPONENT
- 16. ANGULAR 2 CORE CONCEPT2 <map/> Input property item:Country Template Binding
- 17. <tab-bar [data]="list" (onTabSelect)="doIt($event)"> […] INPUT PROPERTY (…) OUTPUT EVENT TABBARCOMPONENT
- 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
- 21. 2 ANGULAR 2 CORE CONCEPTS 1. LOAD LIBRARIES 1/2
- 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>
- 32. CHANGE DETECTION
- 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
- 44. GET IN THE ZONE
- 45. 2 ANGULAR 2 CORE CONCEPTS ZONE.JS INTERCEPTS ALL ASYNC OPERATIONS Angular has its own NgZone to controls Change Detections
- 46. THANKS! MATTEO RONCHI / @cef62 FABIO BIONDI / fabiobiondi.com