Angular 2 - Core Concepts

ANGULAR 2 CORE CONCEPTS FABIO BIONDI / MATTEO RONCHI2 unshift.xyz

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

2 ANGULAR 2 CORE CONCEPTS MATTEORONCHI Senior 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 ﬂow • 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

2 ANGULAR 2 CORE CONCEPTS Imports Component Name selector name <tab-bar/> Component Decorator template

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/> FRAMEWORK  DIRECTIVES ngFor,ngClass

ANGULAR 2 CORE CONCEPT2 ASSIGN EMITTER EMIT EVENT 2/2 <tab-bar/> CURRENT TAB

ANGULARBOOSTRAP ng.bootstrap(src.Widget)

2 ANGULAR 2 CORE CONCEPTS 1. LOAD LIBRARIES 1/2

2 ANGULAR 2 CORE CONCEPTS 2. Conﬁgure System.js 3. Bootstrap 2/2 4. DISPLAY <widget/>

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

2 ANGULAR 2 CORE CONCEPTS “ Angular only calls a directive/ component hook method if it is deﬁned. “ [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>

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 CDCD CD CD ChangeDetection Flow

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 ChangeDetection Flow

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 CD ChangeDetection Flow

2 ANGULAR 2 CORE CONCEPTS • setTimeout(), setInterval() • User Events (click, input change..) • XHR Requests

2 ANGULAR 2 CORE CONCEPTS ZONE.JS INTERCEPTS ALL ASYNC OPERATIONS Angular has its own NgZone to controls Change Detections

THANKS! MATTEO RONCHI / @cef62 FABIO BIONDI / fabiobiondi.com

Angular 2 - Core Concepts

More Related Content

What's hot

Similar to Angular 2 - Core Concepts

More from Fabio Biondi

Recently uploaded

Angular 2 - Core Concepts