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. 如有问题，欢迎一起来讨论