一、闲唠嗑几句
以前用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参数