![Routing
• Routeren indsætter en component. Den injecter router-
instancen og subscriber til observablen for at få
routeParams.
• <router-outlet></router-outlet>
• <a [routerLink]=“[‘/characters']">Characters</a>
• RouteConfig leveres som et custom ModuleWithProviders
som import til rootModulet (kig i cheatsheetet)
• Guards: CanActivate, CanDeactivate, Resolve](https://image.slidesharecdn.com/angular2-workshop-160912060928/85/Angular2-workshop-37-320.jpg)
Angular2 workshop
- 1. Angular2 The grand introduction Filip Bruun Bech-Larsen Frontend Manager at IMPACT @filipbech
- 2. Filip
- 5. Why 2.0? • Nyt framework med breaking changes… • Lært af 1.x • Moderne kode, typer • Performance • Fleksibelt • Platforme
- 6. Hvad er så nyt • alt
- 7. Ej seriøst • Tænk på det som et nyt framework.
- 8. The good • Skalerbart Javascript MVC • Typer • Classer • Hierakisk • Explicit
- 9. The bad • Kompleksitet • ikke oplagt udenfor SPA-kontekst
- 10. Moderne Apps • Components, components, components
- 11. Et træ af komponenter my-app app-navigationcontact-list contact-item toggle-favorite contact-item toggle-favorite contact-item toggle-favorite
- 13. Dumb vs smart • Dumb (eller stateless) komponenter er ikke kontekst-specifikke. Modtager data fra parent og kommunikerer med events. Har ingen dependencies. • Smart (eller stateful) komponenter er ofte kontekst- specifikke. Interagerer med services og lytter efter events fra child-components.
- 14. Kommunikation • Data flyder nedad • Events går opad
- 15. Vigtige koncepter • Classes • Imports / exports (systemjs) • Decorators • Types
- 17. OBS: Systemjs
- 21. Typescript • Typescript giver dig hjælp undervejs. (brug en editor der understøtter typescript) • Typescript sørger for at alt det nye og smarte blir til alm. javascript som din browser kan forstå. • Compileren kan overvåge dine filer og automatisk compile hver gang du gemmer.
- 23. Angular • Components • Dependency injection • ngModules • Services • Routing • Forms • Directives • Pipes
- 24. lets give it a try…
- 26. and now you do it…
- 27. Dagens opgave • Byg en Angular2 app
- 28. Step 1 • quickstart • liste component • data fra service • “hent flere” - paginering OBS: Http er en observable
- 29. Step 2 • tilføj routing • lav liste-side og detalje-side
- 30. Step 3 • Edit-side • Lav favorit-liste
- 31. Forplejning • Sodavand, øl, snacks undervejs • Sandwiches ved 18.30tiden
- 32. og til de hurtige/øvede/dygtige • Persist service-data • Scoped styling med viewEncapsulation • Lav et directive • Experimenter med ChangeDetectionStrategy • Byg json-parser til ?format=wookiee • Interaktive lister med firebase • Lav en produktions-bundle • Server-rendering med Angular Universal • Lav app’en mobil med nativescript eller React Native
- 34. Tutors • Vi er nogen stykker der har arbejdet med Angular2 før og som kan svare på (nogen) spørgsmål. Brug det…
- 35. quickstart • clone angular/quickstart repo (https://github.com/angular/quickstart/) • cd quickstart • npm install • npm start
- 36. Fun open APIs • swapi.co • wine.com • brewerydb.com • developer.marvel.com • pokeapi.co
- 37. Routing • Routeren indsætter en component. Den injecter router- instancen og subscriber til observablen for at få routeParams. • <router-outlet></router-outlet> • <a [routerLink]=“[‘/characters']">Characters</a> • RouteConfig leveres som et custom ModuleWithProviders som import til rootModulet (kig i cheatsheetet) • Guards: CanActivate, CanDeactivate, Resolve
- 38. Forms • Templatedriven (som vi kender det fra ng1 -Ng*) • Modeldriven (validering mm i controlleren - Form*) • (kig i cheatsheetet)
- 39. • Tak for idag