Angular-cli 6.x +TS+Json-server打造经典Todo案例

一、闲唠嗑几句

以前用Angular的时候也只是用的js构建的应用，还未涉及ts；趁这次有机会，有时间用ts、angular的脚手架工具angular-cli构建一个经典的todo案例；几乎所有的vue、react的基础经典案例都离不开Todo List的应用构建。所以这次也是以Todo案例，来简单了解下ts构建单页面应用，以及请求响应逻辑处理。这次后端的逻辑主要采用前端工具json-server伪装处理后端逻辑，返回REST API；

最终效果预览图：

二、开始配置环境

1.安装 Angular-cli
2.初始化一个自定义的anglar项目
3.全局安装json-server
4.定义基本的数据库json文件
5.开启项目服务，开启json后台服务

注：

1.这部分可以参考我的其他博文：

https://blog.csdn.net/WU5229485/article/details/82917389
https://blog.csdn.net/WU5229485/article/details/83028007

2.json数据库文件（db,json）

{
  "todos": [
    {
      "id": 1,
      "title": "Read SitePoint article",
      "complete": false
    },
    {
      "id": 2,
      "title": "Clean inbox",
      "complete": false
    },
    {
      "id": 3,
      "title": "Make restaurant reservation",
      "complete": false
    }
  ]
}

三、创建应用的基础服务配置

1.创建开发环境和生产环境的分别对应的URL

（1）在开发环境和生产环境存储不同的API URL

（2）Angular-cli 默认提供两种环境配置：

src/environments/environment.ts      # 开发环境
src/environments/environment.prod.ts.  # 上线环境

（3）命令行动态加载（ 就不用手动改代码啦 ~ ）

ng serve 或者 ng build 默认加载开发环境 src/environments/environment.ts
ng serve --environment prod 或者 ng build --environment prod 默认加载上线环境 src/environments/environment.prod.ts

2.创建后台增删改查处理逻辑（基类、控制类）

（1）创建Todo基类，定义应用所需要的公共属性

export class Todo {
      id: number;
      title = '';
      complete = false;

      constructor(values: Object = {}) {
        Object.assign(this, values);
      }
    }

（2）创建 TodoDataService 控制类，AppServer类中的方法，向其AppServer类方法中传递Todo参数