Angular 2 - Core Concepts

ANGULAR 2 CORE CONCEPTSFABIO BIONDI / MATTEO RONCHI2

unshift.xyz

2 ANGULAR 2 CORE CONCEPTS

FABIOBIONDIUI Developer and Trainer

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

fabiobiondi.com

2 ANGULAR 2 CORE CONCEPTS

MATTEORONCHISenior 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 flow

• 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

COMPONENTFUNDAMENTALS

2 ANGULAR 2 CORE CONCEPTS

Imports

Component Name

selector name <tab-bar/>

Component Decorator

template

CREATE A WIDGET

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/>

FRAMEWORKDIRECTIVES

ngFor,ngClass

ANGULAR 2 CORE CONCEPT2

ASSIGN EMITTER

EMIT EVENT

2/2

<tab-bar/>

CURRENT TAB

ANGULARBOOSTRAPng.bootstrap(src.Widget)

2 ANGULAR 2 CORE CONCEPTS

1. LOAD LIBRARIES

1/2

2 ANGULAR 2 CORE CONCEPTS

2. Configure System.js

3. Bootstrap

2/2

4. DISPLAY <widget/>

DEPENDENCY INJECTION

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

COMPONENT LIFECYCLE

2 ANGULAR 2 CORE CONCEPTS

“ Angular only calls a directive/component hook method if it is defined. “ [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>

CHANGE DETECTION

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

CD CD Chan

ge D

etec

tion

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 Chan

ge D

etec

tion

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

CDChan

ge D

etec

tion

Flow

WHAT CAUSE CHANGE DETECTION

2 ANGULAR 2 CORE CONCEPTS

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

GET IN THE ZONE

2 ANGULAR 2 CORE CONCEPTS

ZONE.JS INTERCEPTS ALL ASYNC OPERATIONS

Angular has its own NgZone to controls Change Detections

THANKS!

MATTEO RONCHI / @cef62FABIO BIONDI / fabiobiondi.com