首页 专题 H5案例 前端导航 UI框架

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

阅读 2470 评论 0
服务一般用来放置可复用的代码。
下面我们创建一个管理书籍的服务:

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);  

}


如发现任何问题或有好的建议,欢迎在下方评论留言。


关注”全栈技术杂货铺“

全栈技术杂货铺