Last time I wrote a blog created the MovieAPI and now I am using that API as back end services to create an angular 2 app.
the final source code could find at my github repository. here is the link download
For the MovieAPI open it, build it will install the packages automatically, then run the service first.
After the service is done, go to the angular2 folder, open command window
–run npm install,
— npm start
It will look like this:
Step 1 : Setting up your angular 2 application, I already have a blog click here to found it. Or also could download from the source file from https://github.com/angular/quickstart/blob/master/README.md but it add a lot of unnecessary setting, probably confuse for beginning learner.
It was better do few times manually setting it up to get understand all of the necessary for start anguar 2 application.
Step 2: In angualr 2 everything is component, for me normally like to create the service first. I just create a file named movies.service.ts under folder movies
import {Injectable} from 'angular2/core';
import {IMovie} from './movie';
import {Http, RequestOptions , Response, Headers} from 'angular2/http';
import {Observable} from 'rxjs/Observable';
@Injectable()
export class MovieService {
private _movieUrl = 'http://localhost:53871/api/movies';
constructor(private _http: Http) { }
getMovies(): Observable<IMovie[]> {
return this._http.get(this._movieUrl)
.map((response: Response) => <IMovie[]>response.json()) //arrow function, tranceform response to json object and is array of IMovie[]
.do(data => console.log("All: " + JSON.stringify(data))) //for debug
.catch(this.handleError);
}
createMovie(movie: IMovie): Observable {
let body = JSON.stringify(movie);
let headers = new Headers({ 'Content-Type': 'application/json' });
let options = new RequestOptions({ headers: headers });
return this._http.post(this._movieUrl, body, options)
.map(this.extractData)
.catch(this.handleError);
}
private extractData(res: Response) {
let body = res.json();
return body.data || {};
}
private handleError(error: Response) {
console.error(error);
return Observable.throw(error.json().error || 'Server error');
}
}
In there MovieService I have a IMovie here is my movie.ts I put it in the same folder with MovieService .
//interface won't compile to js file, it just for typescript do type checking
export interface IMovie {
movieId: number;
title: string;
genre: string;
classification: string;
releaseDate: number;
rating: number;
cast: string[];
}
export class Movie implements IMovie {
movieId: number;
title: string;
genre: string;
classification: string;
releaseDate: number;
rating: number;
cast: string[];
}
Step 3: Inject the services.
Go to the app.component.ts this is our container component, for anguar 2 only need inject once, then all of the nest container could using it ( by import it ).
Inject a service has two steps:
1) import the file into the app.component,
2) Inject it as providers
here is my app.component.ts
Step 4: Create the movies-list.component.ts
//for using component, simply import it into this file
import {Component, OnInit} from 'angular2/core';
import { ROUTER_DIRECTIVES } from 'angular2/router';
import {IMovie} from './movie';
import {MovieService} from './movies.service';
import {MovieFilterPipe} from './movie-filter.pipe';
import { StarComponent } from '../shared/star.component';
@Component({
selector: 'sz-movies',
templateUrl: 'app/movies/movies-list.component.html',
styleUrls: ['app/movies/movies-list.component.css'],
pipes: [MovieFilterPipe],
directives: [StarComponent, ROUTER_DIRECTIVES]
})
export class MovieListComponent implements OnInit {
pageTitle: string = 'Movie List';
listFilter: string;
errorMessage: string;
movies: IMovie[];
constructor(private _movieService: MovieService) {
}
ngOnInit(): void {
this._movieService.getMovies()
.subscribe(
movies => this.movies = movies,
error => this.errorMessage = error);
}
}
here is the movies-list.component.html
for this component I have a nested StarComponent.
Setp 5: create nested StarComponent, here is the star.component.ts under the share folder
import { Component, OnInit, Input} from 'angular2/core';
@Component({
selector: 'sz-star',
templateUrl: 'app/shared/star.component.html',
styleUrls: ['app/shared/star.component.css']
})
export class StarComponent implements OnInit {
@Input() rating: number;
starWidth: number;
ngOnInit(): void {
this.starWidth = this.rating * 86 / 5;
}
}
star.component.html
css:
In angular 2: data flow is unidirectional, for passing data from view to the class
first: you passing data into the directive could bind it to the property
Second: need import the Input from angular2/core, and bind it to the property
Now, one nested movies-list.component and nested star.componet down.
Now using the same steps create the MovieCreateComponent
import {Component, OnInit} from 'angular2/core';
import {IMovie, Movie} from '../movie';
import {Router} from 'angular2/router';
import {MovieService} from '../movies.service';
@Component({
templateUrl: 'app/movies/create/movie-create.component.html'
})
export class MovieCreateComponent implements OnInit {
title: string = 'Create New Movie';
newMovie: IMovie;
constructor(
private _moviesService: MovieService,
private _router: Router
) { }
ngOnInit() {
this.newMovie = new Movie;
}
createMovie(event) {
let _this = this;
this._moviesService.createMovie(this.newMovie)
.subscribe(function () {
_this._router.navigate(['Movies']);
});
}
cancelCreate(event) {
this._router.navigate(['Movies']);
}
}
Router:
In the index.html page, put the baseurl:
Done, have fun!
for allmovies: 
more detail about odata query:
http://www.odata.org/documentation/odata-version-2-0/uri-conventions/
Sandy | Full stack Web developer 