Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Angular2 Core Concepts - codemotion 2016

Angular2 Core Concepts - codemotion 2016

Introduction to Angular2 Core Concepts at Codemotion Rome 2016. Talk done together with Fabio Biondi.

Matteo Ronchi

March 19, 2016
Tweet

More Decks by Matteo Ronchi

Other Decks in Programming

Transcript

  1. 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. 2 ANGULAR 2 CORE CONCEPTS MATTEORONCHI Senior Software Engineer Appassionato

    di architetture e ottimizzazioni da poco aggiunto al team di Workwave @cef62
  3. 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
  4. 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
  5. 2 ANGULAR 2 CORE CONCEPTS • @injectable to enable injection

    to services • Support multiple providers • Application level injections • Component level injections NEW DEPENDENCY INJECTION ENGINE
  6. 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)  {}   }
  7. 2 ANGULAR 2 CORE CONCEPTS Simple Service export  class  MyService

     {      getData()  {          return  loadData.load();      }   }
  8. 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
  9. 2 ANGULAR 2 CORE CONCEPTS “ Angular only calls a

    directive/ component hook method if it is defined. “ [docs]
  10. 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
  11. 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>
  12. 2 ANGULAR 2 CORE CONCEPTS CHANGE DETECTION TRAVELS TOP TO

    BOTTOM CD CD CD CD CD CD CD CD Change Detection Flow
  13. 2 ANGULAR 2 CORE CONCEPTS CHANGE DETECTION CAN SHOULD BE

    OPTIMIZED • Immutable Data • Observable • Custom BUS Systems …
  14. 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
  15. 2 ANGULAR 2 CORE CONCEPTS CHANGE DETECTION WITH IMMUTABLE DATA

    CD CD CD CD CD CD Change Detection Flow
  16. 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
  17. 2 ANGULAR 2 CORE CONCEPTS • setTimeout(), setInterval() • User

    Events (click, input change..) • XHR Requests
  18. 2 ANGULAR 2 CORE CONCEPTS ZONE.JS INTERCEPTS ALL ASYNC OPERATIONS

    Angular has its own NgZone to controls Change Detections