## 寫在前面 **注意：**自本小節開始，對于非首次出現過的知識點（理論），將全面的啟用單元測試。在實際的教學中，我們深知掌握并運用這種開發方式需要一定的時間；學習理解這種開發方式的難易程度取決于大家的開發經驗。總之，它初次學習起來要比寫功能性的代碼要難的多。 如果在學習的過程中，如果發現自己并不能夠完全的駕馭這種開發方式，那么可以在第一遍學習的過程中采取倒序的學習方法：先查看功能實現代碼，再學習單元測試。或是更激進一些，先學習每個章節中的后臺部分，當后臺部分準備完后，在有后臺支持的基礎上來學習前臺。學習前臺的步驟完全參考第二章的開發步驟。 筆者在編寫教程的過程中對部分知識點進行了反復的學習。盡管如此，在教程的編寫過程還需要常常的來查看前面的教程及官方手冊來確定某些代碼的書寫方法。如果時間允許，強烈建議大家走通一遍后，再學習第二遍來進行知識的鞏固。 <hr> 本小節讓我們再上個小節的基礎上，對組件進行初始化操作。 # ng test 打開終端并進入項目，使用`ng test`來啟動單元測試，并在自動啟動的chrome中查看組件。 ``` panjiedeMac-Pro:app panjie$ ng test 30% building 18/18 modules 0 active31 10 2019 10:14:59.772:WARN [karma]: No captured browser, open http://localhost:9876/ 31 10 2019 10:14:59.865:INFO [karma-server]: Karma v4.1.0 server started at http://0.0.0.0:9876/ 31 10 2019 10:14:59.866:INFO [launcher]: Launching browsers Chrome with concurrency unlimited 31 10 2019 10:14:59.873:INFO [launcher]: Starting browser Chrome 31 10 2019 10:15:04.273:WARN [karma]: No captured browser, open http://localhost:9876/ ... ``` # C層初始化 klass/index/index.component.ts ``` import {Component, OnInit} from '@angular/core'; @Component({ selector: 'app-index', templateUrl: './index.component.html', styleUrls: ['./index.component.sass'] }) export class IndexComponent implements OnInit { private message = ''; /*查詢參數*/ params = { name: '' }; ① /* 班級 */ klasses = [ ② {name: '計科1901班', teacher: {id: 1, name: '張三'}}, ③ {name: '軟件1902班', teacher: {id: 2, name: '李四'}} ]; constructor() { } ngOnInit() { } /** * 用戶點擊查詢按鈕后觸發 */ onQuery(): void { ④ console.log('綜合查詢'); } } ``` * ① 以對象的形式定義查詢參數。 * ② 定義班級數組，該數組中有兩個班級對象。 * ③ 定義班級對象，每個班級對象中有個Teacher對象。 * ④ 定義前臺觸發的查詢方法。 # V層 klass/index/index.component.html ``` <form (ngSubmit)="onQuery()"> <label>名稱：<input type="text" name="params.name"/></label> <button>查詢</button> </form> <table> <tr> <th>序號</th> <th>名稱</th> <th>輔導員</th> </tr> <tr *ngFor="let klass of klasses; index as i"> ? <td>{{index + 1}}</td> ? <td>{{klass.name}}</td> <td>{{klass.teacher.name}}</td> ? </tr> </table> ``` * ? 使用`i`表表示數組下標。 * ? 下標由0開始，在此加1后顯示。 * ? 顯示班級中的教師的名字。 ## 測試  * 1 測試成功的用例。 * 2 沒有測試的用例。 * 3 最后測試的組件構建后的效果。 # 參考文檔 | 名稱 | 鏈接 | 預計學習時長(分） | | --- | --- | --- | | 源碼地址 | [https://github.com/mengyunzhi/spring-boot-and-angular-guild/releases/tag/step3.2.3](https://github.com/mengyunzhi/spring-boot-and-angular-guild/releases/tag/step3.2.3) | - |