ANGULAR 2 CORE CONCEPTS FABIO BIONDI / MATTEO RONCHI 2 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 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 Component Decorator template

COMPONENT COMMUNICATION

2 ANGULAR 2 CORE CONCEPTS Open Plnkr

2 ANGULAR 2 CORE CONCEPTS Country Model AUTOMATICALLY GENERATES
 CLASS PROPERTIES

2 ANGULAR 2 CORE CONCEPTS COMPONENT 
 INJECTION MODEL INPUT PROP OUTPUT EVENT

[…]
 INPUT PROPERTY MAP COMPONENT

ANGULAR 2 CORE CONCEPT 2 Input property item:Country
 Template Binding

[…]
 INPUT PROPERTY (…)
 OUTPUT EVENT TABBARCOMPONENT

ANGULAR 2 CORE CONCEPT 2 ANGULAR 2 Built-in DIRECTIVES ngFor,ngClass CLICK EVENT INPUT PROPS OUTPUT EVENTS 1/2

ANGULAR 2 CORE CONCEPT 2 OUTPUT EVENT EMIT EVENT 2/2 Emitter

ANGULARBOOSTRAP ng.bootstrap(src.Widget)

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

2 ANGULAR 2 CORE CONCEPTS 2. Configure System.js 4. DISPLAY 3. Bootstrap 2/2

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:  ``   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:  

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 Change Detection 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:  `    

{{user.name}}

   

{{user.nickName}}

 `,     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 Change Detection Flow

2 ANGULAR 2 CORE CONCEPTS @Component({     template:  `    

{{user.name}}

   

{{user.nickName}}

 `,     changeDetection:  ChangeDetectionStrategy.OnPush   })     class  MyComp  {   @Input()  user$:Observable;     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 Change Detection 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 / @cef62 FABIO BIONDI / fabiobiondi.com