Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

Angular 2 - Core Concepts

9.899 visualizaciones

Publicado el

A quick overview about Angular 2 Components, DI, Lifecycle and Change Detection.
Interactive slides: http://slides.fabiobiondi.com/angular2-core-concepts
Plunkr: http://plnkr.co/edit/vllrTYuOo6VJE7vMPEfQ?p=preview

Publicado en: Software
  • Inicia sesión para ver los comentarios

Angular 2 - Core Concepts

  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
  22. 22. 2 ANGULAR 2 CORE CONCEPTS 2. Configure System.js 3. Bootstrap 2/2 4. DISPLAY <widget/>
  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

×