O slideshow foi denunciado.
Seu SlideShare está sendo baixado. ×

Tech Webinar: Angular 2, Introduction to a new framework

Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Próximos SlideShares
Introduction to Angular 2
Introduction to Angular 2
Carregando em…3
×

Confira estes a seguir

1 de 48 Anúncio

Tech Webinar: Angular 2, Introduction to a new framework

Baixar para ler offline

Fabio Biondi e Matteo Ronchi ci presentano AngularJS 2, analizzando la nuova sintassi per la creazione di componenti che ora assumono un ruolo fondamentale all’interno del framework.

Iscriviti qui per partecipare ad altri Tech Webinar: http://goo.gl/iW81VD

Scrivici a training@codemotion.it
Tw: @codemotionTR

Fabio Biondi e Matteo Ronchi ci presentano AngularJS 2, analizzando la nuova sintassi per la creazione di componenti che ora assumono un ruolo fondamentale all’interno del framework.

Iscriviti qui per partecipare ad altri Tech Webinar: http://goo.gl/iW81VD

Scrivici a training@codemotion.it
Tw: @codemotionTR

Anúncio
Anúncio

Mais Conteúdo rRelacionado

Diapositivos para si (20)

Semelhante a Tech Webinar: Angular 2, Introduction to a new framework (20)

Anúncio

Mais de Codemotion (20)

Mais recentes (20)

Anúncio

Tech Webinar: Angular 2, Introduction to a new framework

  1. 1. ANGULAR 2 CORE CONCEPTS FABIO BIONDI / MATTEO RONCHI2 unshift.xyz
  2. 2. 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
  3. 3. 2 ANGULAR 2 CORE CONCEPTS MATTEORONCHI Senior Software Engineer Appassionato di architetture e ottimizzazioni da poco aggiunto al team di Workwave @cef62
  4. 4. ANGULARCOMMUNITIES AngularJS Italia AngularJS Developer Italiani
  5. 5. 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
  6. 6. 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
  7. 7. COMPONENTFUNDAMENTALS
  8. 8. 2 ANGULAR 2 CORE CONCEPTS Imports Component Name selector name <tab-bar/> Component Decorator template
  9. 9. CREATE A WIDGET
  10. 10. 2 ANGULAR 2 CORE CONCEPTS <widget /> <tab-bar /> <map /> Open Plnkr
  11. 11. 2 ANGULAR 2 CORE CONCEPTS Country.ts (model) Automatically generates class properties
  12. 12. 2 ANGULAR 2 CORE CONCEPTS Component Injection <widget/> (partial) Component Name Selector <widget/>
  13. 13. 2 ANGULAR 2 CORE CONCEPTS INPUT PROP OUTPUT EVENT INPUT PROP <widget/> (partial)
  14. 14. 2 ANGULAR 2 CORE CONCEPTS <widget/> (completed) 1 2 3
  15. 15. <map [item]="country"> […]
 INPUT PROPERTY MAP COMPONENT
  16. 16. ANGULAR 2 CORE CONCEPT2 <map/> Input property item:Country
 Template Binding
  17. 17. <tab-bar [data]="list"
 (onTabSelect)="doIt($event)"> […]
 INPUT PROPERTY (…)
 OUTPUT EVENT TABBARCOMPONENT
  18. 18. ANGULAR 2 CORE CONCEPT2 1/2 <tab-bar/> FRAMEWORK
 DIRECTIVES ngFor,ngClass
  19. 19. ANGULAR 2 CORE CONCEPT2 ASSIGN EMITTER EMIT EVENT 2/2 <tab-bar/> CURRENT TAB
  20. 20. ANGULARBOOSTRAP ng.bootstrap(src.Widget)
  21. 21. 2 ANGULAR 2 CORE CONCEPTS 1. LOAD LIBRARIES 1/2 index.html
  22. 22. 2 ANGULAR 2 CORE CONCEPTS 2. Configure System.js 3. Bootstrap 2/2 4. DISPLAY <widget/> index.html
  23. 23. DEPENDENCY INJECTION
  24. 24. 2 ANGULAR 2 CORE CONCEPTS • @injectable to enable injection to services • Support multiple providers • Application level injections • Component level injections NEW DEPENDENCY INJECTION ENGINE
  25. 25. 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)  {}   }
  26. 26. 2 ANGULAR 2 CORE CONCEPTS Simple Service export  class  MyService  {      getData()  {          return  loadData.load();      }   }
  27. 27. 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
  28. 28. COMPONENT LIFECYCLE
  29. 29. 2 ANGULAR 2 CORE CONCEPTS “ Angular only calls a directive/ component hook method if it is defined. “ [docs]
  30. 30. 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
  31. 31. 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>
  32. 32. CHANGE DETECTION
  33. 33. 2 ANGULAR 2 CORE CONCEPTS Angular Application are Data Driven Data Model Components
  34. 34. 2 ANGULAR 2 CORE CONCEPTS DATA CHANGES -> VIEW UPDATES Data Model Components
  35. 35. 2 ANGULAR 2 CORE CONCEPTS CHANGE DETECTION TRAVELS TOP TO BOTTOM CD CD CD CD CDCD CD CD ChangeDetection Flow
  36. 36. 2 ANGULAR 2 CORE CONCEPTS CHANGE DETECTION IS DEFINED AT COMPONENT LEVEL
  37. 37. 2 ANGULAR 2 CORE CONCEPTS CHANGE DETECTION CAN SHOULD BE OPTIMIZED • Immutable Data • Observable • Custom BUS Systems …
  38. 38. 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
  39. 39. 2 ANGULAR 2 CORE CONCEPTS CHANGE DETECTION WITH IMMUTABLE DATA CD CD CD CD CD CD ChangeDetection Flow
  40. 40. 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
  41. 41. 2 ANGULAR 2 CORE CONCEPTS CHANGE DETECTION WITH OBSERVABLES CD CD CD CD ChangeDetection Flow
  42. 42. WHAT CAUSE CHANGE DETECTION
  43. 43. 2 ANGULAR 2 CORE CONCEPTS • setTimeout(), setInterval() • User Events (click, input change..) • XHR Requests
  44. 44. GET IN THE ZONE
  45. 45. 2 ANGULAR 2 CORE CONCEPTS ZONE.JS INTERCEPTS ALL ASYNC OPERATIONS Angular has its own NgZone to controls Change Detections
  46. 46. THANKS! MATTEO RONCHI / @cef62 FABIO BIONDI / fabiobiondi.com

×