Upload
iran-reyes-fleitas
View
181
Download
0
Embed Size (px)
Citation preview
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
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 [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
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
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
● 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
<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>
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