Workshop where is shown how to do a demo with Angular 2

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

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

3. @iranfleitas @san650
Speakers

4. @matias_delgado @vlavella19
Collaborators
@sebasrodriguez

7. Table of Content
1. Angular 2
2. angular-cli
3. Base template
4. Components and binding
5. Consuming data
6. Routing
7. Services

8. ANGULAR 2
● Framework JS by Google (back to 7 years ago)
● Closer to Web Standards
● ES5 / ES6 / Typescript / Dart
● Faster, Semantically better, Easy, ...

9. MUSIC

10. ANGULAR-CLI

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

12. ANGULAR-CLI

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

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

15. BASE TEMPLATE

16. BASE TEMPLATE

17. GUIDELINE
● Templates files (.html)
● Global stylesheets

18. 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">

19. GUIDELINE
● Templates files (.html)
● Global stylesheets

20. COMPONENTS AND
BINDING

21. COMPONENTS AND BINDING

22. GUIDELINE
Components
● Generate components
● Include components on other components
Binding
● one-way bindings using [...] notation
● define events using (...) notation

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

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

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

26. GUIDELINE
Components
● Generate components
● Include components on other components
Binding
● one-way bindings using [...] notation
● define events using (...) notation

27. CONSUMING DATA

28. CONSUMING DATA

29. ● HTTP Service
● Fetch resources from external source
● Iterate over resources using *ngFor directive
● Know about input and output properties
GUIDELINE

30. 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/

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

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

33. ● HTTP Service
● Fetch resources from external source
● Iterate over resources using *ngFor directive
● Know about input and output properties
GUIDELINE

34. ROUTING

35. ROUTING

36. ● @RouteConfig
● <router-outlet>
● [router-link]
GUIDELINE

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

38. ROUTING
@RouteConfig
1. Register in music/src/app/music.ts components in @RouteConfig
{ path: '/', component: AlbumsPage, name: 'AlbumsPage' },
{ path: '/:id', component: TracksPage, name: 'TracksPage' }

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

40. ROUTING
Link to go back to /
1. Update Music template to add a link to AlbumsPage
<a [routerLink]="['AlbumsPage']" class="...">
<span>Albums</span>
</a>

41. ● @RouteConfig
● <router-outlet>
● [router-link]
GUIDELINE

42. SERVICES

43. SERVICES

44. ● Application-wide state
● Data store
GUIDELINE

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

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

47. ● Application-wide state
● Data store
GUIDELINE

48. QUESTIONS?