如何使用 Angular 內存 (in-memory) 服務器

除了經過 json-server 來設置和使用模擬的 REST API外，Angular內提供了一個能夠快速創建測試用web服務的方法：內存 (in-memory) 服務器。

在先後端分離開發中，通常在功能開發前，前端人員與服務端會制定相關的api，制定好它返回數據格式，定好後咱們就能夠快速的創建一個內存服務器了。

舉個例子吧，咱們須要一個這樣的數據結構

數據模型：

// person.model.ts
class Person {
  id: string;
  name: string;
  dept: string;
}

一般返回的JSON是這樣：

{
  "data": [
    {
      "id": "0001",
      "name": "歲寒③友",
      "dept": "IT部"
    },
    {
      "id": "0002",
      "name": "老王",
      "dept": "IT部"
    },
    {
      "id": "0003",
      "name": "小張",
      "dept": "行政部"
    }
  ]
}

首先咱們須要安裝angular-in-memory-web-api，輸入

npm install --save angular-in-memory-web-api

而後你的文件夾下建立一個文件：

// src\app\my\my-data.ts

import { InMemoryDbService } from 'angular-in-memory-web-api';
import { Person } from './person.model';
export class InMemoryPersonDbService implements InMemoryDbService {
  createDb() {
    let persons: Person[] = [
        {
          "id": "0001",
          "name": "歲寒③友",
          "dept": "IT部"
        },
        {
          "id": "0002",
          "name": "老王",
          "dept": "IT部"
        },
        {
          "id": "0003",
          "name": "小張",
          "dept": "行政部"
        }
    ];
    return {persons};
  }
}

要實現InMemoryDbService的內存數據，這個數據庫其實也就是把數組傳入。
配置下app.module.ts，加入類引用和對應的模塊聲明：

// app.module.ts

import { HttpModule }           from '@angular/http';
import { InMemoryWebApiModule } from 'angular-in-memory-web-api';

import { InMemoryPersonDbService }     from '../app/my/my-data';
@NgModule({
 imports: [
   HttpModule,
   InMemoryWebApiModule.forRoot(InMemoryPersonDbService),
   ...
 ],
 ...
})
export class AppModule { ... }

接下來比較重點了

// service.ts

import { Injectable } from '@angular/core';
import { Http, Headers } from '@angular/http';
import { UUID } from 'angular2-uuid';
import 'rxjs/add/operator/toPromise';
import { Person } from './person.model';

@Injectable()
export class PersonService {
  
  
  
  private api_url = 'api/persons';   //這裏是重點*
  private headers = new Headers({'Content-Type': 'application/json'});
  constructor(private http: Http) { }
  // POST /persons
  addPerson(name:string，dept:string): Promise<Person> {
    let person = {
      id: UUID.UUID(),
      name: name,
      dept: dept
    };
    return this.http
            .post(this.api_url, JSON.stringify(person), {headers: this.headers})
            .toPromise()
            .then(res => res.json().data as Person)
            .catch(this.handleError);
  }
  private handleError(error: any): Promise<any> {
    console.error('An error occurred', error); 
    return Promise.reject(error.message || error);
  }
}

重點：上面的代碼咱們看到定義了一個

api_url = 'api/persons';

這個地址到底須要如何聲明？

• "/"前面的api定義成什麼均可以

• "/"後面這個persons對應則是my-data.ts 返回的{persons}，這個實際上是 return {persons: persons}的省略，
  若是咱們不想讓這個後半部分是persons，咱們能夠寫成{mydata: persons}。

這樣的話咱們改寫成 api_url = 'app/mydata'
由於這個內存Web服務的機理是攔截Web訪問，也就是說隨便什麼地址均可以，內存Web服務會攔截這個地址並解析你的請求是否知足RESTful API的要求

最後簡單說下說下RESTful API中就是以「名詞」來標識資源，
例如若是url是api/persons，那麼

查詢全部成員：以GET方法訪問api/persons
查詢某個成員：以GET方法訪問api/persons/id，好比id是1，那麼訪問api/persons/1
更新某個成員：以PUT方法訪問api/persons/id
刪除某個成員：以DELETE方法訪問api/persons/id
增長一個成員：以POST方法訪問api/persons

---

關於in-memory更多能夠閱讀：
http://npm.taobao.org/package...