[Angular2] Services

Requirement
It's very common that multiple components may need access to the same code and we don't want to copy and paste the same code over and over. 
Therefore, we need create a single reusable data service and inject it in the components that need it.

How-To

(1) Create a service class looks like:

1 2 3 4 5 6 7 8 9

import { Injectable } from '@angular/core'; import { Http, Response, Headers } from '@angular/http'; import { Observable } from 'rxjs/Observable'; @Injectable() export class ProjectService { constructor(private http: Http) { } }

(2) Import, register and initialize the service class in component class

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

import { Component, Pipe, PipeTransform } from '@angular/core'; import { CORE_DIRECTIVES } from '@angular/common'; import { TAB_DIRECTIVES } from 'ng2-bootstrap/ng2-bootstrap'; import { Router } from '@angular/router'; // import ProjectService import { ProjectService } from './project.service'; import { MODAL_DIRECTIVES, ModalComponent } from 'ng2-bs3-modal/ng2-bs3-modal'; import { PAGINATION_DIRECTIVES } from 'ng2-bootstrap/ng2-bootstrap'; import { StatusPipe } from './project.pipe'; @Component({ selector: 'project-list', templateUrl: 'project.list.html', directives: [MODAL_DIRECTIVES, PAGINATION_DIRECTIVES], providers: [ProjectService], // register ProjectService to providers pipes: [StatusPipe] }) export class ProjectComponent { // initialize ProjectService in constructor constructor(private projectService: ProjectService) { } }

(3) If I add a search method in ProjectService:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

import { Injectable } from '@angular/core'; import { Http, Response, Headers } from '@angular/http'; import { Observable } from 'rxjs/Observable'; @Injectable() export class ProjectService { constructor(private http: Http) { } search(searchProject: Project, page: number) { let name: string = searchProject.name; let status: number = searchProject.status; return this.http.get('/api/projects/search?name=' + name + '&status=' + status + '&page=' + page) .map(res => <Page<Project>>res.json()); } }

(4) The component class code snippet looks like:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35

import { Component, Pipe, PipeTransform } from '@angular/core'; import { CORE_DIRECTIVES } from '@angular/common'; import { TAB_DIRECTIVES } from 'ng2-bootstrap/ng2-bootstrap'; import { Router } from '@angular/router'; // import ProjectService import { ProjectService } from './project.service'; import { MODAL_DIRECTIVES, ModalComponent } from 'ng2-bs3-modal/ng2-bs3-modal'; import { PAGINATION_DIRECTIVES } from 'ng2-bootstrap/ng2-bootstrap'; import { StatusPipe } from './project.pipe'; import { Project, Page } from '../model/model'; @Component({ selector: 'project-list', templateUrl: 'project.list.html', directives: [MODAL_DIRECTIVES, PAGINATION_DIRECTIVES], providers: [ProjectService], // register ProjectService to providers pipes: [StatusPipe] }) export class ProjectComponent { projects: Page<Project>; // initialize ProjectService in constructor constructor(private projectService: ProjectService) { } search() { this.projectService.search(this.searchProject, this.currentPage).subscribe( res => { this.projects = res; } ); } }

Reference

[1] https://angular.io/docs/ts/latest/tutorial/toh-pt4.html