How to build an Angular 2 application with routing and services

The application

index.html
/app
/components
/search
search.ts
/artist
artist.ts
app.ts /services
spotify.ts
/utils
fetch.ts
bootstrap.ts
/typings
/angular2
angular2.d.ts
router.d.ts
/rx
rx.d.ts
/es6-promise
es6-promise.d.ts
_custom.d.ts

Building the application

npm install tsd -g
tsd install angular2/angular2 angular2/router rx es6-promise

Traceur is a JavaScript.next-to-JavaScript-of-today compiler that allows you to use features from the future today.

Universal dynamic module loader — loads ES6 modules, AMD, CommonJS and global scripts in the browser and NodeJS. Works with both Traceur and Babel.

<app></app>
System.config({
baseURL: ‘/app’
});

System.import(‘bootstrap’);
/// <reference path=”../../../typings/_custom.d.ts” />
import { Component, View } from ‘angular2/angular2’;
import { RouteConfig, RouterLink, RouterOutlet } from ‘angular2/router’;
import { Search } from ‘../components/search/search’;
import { Artist } from ‘../components/artist/artist’;
@Component({ selector: ‘app’})
@View({
directives: [RouterLink, RouterOutlet],
template: `
<header>
<nav>
<ul>
<li>
<a [router-link]=”[‘/search’]”>Search</a>
</li>
</ul>
</nav>
</header>

<main>
<h1>{{title}}</h1>
<router-outlet></router-outlet>
</main>
`
})
@RouteConfig([
{ path: ‘/’, redirectTo: ‘/search’ },
{ path: ‘/search’, as: ‘search’, component: Search },
{ path: ‘/artist/:id’, as: ‘artist’, component: Artist }
])
export class App {
title: string;
constructor() {
this.title = ‘App title’;
}
}
@Component({
selector: ‘search’,
viewInjector: [Spotify]
})
<input #searchvalue (keyup)=”searchArtist($event, searchvalue.value)”/>
<li *ng-for=”#artist of artists”>
<a [router-link]=”[‘/artist’, {id: artist.id}]”>
service: Spotify; 
constructor(service: Spotify) {
this.service = service;
}
searchArtist($event, value) { 
if (!value) { return; }
if (this.timeoutId) clearTimeout(this.timeoutId);
this.timeoutId = setTimeout(() => {
this.service.searchArtist(value)
.then(status)
.then(json)
.then((response) => {
this.setResults(response.artists.items);
})
}, 250);
}
setResults(artists: Array<Object>) { 
this.artists = artists;
}
import { RouterLink, RouteParams } from ‘angular2/router’;
routeParam: RouteParams; 
image: string;
constructor(service: Spotify, routeParam: RouteParams) {
this.service = service;
this.routeParam = routeParam;
this.getArtist();
}
getArtist() { 
this.service.getArtistById(this.routeParam.params.id)
.then(status)
.then(json)
.then((response) => {
this.artist = response;
this.image = response.images[0].url;
})
}
var universalInjectables = [
routerInjectables,
Spotify,
bind(LocationStrategy).toClass(HashLocationStrategy)
];
bootstrap(App, [universalInjectables]);
tsc — watch -m commonjs -t es5 — emitDecoratorMetadata app/bootstrap.ts
http-server

 by the author.

--

--

CTO at Passionate People https://passionatepeople.io/

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store