Angular2The grand introduction

Filip Bruun Bech-LarsenFrontend Manager at IMPACT@filipbech

Filip

Why 2.0?• Nyt framework med breaking changes…

• Lært af 1.x

• Moderne kode, typer

• Performance

• Fleksibelt

• Platforme

Hvad er så nyt

• alt

Ej seriøst

• Tænk på det som et nyt framework.

The good• Skalerbart Javascript MVC

• Typer

• Classer

• Hierakisk

• Explicit

The bad

• Kompleksitet

• ikke oplagt udenfor SPA-kontekst

Moderne Apps

• Components, components, components

Et træ af komponentermy-app

app-navigationcontact-list

contact-item

toggle-favorite

contact-item

toggle-favorite

contact-item

toggle-favorite

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.

Kommunikation

• Data flyder nedad

• Events går opad

Vigtige koncepter

• Classes

• Imports / exports (systemjs)

• Decorators

• Types

OBS: Systemjs

obs: ingen semikolon

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.

Angular• Components

• Dependency injection

• ngModules

• Services

• Routing

• Forms

• Directives

• Pipes

lets give it a try…

and now you do it…

Dagens opgave

• Byg en Angular2 app

Step 1

• quickstart

• liste component

• data fra service

• “hent flere” - paginering

OBS: Http er en observable

Step 2

• tilføj routing

• lav liste-side og detalje-side

Step 3

• Edit-side

• Lav favorit-liste

Forplejning

• Sodavand, øl, snacks undervejs

• Sandwiches ved 18.30tiden

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

Cheatsheet

https://github.com/filipbech/starsOfStarwars

Tutors

• Vi er nogen stykker der har arbejdet med Angular2 før og som kan svare på (nogen) spørgsmål. Brug det…

quickstart

• clone angular/quickstart repo (https://github.com/angular/quickstart/)

• cd quickstart

• npm install

• npm start

Fun open APIs• swapi.co

• wine.com

• brewerydb.com

• developer.marvel.com

• pokeapi.co

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

Forms

• Templatedriven (som vi kender det fra ng1 -Ng*)

• Modeldriven (validering mm i controlleren - Form*)

• (kig i cheatsheetet)

• Tak for idag