Successfully reported this slideshow.

2016 First steps with Angular 2 – enterjs

2

Share

Loading in …3
×
1 of 64
1 of 64

2016 First steps with Angular 2 – enterjs

2

Share

Download to read offline

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)

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)

More Related Content

Related Books

Free with a 14 day trial from Scribd

See all

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

×