Angular 2 MVD workshop

ANGULAR 2 PRE-WORKSHOP

Register in Slack “Open Web Uruguay” http://owu.herokuapp.com/

Channel #jsconfuy-angular2

Channel

Requirements Run

● $ ng new music

● $ cd music

1. NodeJS >= 4.0.0

2. Angular CLI

$ npm install -g [email protected]

WHERE

Antel, Guatemala 1075, Montevideo, Uruguay

Greetings,

ONLINE

Web: https://angular2-jsconf.herokuapp.com/

ANGULAR 2JSCONF WORKSHOPwith Iran Reyes & Santiago Ferreira

@iranfleitas @san650

Speakers

@matias_delgado @vlavella19

Collaborators

@sebasrodriguez

Table of Content

1. Angular 2

2. angular-cli

3. Base template

4. Components and binding

5. Consuming data

6. Routing

7. Services

ANGULAR 2

● Framework JS by Google (back to 7 years ago)

● Closer to Web Standards

● ES5 / ES6 / Typescript / Dart

● Faster, Semantically better, Easy, ...

MUSIC

ANGULAR-CLI

GUIDELINE

● Generators (Blueprints)

● Project structure based on conventions

● Test runner

● Development server

● Addons

● Deploys and other stuff…

ANGULAR-CLI

ANGULAR-CLI

● $ npm install -g [email protected]

● $ ng new music/

● $ cd music/

● $ ng server (en otra consola)

GUIDELINE

● Generators (Blueprints)

● Project structure based on conventions

● Test runner

● Development server

● Addons

● Deploys and other stuff…

BASE TEMPLATE

BASE TEMPLATE

GUIDELINE

● Templates files (.html)

● Global stylesheets

BASE TEMPLATE

1. Copy https://s3-sa-east-1.amazonaws.com/ng-music/templates/music.html

to src/client/app/music.html

2. Add reference to https://ng-music.s3-sa-east-1.amazonaws.com/app.css

in src/client/index.html

<link href="https://ng-music.s3-sa-east-1.amazonaws.com/app.css" rel="stylesheet">

GUIDELINE

● Templates files (.html)

● Global stylesheets

COMPONENTS ANDBINDING

COMPONENTS AND BINDING

GUIDELINE

Components

● Generate components

● Include components on other components

Binding

● one-way bindings using [...] notation

● define events using (...) notation

COMPONENTS AND BINDING

<albums-page> component

1. $ ng generate component albums-page

2. Cut/paste albums-page HTML into music/src/client/app/albums-page/albums-page.html

3. Import AlbumsPage from music/src/client/app/music.ts

4. Register AlbumsPage component as a directive

5. Use <albums-page> component in music/src/client/app/music.html template

COMPONENTS AND BINDING

<album-cover> component

1. $ ng generate component album-cover

2. Cut/paste album-cover HTML into music/src/client/app/album-cover/album-cover.html

3. Import AlbumCover from music/src/client/app/albums-page/albums-page.ts

4. Register AlbumCover component as a directive

5. Use <album-cover> component in music/src/client/app/albums-page/albums-page.html

COMPONENTS AND BINDING

Binding

1. Create dummy album on music/src/client/app/album-cover/album-cover.ts

2. Use [alt]= and [src]= notation to bind attributes

3. Use {{album.artist}} to render text on screen

4. Use (click)= notation to listen to events

GUIDELINE

Components

● Generate components

● Include components on other components

Binding

● one-way bindings using [...] notation

● define events using (...) notation

CONSUMING DATA

CONSUMING DATA

● HTTP Service

● Fetch resources from external source

● Iterate over resources using *ngFor directive

● Know about input and output properties

GUIDELINE

CONSUMING DATA

Fetch all albums

1. Import and register HTTP_PROVIDERS and Http class on AlbumsPage

component

2. Fetch all albums on AlbumsPage constructor

3. Restart server to proxy HTTP requests

4. $ ng server --proxy http://em-ng-workshop.herokuapp.com/

CONSUMING DATA

Render all albums

1. Import and register NgFor directive on AlbumsPage component

import {NgFor} from 'angular2/common';

2. Iterate over all albums on AlbumsPage template

<album-cover *ngFor="#album of albums" [album]="album"></album-cover>

CONSUMING DATA

Use “album” attribute

1. Import Input decorator on AlbumCover component

import {Input,Component} from 'angular2/core';

2. Decorate album property

@Input() album: any;

3. Remove dummy album definition

● HTTP Service

● Fetch resources from external source

● Iterate over resources using *ngFor directive

● Know about input and output properties

GUIDELINE

ROUTING

ROUTING

● @RouteConfig

● <router-outlet>

● [router-link]

GUIDELINE

ROUTING

<tracks-page> component

1. $ ng generate component tracks-page

2. copy https://s3-sa-east-1.amazonaws.com/ng-music/templates/album.html to

music/src/client/app/tracks-page/tracks-page.html

3. Import TracksPage from music/src/client/app/music.ts

4. Remove <albums-page /> component from music/src/client/app/music.html

template

ROUTING

@RouteConfig

1. Register in music/src/app/music.ts components in @RouteConfig

{ path: '/', component: AlbumsPage, name: 'AlbumsPage' },

{ path: '/:id', component: TracksPage, name: 'TracksPage' }

ROUTING

Link to go to /:id

1. Import and register routerLink directive on AlbumCover

import {RouterLink} from 'angular2/router';

2. Update AlbumCover template to add a link to TracksPage

<a [routerLink]="['TracksPage', { id: album.id }]">

3. Remove unneeded (click) event handler

ROUTING

Link to go back to /

1. Update Music template to add a link to AlbumsPage

<a [routerLink]="['AlbumsPage']" class="...">

<span>Albums</span>

</a>

● @RouteConfig

● <router-outlet>

● [router-link]

GUIDELINE

SERVICES

SERVICES

● Application-wide state

● Data store

GUIDELINE

SERVICES

1. $ ng generate service albums-service

1. Move /api/albums query to Albums service

2. Import Http from albums-service/albums-service.ts

3. Also import map: import 'rxjs/add/operator/map';

4. Create a method call getAllAlbums and return the albums

SERVICES

1. Import AlbumsService from albums-page/albums-page.ts

2. Add AlbumsService to the providers in AlbumsPage

3. Inject AlbumsService to the constructor of AlbumsPage

4. Subscribe from AlbumsService for changes

5. Add HTTP_PROVIDERS to music.ts

● Application-wide state

● Data store

GUIDELINE

QUESTIONS?