Angular 2

1. mai 2016. Deckfila heter angular2husbanken. Angular 2 og TypeScript skulle, sa InfoQ, bringe ekte objektorientert webutvikling inn i mainstream, i en syntaks nær Java 8.

Angular 2 er en komplett omskriving av Angular 1. Slutt på kontrollere og $scope. Moderne DI. Integrert RxJS. Zones. Til forveksling likt React består en Angular 2-app av komponenter. Ulikt React er den fortsatt HTML-basert.

Forskjellen mot 1.x, i tabellen fra decket: nested scopes er borte. Direktiver er komponenter. Controller og service er ES6-klasser. Moduler er ES6-moduler. Transpiler er TypeScript.

Så en runde ES6 for salen: klasser, fat arrows, template strings, const/let, spread og rest, destructuring, moduler. Innlasting i nettleseren er den harde delen. SystemJS er polyfillen som laster modulene før nettleseren kan det selv.

TypeScript er JavaScript med types. Microsoft, åpen kildekode, maturt. Typer, klasser, interfaces, generics, annotations. Lett å lære hvis du kommer fra Java. Playground: http://www.typescriptlang.org/play/

Hello world er tre filer og en npm-rekke: angular2, rxjs, systemjs, zone.js, typescript, reflect-metadata, lite-server. boot.ts starter appen. hello-world.ts er komponenten. Templates er HTML i template literals. Render er skilt fra kjernen, så du i teorien kan rendre det samme mot NativeScript.

Databinding er enveis som default. Kode til mal: {{ name }}, [hidden], *ngIf. Mal til kode: (click), (input). Toveis er [(ngModel)] når du faktisk vil synkronisere. DI skjer i constructor. Hver komponent har en injector. Providers sier hvordan. Mangler de, sjekkes forelderen.

Direktiver: asterisk-syntaks er sukker. *ngFor skriver ut listen. Reaktiv programmering er førsteborger: UI-events, HTTP, websockets, via RxJS. Observables erstatter Promises. De åpner en kanal over tid, har setup og teardown, kan kanselleres, kan retry.

Demo: https://github.com/svenanders/angular2demo. Kurs: rangle-io/ngcourse2 på GitBook.