Angular4 开发实战：(7) 创建服务(Service)

服务一般用来放置可复用的代码。

下面我们创建一个管理书籍的服务：

ng g service book

自动生成的基础模板：

import { Injectable } from '@angular/core';   

@Injectable()  
export class BookService {    
  constructor() { }   
}

建议每一个服务都加上@Injectable()装饰器。 注意： 当 TypeScript 看到@Injectable()装饰器时，就会记下本服务的元数据。 如果 Angular 需要往这个服务中注入其它依赖，就会使用这些元数据。 现在我们添加一个获取书籍列表的方法：

export class BookService {   
  getBooks() {}  
}

我们使用Http来从服务器获取数据，但使用前需要注册入：

// app.module.ts   
import { HttpModule } from '@angular/http';   

@NgModule({   
  ...   
  imports: [   
    ...   
    HttpModule   
  ],   
  providers: [],   
  bootstrap: [AppComponent]  
})

我在这里模拟一个书籍书籍，创建一个book.json：

{   
  "books": [   
    {   
      "name": "HTML"   
    },      
    {   
      "name": "Javascript"   
    },   
   {   
     "name": "Angular"   
   }   
  ]  
}

接下来修改一下book.service.ts：

import { Injectable } from '@angular/core';  
import {Http} from '@angular/http';  
import 'rxjs/add/operator/toPromise';   

@Injectable()  
export class BookService {    
  constructor(private http: Http) { }    
  
  getBooks() {
    const url = '/src/app/service/book.json'; 
    return this.http.get(url)   
           .toPromise()   
           .then(res => res.json())   
           .catch(this.handleError);   
  }    

  private handleError(error: any): Promise<any> {   
    console.error('An error occurred', error); // for demo purposes only   
    return Promise.reject(error.message || error);   
  }  
}

注：默认情况下，Angular 的Http服务返回一个 RxJS 的Observable对象。 我们可以通过toPromise()方法将其转为便捷的承诺Promise。 使用toPromise()方法时要引入：

import 'rxjs/add/operator/toPromise';

接下来我们要使用这个BookService服务了：

// demo-service.service.ts   
import { Component, OnInit } from '@angular/core';  
import {BookService} from '../../service/book.service';   

@Component({   
  ...   
  providers: [BookService]    
})  

export class DemoServiceComponent implements OnInit {    

  books: any[];   
  constructor(private bookService: BookService) { }    

  ngOnInit() {   
    this.bookService.getBooks()   
    .then(res => {   
      this.books = res.books;   
    });   
  }  
}   

// demo-service.component.html   
<li *ngFor="let book of books">{{book.name}}</li>

在上面的代码中，我们做了三步工作： 1. 将BookService服务添加到@Component组件的元数据底部添加providers数组属性中。 2. 将BookService注入到构造方法中，并定义了一个私有属性bookService。 3. 在OnInit()生命钩子函数中调用服务并获取书籍数据 注：

• providers数组告诉 Angular，当它创建新的DemoServiceComponent组件时，也要创建一个BookService的新实例。
• 尽量不要在构造方法中获取服务数据，要在生命钩子函数中调用。

常用服务 获取(GET)数据：

get() {   
  return this.http.get(url)   
         .toPromise()   
         .then(response => response.json() )   
         .catch(this.handleError);  
}     

private handleError(error: any): Promise<any> {   
  console.error('An error occurred', error); // for demo purposes only   
  return Promise.reject(error.message || error);  
}

新建(POST)数据：

private headers = new Headers({'Content-type': 'application/json'});   

create() {   
  return this.http   
         .post(url, JSON.stringify(hero), {headers: this.headers})   
         .toPromise()   
         .then(response => response.json())   
         .catch(this.handleError);  
}

更新(update)数据：

private headers = new Headers({'Content-type': 'application/json'});   

update() {   
  return this.http   
         .put(url, JSON.stringify(hero), {headers: this.headers})   
         .toPromise()   
         .then(response => response.json())   
         .catch(this.handleError);  
}

删除(DELETE)数据：

private headers = new Headers({'Content-type': 'application/json'});   

delete() {   
  return this.http
        .delete(url, {headers: this.headers})   
        .toPromise()   
        .then(() => null)   
        .catch(this.handleError);  
}