HTTP and Routing in Angular2 (Part 5 of 5)

Let's learn Angular 2 by an Examples and not spending much time in theory's. We will cover the best practical and ready to use Angular 2 Examples.

You can find some other posts of this series below:

Component in Angular2 (Part 1 of 5)
Directive and Pipes in Angular2 (Part 2 of 5)
Forms and Pipes in Angular2 (Part 3 of 5)
Dependency Injection in Angular2 (Part 4 of 5)
HTTP and Routing in Angular2 (Part 5 of 5)

All example are based on Angular2 RC 1

HTTP and Routing - Get in HTTP

• my-service.service.ts
• product.ts
• products.json
• t4.component.ts
• t4.component.html

	import { Injectable } from '@angular/core';
	import { IProduct } from './product';
	import { Http, Response } from '@angular/http';
	import { Observable } from 'rxjs/Observable';
	@Injectable()
	export class MyServiceService {
	private productUrl = '/app/products.json';
	constructor(private http: Http) {}
	getProduct(): Observable<IProduct[]> {
	return this.http.get(this.productUrl)
	.map((response: Response) => <IProduct[]>response.json())
	.do(data => console.log("All: " + JSON.stringify(data)))
	.catch(this.handleError);
	}
	private handleError(error: Response) {
	console.error(error);
	return Observable.throw(error.json().error || 'Server error');
	}
	}

view raw my-service.service.ts hosted with ❤ by GitHub

	export interface IProduct{
	productId: number;
	productName: string;
	}

view raw product.ts hosted with ❤ by GitHub

	import { Component, OnInit } from '@angular/core';
	import { IProduct } from './product';
	import { MyServiceService } from './my-service.service';
	import { HTTP_PROVIDERS } from '@angular/http';
	import 'rxjs/Rx';
	@Component({
	moduleId: module.id,
	selector: 't4-app',
	templateUrl: 't4.component.html',
	styleUrls: ['t4.component.css'],
	providers: [MyServiceService,
	HTTP_PROVIDERS]
	})
	export class T4AppComponent implements OnInit {
	title : IProduct[];
	errorMessage: string;
	constructor(private myServiceService : MyServiceService){
	}
	ngOnInit(): void {
	this.myServiceService.getProduct()
	.subscribe(
	title => this.title = title,
	error => this.errorMessage = <any>error
	);
	}
	}

view raw t4.component.ts hosted with ❤ by GitHub

	<h1>
	{{title | json}}
	</h1>

view raw t4.component.html hosted with ❤ by GitHub

HTTP and Routing - Basic Routing

• main.ts
• t3.component.ts
• t3.component.html

	import { bootstrap } from '@angular/platform-browser-dynamic';
	import { enableProdMode, provide } from '@angular/core';
	import { T3AppComponent, environment } from './app/';
	import { ROUTER_PROVIDERS } from '@angular/router';
	if (environment.production) {
	enableProdMode();
	}
	bootstrap(T3AppComponent,[
	ROUTER_PROVIDERS
	]);

view raw main.ts hosted with ❤ by GitHub

	import { Component, Inject, OnInit } from '@angular/core';
	import { Path1Component } from './path1/path1.component'
	import { Path2Component } from './path2/path2.component'
	import { ROUTER_DIRECTIVES, Routes, Router } from '@angular/router';
	@Component({
	moduleId: module.id,
	selector: 't3-app',
	templateUrl: 't3.component.html',
	styleUrls: ['t3.component.css'],
	directives: [ROUTER_DIRECTIVES]
	})
	@Routes([
	{path:'/path1', component: Path1Component},
	{path:'/path2', component: Path2Component}
	])
	export class T3AppComponent implements OnInit{
	ngOnInit(){
	//this.router.navigate(['/path1']);
	}
	}

view raw t3.component.ts hosted with ❤ by GitHub

	<nav>
	<a [routerLink]="['/path1']">Page 1</a>
	<a [routerLink]="['/path2']">Page 2</a>
	</nav>
	<router-outlet></router-outlet>

view raw t3.component.html hosted with ❤ by GitHub