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 angular-cli@0.0.30

WHERE
Antel, Guatemala 1075,
Montevideo, Uruguay
Greetings,
ONLINE
Web: https://angular2-jsconf.herokuapp.com/
ANGULAR 2
JSCONF WORKSHOP
with Iran Reyes & Santiago Ferreira

@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, ...

GUIDELINE
● Generators (Blueprints)
● Project structure based on conventions
● Test runner
● Development server
● Addons
● Deploys and other stuff…

ANGULAR-CLI
● $ npm install -g angular-cli@0.0.30
● $ ng new music/
● $ cd music/
● $ ng server (en otra consola)

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
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

<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

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

● 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

● @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>

● 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

Angular 2 MVD workshop

More Related Content

Viewers also liked (16)

Similar to Angular 2 MVD workshop (20)

Recently uploaded (20)

Angular 2 MVD workshop