Tech Webinar: Angular 2, Introduction to a new framework
3 likes1,796 views
The document provides an overview of the core concepts of Angular 2, highlighting significant changes from Angular 1.x, such as the elimination of $scope and controllers, introduction of component-based UI, one-way data flow, and improved performance. It details features like dependency injection, component lifecycle hooks, and change detection strategies for optimizing performance in applications. Additionally, it discusses various Angular functionalities, including template binding, event handling, and the role of Zone.js in managing asynchronous operations.
![<map [item]="country">
[…]
INPUT PROPERTY
MAP COMPONENT](https://image.slidesharecdn.com/angularjscoreconceptswebinar23-160331095350/85/Tech-Webinar-Angular-2-Introduction-to-a-new-framework-15-320.jpg)
![<tab-bar [data]="list"
(onTabSelect)="doIt($event)">
[…]
INPUT PROPERTY
(…)
OUTPUT EVENT
TABBARCOMPONENT](https://image.slidesharecdn.com/angularjscoreconceptswebinar23-160331095350/85/Tech-Webinar-Angular-2-Introduction-to-a-new-framework-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/angularjscoreconceptswebinar23-160331095350/85/Tech-Webinar-Angular-2-Introduction-to-a-new-framework-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/angularjscoreconceptswebinar23-160331095350/85/Tech-Webinar-Angular-2-Introduction-to-a-new-framework-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/angularjscoreconceptswebinar23-160331095350/85/Tech-Webinar-Angular-2-Introduction-to-a-new-framework-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/angularjscoreconceptswebinar23-160331095350/85/Tech-Webinar-Angular-2-Introduction-to-a-new-framework-38-320.jpg)
More Related Content
What's hot (20)
Similar to Tech Webinar: Angular 2, Introduction to a new framework (20)
More from Codemotion (20)
Recently uploaded (20)
Tech Webinar: Angular 2, Introduction to a new framework
- 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 index.html
- 22. 2 ANGULAR 2 CORE CONCEPTS 2. Configure System.js 3. Bootstrap 2/2 4. DISPLAY <widget/> index.html
- 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
- 48. THANKS! MATTEO RONCHI / @cef62 FABIO BIONDI / fabiobiondi.com