本章我们学习了太多的实用的技能。
我们新建了多个拦截器,对拦截器的使用加深了印象。在实际的项目中,我们还可以结合拦截器来实现更多的功能。比如当请求时间大于0.5S显示一个Loading的加载动画;在比如将一些请求时间大于3S的请求记录下来,然后默默地发送到我们的监控系统上;再比如记录一些请求发生异常情况,然后把异然发送到监控系统上。
我们对父子组件的应用有了更深入的认识,不但可以使用基本`@Output()`、`@Input()`来完成父子组件的交互,还知道了`@Input()`如果应用变更检测。
在MockApi方面,在开发过程中我们完成弃用了真正的后面,在仅使用的MockApi的情况下便完成了开发工作。这也是前后台分离开发的核心,有了MockApi的存在,才使得前后台在真正意义上进行了分离。我们还学习了如何在MockApi中进行数据验证,当组件以**非法**数据发起请求时,MockApi能够实时对这个非法数据做出提示,这使得在MockApi在单元测试的支持下更加的健壮。在生产项目中,我们也是这么做的。
在单元测试的支持下,我们也尝试像大牛一样完成了代码的重构,进而消灭了重复的轮子。代码重构是一种保障代码质量非常有效的方法,代码重构的前提是单元测试,重构的目的降低项目维护难度。代码重构过程中,为了避免重构对历史的项目产生重大影响,重构需要逐步推进,保证向下兼容。不然,重构后的集成测试也是必不可少的环节。
在测试方面,我们使用了`MockApiTestingInterceptor`来替代了原有的`MockApiInterceptor`,这使得我们可以手动控制模拟数据的发送时机,结合手动调用`detectChanges()`方法,达到了在单元测试中对组件状况了然于胸的目的。这虽然在前期给我们造成了一定的负担,但无疑对Angular的学习的贡献是巨大的。因为我们学习Angular的过程中,便掌握了Angular渲染组件的多种内部特性,这为我们以后参与生产项目积累了资本。
在表单方面,我们完全使用了面向对象的响应式表单。这种可以使用面向对象的思想对表单输入进行控制的思想实在是太棒了。在面向对象思想的支持下,我们可以观察表单项的数据变化,为表单项设置验证器。同时,当表单存在多个表单项时,还可以将多个表单项组合在一起形成`FormGroup`,这使得表单验证变得极其简单。
本章我们还开发了一个应用性不是特别广的分页组件。通过对该组件学习,我们掌握了html代码是如何一步步变更为Angular组件的。
我们学习了`ngClass`、`ngStyle`的使用方法,通过对两者的对比,能够发现Angular在处理此类问题上的通用的点。
我还学习了如何自定义FormControl,这也是生产环境中一个非常核心的内容,将子组件打包为FormControl是非常实用的。这使得我们可以将整个V层的表单包装为一个FormGroup,从而将整个表单做为整体进行处理。在自定义FormControl时,我们又接解了TypeScript的接口概念,学习了如何在组件是使用`providers`等。
在集成测试中,我们启动了惰性加载,通过代码验证了惰性加载的时机。这也是一个生产项目中核心的知识点之一。在路由方面,我们学习了如何在V层及C层中完成相对路由的跳转。
最后我们对单例的Service进行了学习,了解了root根模块,对DI又有了新的认识。
恭喜你,在成为优秀的软件工程师的路上又迈出了坚实的一步!
- 序言
- 第一章 Hello World
- 1.1 环境安装
- 1.2 Hello Angular
- 1.3 Hello World!
- 第二章 教师管理
- 2.1 教师列表
- 2.1.1 初始化原型
- 2.1.2 组件生命周期之初始化
- 2.1.3 ngFor
- 2.1.4 ngIf、ngTemplate
- 2.1.5 引用 Bootstrap
- 2.2 请求后台数据
- 2.2.1 HttpClient
- 2.2.2 请求数据
- 2.2.3 模块与依赖注入
- 2.2.4 异步与回调函数
- 2.2.5 集成测试
- 2.2.6 本章小节
- 2.3 新增教师
- 2.3.1 组件初始化
- 2.3.2 [(ngModel)]
- 2.3.3 对接后台
- 2.3.4 路由
- 2.4 编辑教师
- 2.4.1 组件初始化
- 2.4.2 获取路由参数
- 2.4.3 插值与模板表达式
- 2.4.4 初识泛型
- 2.4.5 更新教师
- 2.4.6 测试中的路由
- 2.5 删除教师
- 2.6 收尾工作
- 2.6.1 RouterLink
- 2.6.2 fontawesome图标库
- 2.6.3 firefox
- 2.7 总结
- 第三章 用户登录
- 3.1 初识单元测试
- 3.2 http概述
- 3.3 Basic access authentication
- 3.4 着陆组件
- 3.5 @Output
- 3.6 TypeScript 类
- 3.7 浏览器缓存
- 3.8 总结
- 第四章 个人中心
- 4.1 原型
- 4.2 管道
- 4.3 对接后台
- 4.4 x-auth-token认证
- 4.5 拦截器
- 4.6 小结
- 第五章 系统菜单
- 5.1 延迟及测试
- 5.2 手动创建组件
- 5.3 隐藏测试信息
- 5.4 规划路由
- 5.5 定义菜单
- 5.6 注销
- 5.7 小结
- 第六章 班级管理
- 6.1 新增班级
- 6.1.1 组件初始化
- 6.1.2 MockApi 新建班级
- 6.1.3 ApiInterceptor
- 6.1.4 数据验证
- 6.1.5 教师选择列表
- 6.1.6 MockApi 教师列表
- 6.1.7 代码重构
- 6.1.8 小结
- 6.2 教师列表组件
- 6.2.1 初始化
- 6.2.2 响应式表单
- 6.2.3 getTestScheduler()
- 6.2.4 应用组件
- 6.2.5 小结
- 6.3 班级列表
- 6.3.1 原型设计
- 6.3.2 初始化分页
- 6.3.3 MockApi
- 6.3.4 静态分页
- 6.3.5 动态分页
- 6.3.6 @Input()
- 6.4 编辑班级
- 6.4.1 测试模块
- 6.4.2 响应式表单验证
- 6.4.3 @Input()
- 6.4.4 FormGroup
- 6.4.5 自定义FormControl
- 6.4.6 代码重构
- 6.4.7 小结
- 6.5 删除班级
- 6.6 集成测试
- 6.6.1 惰性加载
- 6.6.2 API拦截器
- 6.6.3 路由与跳转
- 6.6.4 ngStyle
- 6.7 初识Service
- 6.7.1 catchError
- 6.7.2 单例服务
- 6.7.3 单元测试
- 6.8 小结
- 第七章 学生管理
- 7.1 班级列表组件
- 7.2 新增学生
- 7.2.1 exports
- 7.2.2 自定义验证器
- 7.2.3 异步验证器
- 7.2.4 再识DI
- 7.2.5 属性型指令
- 7.2.6 完成功能
- 7.2.7 小结
- 7.3 单元测试进阶
- 7.4 学生列表
- 7.4.1 JSON对象与对象
- 7.4.2 单元测试
- 7.4.3 分页模块
- 7.4.4 子组件测试
- 7.4.5 重构分页
- 7.5 删除学生
- 7.5.1 第三方dialog
- 7.5.2 批量删除
- 7.5.3 面向对象
- 7.6 集成测试
- 7.7 编辑学生
- 7.7.1 初始化
- 7.7.2 自定义provider
- 7.7.3 更新学生
- 7.7.4 集成测试
- 7.7.5 可订阅的路由参数
- 7.7.6 小结
- 7.8 总结
- 第八章 其它
- 8.1 打包构建
- 8.2 发布部署
- 第九章 总结