## 写在前面 **注意：**自本小节开始，对于非首次出现过的知识点（理论），将全面的启用单元测试。在实际的教学中，我们深知掌握并运用这种开发方式需要一定的时间；学习理解这种开发方式的难易程度取决于大家的开发经验。总之，它初次学习起来要比写功能性的代码要难的多。 如果在学习的过程中，如果发现自己并不能够完全的驾驭这种开发方式，那么可以在第一遍学习的过程中采取倒序的学习方法：先查看功能实现代码，再学习单元测试。或是更激进一些，先学习每个章节中的后台部分，当后台部分准备完后，在有后台支持的基础上来学习前台。学习前台的步骤完全参考第二章的开发步骤。 笔者在编写教程的过程中对部分知识点进行了反复的学习。尽管如此，在教程的编写过程还需要常常的来查看前面的教程及官方手册来确定某些代码的书写方法。如果时间允许，强烈建议大家走通一遍后，再学习第二遍来进行知识的巩固。 <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) | - |