MEAN 全栈开发—— 如何创建CRUD ？

背景

如何创建 expres + Angular 5.X 工程呢？ 早在 ng1.x 版本中，通过执行 express 命令，可以自动创建一个带有 AngularJS 的工程。 而NG 5.X 本身也是通过CLI创建的，这样一来，就不能自动创建含有 Angular 5.x 的express 的工程了。 这就是接下来要讲的系列内容

什么是依赖注入（Dependency Injection）？

依赖注入三步法：

（1） 在module中，引入 HttpClient 模块：

在 app.moudle.ts 文件中，引入： HttpClient ，这是一个与网络请求相关的module，也是 Angular 5.X 内置的网络模块，直接拿来用。它是最基础的网络模块。 怎么载入呢？

// app.module.ts 文件中： 
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';

// 在  @NgModule 中，import进来。 注意，一定要在 BrowserModule 之下。注意引入的顺序：
imports: [
  BrowserModule,
  FormsModule,
  HttpClientModule
],

（2） 在 x.component.ts 文件中，载入 HttpClient , 如下：

import { HttpClient } from '@angular/common/http';

// 在 Angular 5.X中，通过构造函数的初始化，实现对 `HttpClient`的依赖注入。

constructor(private http: HttpClient) { }

// 在 ngOnInit 函数中，调用：

ngOnInit() {
  this.http.get('/book').subscribe(data => {
    this.books = data;
  });
}

（3） 在 x.component.html 中，展示网络请求的数据。

<div class="container">
  <h1>Book List</h1>
  <table class="table">
    <thead>
      <tr>
        <th>Title</th>
        <th>Author</th>
        <th>Action</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let book of books">
        <td>{{ book.title }}</td>
        <td>{{ book.author }}</td>
        <td>Show Detail</td>
      </tr>
    </tbody>
  </table>
</div>