angular2 中引入 angular-in-memory-web-api 以及出現的問題

1. 安裝angular-in-memory-web-api 

npm install --save [email protected]

     注意：此項操作必須安裝0.6.0以下，超過此版本會出現數據無法讀取等問題(404等路由問題）

2. 新建一個文件夾目錄如下：src\app\todo\todo-data.ts

import {InMemoryDbService} from 'angular-in-memory-web-api';
import {Todo} from './todo.model'

export class InMemoryTodoDbService implements InMemoryDbService{
    createDb(){
        let todos: Todo[] = [
            {id: "f823b191-7799-438d-8d78-fcb1e468fc78", desc: 'Getting up', completed: true},
      {id: "c316a3bf-b053-71f9-18a3-0073c7ee3b76", desc: 'Go to school', completed: false}
        ];
        return {todos};
    }
}

  Todo的路徑：src\app\todo\todo.model.ts

export class Todo {
    id:string;
    desc:string;
    completed:boolean;
}

 

3. 要獲取InMemoryTodoDbService的內存數據，就要把數組傳入，配置app.module.ts

import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { TodoComponent } from './todo/todo.component';
import {InMemoryWebApiModule} from 'angular-in-memory-web-api';
import {InMemoryTodoDbService} from './todo/todo-data'
import { TodoService } from './todo/todo.service';
import { HttpClientModule } from '@angular/common/http';


@NgModule({
  declarations: [
    AppComponent,
    TodoComponent,
  ],
  imports: [
    HttpClientModule,
    InMemoryWebApiModule.forRoot(InMemoryTodoDbService, { delay: 500 }),
    ],
  providers: [
    TodoService,

  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

  4. 新建一個獲取數據的TodoService ,路徑爲：src\app\todo\todo.service.ts

import { Injectable } from '@angular/core';
import 'rxjs/add/operator/toPromise';
import { HttpClient, HttpHeaders } from '@angular/common/http';

@Injectable()
export class TodoService {
  private api_url = 'api/todos';

  constructor(private http:HttpClient) { }

  getTodos(){
    return this.http.get(this.api_url)
  }

}

     注意：此時http不是Http,而是HttpClient 

5. 新建一個組件用來讀取調用TodoService 的數據,路徑爲：src\app\todo

    這樣就可以獲取到數據輸出到控制檯上

import { Component, OnInit } from '@angular/core';
import {Todo} from './todo.model'
import { TodoService } from './todo.service';

@Component({
  selector: 'app-todo',
  templateUrl: './todo.component.html',
  styleUrls: ['./todo.component.css'],
  providers:[TodoService]
})
export class TodoComponent implements OnInit {
  todos:Todo[];
  desc = '';

  constructor(private service:TodoService) { }

  ngOnInit() {
    this.getTodos();
  }
 
  getTodos():void{
    this.service.getTodos().subscribe(res=>{
      console.log(res);
    })
  
  }

}

6.  其餘操作，增刪改如下：

private headers = new HttpHeaders().set("Content-Type", "application/json")

新增:
this.http.post('api/todos', todo,{headers:this.headers})

刪除:
this.http.delete(`api/todos/${id}`, {headers:this.headers})

修改:
this.http.put('api/todos', todo, {headers:this.headers})

查詢:
this.http.get(`api/todos/${id}`)

7. 官網如下，可供參考：https://www.npmjs.com/package/angular-in-memory-web-api

8. 如有問題，歡迎一起來討論