編寫程序是個很有意思的事情，它的精髓就是找規律。在現實生活中，如果特別擅長并樂于對規律進行查找總結，那么恭喜你！你現在已經處于愉快的實現自己人生價值的道路上。 # 找規律 在我們顯示由后臺獲取的數據以前，把`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`。在后續的章節中，我們會詳細的介紹。