Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

2016 First steps with Angular 2 – enterjs

557 views

Published on

Michaela gives an overview of the Framework Angular 2 for JavaScript developers. She covers components, data binding, templating syntax, services, dependency injection and pipes. Examples are based on ES5 and TypeScript.

(Original Title: Erste Schritte mit Angular 2)

Published in: Technology
  • Be the first to comment

2016 First steps with Angular 2 – enterjs

  1. 1. geildanke.com @fischaelameer Erste Schritte mit Angular 2
  2. 2. geildanke.com @fischaelameer
  3. 3. geildanke.com @fischaelameer Components Data-Binding Template-Syntax Services Dependency Injection Pipes …
  4. 4. geildanke.com @fischaelameer Quelle: https://twitter.com/esfand/status/703678692661338115
  5. 5. geildanke.com @fischaelameer Quelle: https://www.w3counter.com/globalstats.php?year=2009&month=7
  6. 6. geildanke.com @fischaelameer Quelle: https://www.w3counter.com/globalstats.php?year=2009&month=7
  7. 7. geildanke.com @fischaelameer ES2015 JavaScript Modules Web Components (Shadow DOM, Templates)
  8. 8. geildanke.com @fischaelameer Angular is a development platform for building mobile and desktop web applications.
  9. 9. geildanke.com @fischaelameer Platform-unabhängig Browser Web-Worker Native Apps Server-side Rendering
  10. 10. geildanke.com @fischaelameer JavaScript TypeScript Dart Sprachen-Unabhängig
  11. 11. geildanke.com @fischaelameer ES5 ES2015 TypeScript
  12. 12. geildanke.com @fischaelameer Paradigma-Unabhängigkeit Testbarkeit Performance
  13. 13. geildanke.com @fischaelameer Angular apps are modular.
  14. 14. geildanke.com @fischaelameer import { AppComponent } from './app.component'; app.component.ts: @Component(...) export class AppComponent { … } app.another-component.ts:
  15. 15. geildanke.com @fischaelameer A Component controls a patch of screen real estate that we could call a view.
  16. 16. geildanke.com @fischaelameer Component View Metadata
  17. 17. geildanke.com @fischaelameer Component View Metadata import { Component } from '@angular/core'; @Component({ selector: 'enterjs-app', template: '<h1>Hello EnterJS</h1>' }) export class EnterjsAppComponent { … }
  18. 18. geildanke.com @fischaelameer @Component({ selector: 'enterjs-app', template: '<h1>Hello EnterJS</h1>' }) export class EnterjsAppComponent { … } Decorators
  19. 19. geildanke.com @fischaelameer @Component({ selector: 'enterjs-app', template: '<h1>Hello EnterJS</h1>' }) export class EnterjsAppComponent { … } var EnterjsAppComponent = ng.core .Component({ selector: 'enterjs-app', template: '<h1>Hello EnterJS</h1>' }) .Class({ constructor: function () { … } }); TypeScript ES5
  20. 20. geildanke.com @fischaelameer @Component({ selector: 'enterjs-app', templateUrl: 'enterjs.component.html', styleUrls: [ 'enterjs.component.css' ] })
  21. 21. geildanke.com @fischaelameer Parent Component Child Components
  22. 22. geildanke.com @fischaelameer Component View Metadata Component View Metadata Component View Metadata Component View Metadata Component View Metadata
  23. 23. geildanke.com @fischaelameer import { Component } from 'angular2/core'; @Component({ selector: 'talk-cmp', templateUrl: './talk.component.html' }) export class TalkComponent { … } import { Component } from '@angular/core'; import { TalkComponent } from './talk.component'; @Component({ selector: 'enterjs-app', template: '<talk-cmp></talk-cmp>', directives: [ TalkComponent ] }) export class EnterjsAppComponent { … } Parent Child
  24. 24. geildanke.com @fischaelameer Data binding is a mechanism for coordinating what users see with application data values.
  25. 25. geildanke.com @fischaelameer <p>{{ talk.title }}</p> <p [textContent]="talk.title"></p> Component View Metadata
  26. 26. geildanke.com @fischaelameer <img [attr.src]="imageSource"> <p [class.hidden]="isHidden"></p> <p [style.color]="currentColor"></p> Property Bindings
  27. 27. geildanke.com @fischaelameer Component View Metadata Interpolation Property BindingsEvent Bindings
  28. 28. geildanke.com @fischaelameer <button (click)="onDelete()">Delete</button> <talk-cmp (talkDeleted)="deleteTalk()"></talk-cpm> Event Binding
  29. 29. geildanke.com @fischaelameer Component View Metadata Interpolation Property Binding Event Binding @Output @Input [(ngModel)]
  30. 30. geildanke.com @fischaelameer <input [(ngModel)]="talk.name"/> <p>{{ talk.name }}</p> <input [ngModel]="talk.name" (ngModelChange)="talk.name = $event"> Two-Way Data-Binding
  31. 31. geildanke.com @fischaelameer Templates display data and consume user events with the help of data binding.
  32. 32. geildanke.com @fischaelameer ngStyle ngClass ngFor ngIf ngSwitch
  33. 33. geildanke.com @fischaelameer <p [style.color]="currentColor">Hello!</p> <p [ngStyle]="{ fontWeight: 900, color: currentColor }">Big Hello!</p> <p [ngStyle]="setStyles()">Bigger Hello!</p> NgStyle
  34. 34. geildanke.com @fischaelameer <p [class.hidden]="isHidden">Hello?</p> <p [ngClass]="{ active: isActive, hidden: isHidden }">Hello??</p> <p [ngClass]="setClasses()">Hello???</p> NgClass
  35. 35. geildanke.com @fischaelameer <p *ngFor="let talk of talks">{{ talk.name }}</p> <talk-cmp *ngFor="let talk of talks"></talk-cmp> NgFor <talk-cmp *ngFor="let talk of talks; let i=index" (talkDeleted)="deleteTalk(talk, i)"></talk-cmp>
  36. 36. geildanke.com @fischaelameer <h2 *ngIf="talks.length > 0"><Talks:</h2> NgIf <h2 [style.display]="hasTalks ? 'block' : 'none'">Talks:</h2>
  37. 37. geildanke.com @fischaelameer <div [ngSwitch]="talksCount"> <h2 *ngSwitchWhen="0">No talks available.</h2> <h2 *ngSwitchWhen="1">Talk:</h2> <h2 *ngSwitchDefault>Talks:</h2> </div> NgSwitch
  38. 38. geildanke.com @fischaelameer <input #talk placeholder="Add a talk"> <button (click)="addTalk(talk.value)">Add talk</button> Template Reference Variables
  39. 39. geildanke.com @fischaelameer A service is typically a class with a narrow, well-defined purpose.
  40. 40. geildanke.com @fischaelameer export class TalkService { private talks : String[] = []; getTalks() { … } setTalk( talk : String ) { … } } talk.service.ts:
  41. 41. geildanke.com @fischaelameer Angular's dependency injection system creates and delivers dependent services "just-in-time".
  42. 42. geildanke.com @fischaelameer EnterjsAppComponent YetAnotherServiceAnotherServiceTalkService Injector
  43. 43. geildanke.com @fischaelameer import { Component } from '@angular/core'; import { TalkService } from './bookmark.service'; @Component({ selector: 'enterjs-app', templateUrl: 'enterjs.component.html', providers: [ TalkService ] }) export class EnterjsAppComponent { constructor( private talkService : TalkService ) {} … }
  44. 44. geildanke.com @fischaelameer Root Injector Injector InjectorInjector Injector Injector Injector Injector
  45. 45. geildanke.com @fischaelameer import { Injectable } from 'angular2/core'; import { Http } from 'angular2/http'; @Injectable() export class TalkService { constructor( private http: Http ) {} … } talk.service.ts:
  46. 46. geildanke.com @fischaelameer Components Data-Binding Template-Syntax Services Dependency Injection Pipes …
  47. 47. geildanke.com @fischaelameer Pipes transform displayed values within a template.
  48. 48. geildanke.com @fischaelameer <p>{{ 'Hello EnterJS' | uppercase }}</p> <!--> 'HELLO ENTERJS' </!--> <p>{{ 'Hello EnterJS' | lowercase }}</p> <!--> 'hello enterjs' </!--> UpperCasePipe, LowerCasePipe
  49. 49. geildanke.com @fischaelameer <p>{{ talkDate | date:'ddMMyyyy' }}</p> <!--> '15.06.2016' </!--> <p>{{ talkDate | date:'longDate' }}</p> <!--> '15. Juni 2016' </!--> <p>{{ talkDate | date:'HHmm' }}</p> <!--> '12:30' </!--> <p>{{ talkDate | date:'shortTime' }}</p> <!--> '12:30 Uhr' </!--> DatePipe
  50. 50. geildanke.com @fischaelameer <p>{{ talkDate | date:'ddMMyyyy' }}</p> <p>{{ talkDate | date:'dd-MM-yyyy' }}</p> <p>{{ talkDate | date:'MM-dd-yyyy' }}</p> <p>15.06.2016</p> de-de <p>06/15/2016</p> en-us
  51. 51. geildanke.com @fischaelameer <p>{{ 11.38 | currency:'EUR' }}</p> <!--> 'EUR11.38' </!--> <p>{{ 11.38 | currency:'USD' }}</p> <!--> '$11.38' </!--> <p>{{ 0.11 | percent }}</p> <!--> '11%' </!--> <p>{{ 0.38 | percent:'.2' }}</p> <!--> '38.00%' </!--> CurrencyPipe, PercentPipe
  52. 52. geildanke.com @fischaelameer <p>{{ 'EnterJS' | slice:0:5 }}</p> <!--> 'Enter' </!--> <p>{{ talks | slice:0:1 | json }}</p> <!--> [ { "name": "TalkName1" } ] </!--> <p>{{ 1138 | number }}</p> <!--> '1.138' </!--> <p>{{ 1138 | number:'.2' }}</p> <!--> '1.138.00' </!--> NumberPipe, SlicePipe
  53. 53. geildanke.com @fischaelameer <p>{{ talks }}</p> <!--> [object Object] </!--> <p>{{ talks | json }}</p> <!--> [ { "name": "TalkName1" },{ "name": "TalkName2" } ] </!--> <p>{{ talks | slice:0:1 | json }}</p> <!--> [ { "name": "TalkName1" } ] </!--> JsonPipe
  54. 54. geildanke.com @fischaelameer import { Component } from 'angular2/core'; @Component({ selector: 'talk-cmp', template: '<p>{{ asyncTalk | async }}</p>' }) export class TalkComponent { asyncTalk: Promise<string> = new Promise( resolve => { window.setTimeout( () => resolve( 'No Talks' ), 1000 ); }); } AsyncPipe
  55. 55. geildanke.com @fischaelameer !
  56. 56. geildanke.com @fischaelameer import { PipeTransform, Pipe } from 'angular2/core'; @Pipe({name: 'ellipsis'}) export class EllipsisPipe implements PipeTransform { transform( value ) { return value.substring( 0, 10 ) + '…'; } } CustomPipe
  57. 57. geildanke.com @fischaelameer Angular looks for changes to data-bound values through a change detection process that runs after every JavaScript event.
  58. 58. geildanke.com @fischaelameer Quelle: https://docs.google.com/presentation/d/1GII-DABSG5D7Yhik4Be5RvL6IXPt-Kg8lXFLnxkhKsU
  59. 59. geildanke.com @fischaelameer An Angular form coordinates a set of data-bound user controls, tracks changes, validates input, and presents errors.
  60. 60. geildanke.com @fischaelameer Forms Template-Driven Forms Model-Driven Forms
  61. 61. geildanke.com @fischaelameer Angular has the ability to bundle component styles with components enabling a more modular design than regular stylesheets.
  62. 62. geildanke.com @fischaelameer View Encapsulation Native Emulated None
  63. 63. geildanke.com @fischaelameer Unit-Tests E2E-Tests Http-Modul Router-Modul
  64. 64. geildanke.com @fischaelameer michaela.lehr@geildanke.com https://geildanke.com/ng2comet @fischaelameer

×