ANGULAR 2 CORE CONCEPTSFABIO BIONDI / MATTEO RONCHI2

unshift.xyz

2 ANGULAR 2 CORE CONCEPT

FABIOBIONDIUI Developer and Trainer

Sviluppo, formazione e consulenza su AngularJS, React, CreateJS, D3.js e diverse librerie Javascript.

2 ANGULAR 2 CORE CONCEPT

MATTEORONCHISenior Software Engineer

Appassionato di architetture e ottimizzazioni da poco aggiunto al team di Workwave

ANGULARCOMMUNITIES

G+: AngularJS Italia

Facebook: AngularJS Developer Italiani

2 ANGULAR 2 CORE CONCEPT

• 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 CONCEPT

• 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 CONCEPT

Imports

Component Name

selector name

Component Decorator

template

<widget />

Open Plnkr

COMPONENT COMMUNICATION

2 ANGULAR 2 CORE CONCEPT

<widget />

<tab-bar />

<map />

2 ANGULAR 2 CORE CONCEPT

Country Model

AUTOMATICALLY GENERATESCLASS PROPERTIES

ANGULAR 2 CORE CONCEPT2

COMPONENT INJECTION

MODEL

INPUT PROP

OUTPUT EVENT

<map [item]="country">

[…]INPUT PROPERTY

MAP COMPONENT

ANGULAR 2 CORE CONCEPT2

Input property item:Country

Template Binding

<tab-bar [data]="list" (onTabSelect)="doIt($event)">

[…]INPUT PROPERTY

(…)OUTPUT EVENT

TABBARCOMPONENT

ANGULAR 2 CORE CONCEPT2

ANGULAR 2 Built-in DIRECTIVES

ngFor,ngClass

CLICK EVENT

INPUT PROPS

OUTPUT EVENTS

1/2

ANGULAR 2 CORE CONCEPT2

OUTPUT EVENT

EMIT EVENT

2/2Emitter

ANGULARBOOSTRAPng.bootstrap(src.Widget)

ANGULAR 2 CORE CONCEPT2

1. LOAD LIBRARIES

1/2

ANGULAR 2 CORE CONCEPT2

2. Configure System.js

4. DISPLAY <widget/>

3. Bootstrap

2/2

DEPENDENCY INJECTION

2 ANGULAR 2 CORE CONCEPT

• @injectable to enable injection to services • Support multiple providers • Application level injections • Component level injections

NEW DEPENDENCY INJECTION ENGINE

2 ANGULAR 2 CORE CONCEPT

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 CONCEPT

Simple Service

export class MyService {

getData() { return loadData.load(); } }

2 ANGULAR 2 CORE CONCEPT

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 CONCEPT

“ Angular only calls a directive/component hook method if it is defined. “ [docs]

2 ANGULAR 2 CORE CONCEPT

BASE HOOKS (components & directives)

ngOnChanges input property value changes

ngOnInit Initialization step

ngDoCheck every change detection cycle

ngOnDestroy before destruction

2 ANGULAR 2 CORE CONCEPT

@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 CONCEPT

Angular Application are Data Driven

Data Model Components

2 ANGULAR 2 CORE CONCEPT

DATA CHANGES -> VIEW UPDATES

Data Model Components

2 ANGULAR 2 CORE CONCEPT

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 CONCEPT

CHANGE DETECTION IS DEFINED AT COMPONENT LEVEL

2 ANGULAR 2 CORE CONCEPT

CHANGE DETECTION CAN SHOULD BE OPTIMIZED

• Immutable Data • Observable • Custom BUS Systems …

2 ANGULAR 2 CORE CONCEPT

@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 CONCEPT

CHANGE DETECTION WITH IMMUTABLE DATA

CD

CD

CD CD

CD CD Cha

nge

Dete

ctio

n Fl

ow

2 ANGULAR 2 CORE CONCEPT

@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 CONCEPT

CHANGE DETECTION WITH OBSERVABLES

CD

CD

CD

CDCha

nge

Dete

ctio

n Fl

ow

WHAT CAUSE CHANGE DETECTION

2 ANGULAR 2 CORE CONCEPT

• setTimeout(), setInterval()• User Events (click, input change..)• XHR Requests

GET IN THE ZONE

2 ANGULAR 2 CORE CONCEPT

ZONE.JS INTERCEPTS ALL ASYNC OPERATIONS

Angular has its own NgZone to controls Change Detections

THANKS!

MATTEO RONCHI / @cef62FABIO BIONDI / fabiobiondi.com