编写程序是个很有意思的事情，它的精髓就是找规律。在现实生活中，如果特别擅长并乐于对规律进行查找总结，那么恭喜你！你现在已经处于愉快的实现自己人生价值的道路上。 # 找规律 在我们显示由后台获取的数据以前，把`anugular-cli`为我们自己的生成的组件的C\V层拿出来，找找规律。看`hello world`是如何在C层定义并在V层显示的。 # 我们后面讲 AOP `Spring`有两个特性：`IOC`与`AOP`。`IOC`即控制反转，由于太过于出名，而使得网上的文章有很多。大体的意思就是说：以前我们需要某个对象是需要自己实例化出来的；而在`Spring`中，我们只需要声明自己需要一个具有什么功能的对象，至于最后得到的这个对象是谁，是由`Spring`来控制来完的。在`IOC`以前，对象是谁是在代码编写阶段来控制的；而有了`IOC`以后，我们在代码编写阶段放弃了控制了权限，而改由`Spring`统一控制了。由于控制权发生了实质性的变更，所以是`控制反转`了。 # 增值服务 一路走来，我们深之此路本就应该是平坦和畅通的，但却看到了太多的学生经历的坎坷与艰辛。在学习的道路上我们走了太多的弯路，也解决了太多本不应该出现或是必须借助一些百度不到的知识才能解决的问题，我们希望给大家一个本该就如此平坦的道路。老祖宗告诉我们说：`穷则独善其身 达则兼善天下`。穷的我们，还没有靠自己能力来帮助每一位我们想帮助的同学。 本次我们在文字教程的基础上，于思否上推出了配套视频教程。购买了视频教程的用户，请QQ私信xxxxxxx加入远程协助群。我们会在每周一至周五的晚上7:30 - 9:30来远程解决大家在学习教程中碰到的实际问题。包括但不限于：网络问题、环境问题、集成开发环境问题、编码问题。 # 路由转发 在`Angular`中，数据转发的目的地有两种：模块、组件。 什么时候可能用路由快照来快速获取参数，什么时候必须用观察者模式来获取参数。 组件多例时，即每次调用的时候都会重新初始化1次，那么用快照没问题，因为快照只获取第1次的。 组件单例被多次调用时，比如：上一页，下一页。这时候就必须用观察者模式，所以第2页没有办法触发。 # 介绍观察者模式 ~~~ import {Component, OnInit} from '@angular/core'; import {ActivatedRoute} from '@angular/router'; import {BehaviorSubject, Subject} from 'rxjs'; @Component({ templateUrl: './teacher-edit.component.html' }) export class TeacherEditComponent implements OnInit { public teacher: any; private mockHttpTeacher: Subject<any>; constructor(private route: ActivatedRoute) { } ngOnInit(): void { const id = this.route.snapshot.paramMap.get('id'); this.mockHttpTeacher = new Subject(); this.mockHttpTeacher.subscribe((teacher) => { this.teacher = teacher; }); } /** * 发送空的数据 */ sendEmptyMockTeacher(): void { this.mockHttpTeacher.next({}); } /** * 发送模板教师数据 */ sendMockTeacher(): void { const zhangsan = { id: 1, name: '张三', username: 'zhangsan', email: 'zhangsan@yunzhiclub.com', sex: true }; this.mockHttpTeacher.next(zhangsan); } } ~~~ ~~~ <button (click)="sendMockTeacher()">生成正常数据</button> <button (click)="sendEmptyMockTeacher()">清空数据</button> <pre>{{teacher | json}}</pre> ~~~ 在新增教师环境中，我们使用了[模板驱动表单](https://www.angular.cn/guide/forms)并使用`[(ngModel)]`进行数据绑定。但在实际的项目开发中，我们将更多的使用[响应式表单](https://www.angular.cn/guide/reactive-forms)，在`响应式表单`中，表单中的每一项都做为特定的对象出现，在进行数据赋值、获取数据时可以像操作一般的数据对象一样进行操作。这无疑获得了被`一切旨对象`开发思想武装的我们所青睐。 ## 引入模块 `响应式表单`属于[ReactiveFormsModule](https://www.angular.cn/api/forms/ReactiveFormsModule)模块，在使用之前需要在`App`模块中引入该模块. app.module.ts ```js ``` ## 表单控件 在`响应式表单`中把表单中的元素称为`FormControl 表单控件`，在教师编辑中我们需要初始化4个这样的控件，在成功的与后台交互并获取数据后将相应的数据绑定到对应的`表单控件`上。 teacher-edit.component.ts ``` ``` ## 在V层中使用控件 测试跳转是否成功 [https://stackoverflow.com/questions/39791773/angular-2-4-6-7-unit-testing-with-router](https://stackoverflow.com/questions/39791773/angular-2-4-6-7-unit-testing-with-router) [https://www.angular.cn/guide/reactive-forms](https://www.angular.cn/guide/reactive-forms) 尽管现在生活中充满着异步。但由于计算机很傻很天真，所以点餐后如果你不主动的告诉它可以去做些别的事情了，那么它就会一直傻傻的等待下去。在JS的世界里，只有在两种情况下回调是异步的，即：`资源请求`以及`timeout`。在后续的章节中，我们会详细的介绍。