# 原型 我們常常聽到程序員在報怨項目經理或是客戶，報怨他們往往在產品成型后馬上提出近一步的需求。我想說這是非常正常的現象，因為作為項目經理或客戶，他們是完全的外行。在與他們進行信息交流時，存在信息差屬于非常正常的現象。 而我們要做的，就是把這種信息差盡量降低到最小。程序員是必然離不開電腦的，而一個優秀的程序員是必然離不開紙和筆的。在正式編碼前，一定要把腦子帶上，使用最小的成本將我們計劃完成的產品展示給用戶，同時也是展示給自己。 而**手繪原型**則是這個最小的成本。在動手編碼前，使用鉛筆、橡皮、直尺等繪制原型是非常必要的！假設我們當前手繪原型如下：  接下來，讓我們共同實現教師保存功能。 ## 初始化組件 使用shell進入項目`src/app`文件夾： ```bash panjie@panjies-Mac-Pro first-app % cd src/app panjie@panjies-Mac-Pro app % pwd /Users/panjie/github/mengyunzhi/angular11-guild/first-app/src/app panjie@panjies-Mac-Pro app % ``` 接下來執行：`ng generate component add`來生成一個教師添加組件： ```bash panjie@panjies-Mac-Pro first-app % cd src/app panjie@panjies-Mac-Pro app % pwd /Users/panjie/github/mengyunzhi/angular11-guild/first-app/src/app panjie@panjies-Mac-Pro app % ng generate component add ? Would you like to share anonymous usage data about this project with the Angular Team at Google under Google’s Privacy Policy at https://policies.google.com/privacy? For more details and how to change this setting, see http://angular.io/analytics. Yes Thank you for sharing anonymous usage data. Would you change your mind, the following command will disable this feature entirely: ng analytics project off panjie@panjies-Mac-Pro app % CREATE src/app/add/add.component.css (0 bytes) CREATE src/app/add/add.component.html (18 bytes) CREATE src/app/add/add.component.spec.ts (605 bytes) CREATE src/app/add/add.component.ts (263 bytes) UPDATE src/app/app.module.ts (540 bytes) panjie@panjies-Mac-Pro app % ``` > info: 如果出現以下提示（google在問我們是否在共享我們的使用情況），輸入`y`后回車鍵（允許）繼續。當然了，你可以直接按回車（不分享我們的數據給google）后繼續 。 以上命令將自動為我們創建四個文件、更新一個文件。創建的文件分別為構成組件的三個文件：`src/app/add/add.component.css`, `src/app/add/add.component.html`，`src/app/add/add.component.ts`，一個供快速開發的測試文件`src/app/add/add.component.spec.ts`；更新了當前`src/app`文件夾下的模塊文件`src/app/app.module.ts`。 ```bash panjie@panjies-Mac-Pro app % tree . ├── add │?? ├── add.component.css ? │?? ├── add.component.html ? │?? ├── add.component.spec.ts ? │?? └── add.component.ts ? ├── app ├── app-routing.module.ts ├── app.component.css ├── app.component.html ├── app.component.spec.ts ├── app.component.ts └── app.module.ts ? 2 directories, 10 files ``` - ? 新建文件 - ? 更新文件 `src/app/app.module.ts`更新情況如下： ```typescript import { AddComponent } from './add/add.component'; ? @NgModule({ declarations: [ AppComponent, AddComponent ? ], ``` ?將新建的`AddComponent`自動添加到了`AppModule`模塊下的`declarations`中， ?自動添加了相應的文件引用。 ## 測試 接下來我們繼續使用`ng t`運行單元測試以查看當前新建的教師添加組件: ````bash panjie@panjies-Mac-Pro first-app % ng t ````  ?? 什么情況，說好的使用`ng t`顯示的組件呢？怎么仍然顯示的是教師列表呢？再刷新幾次試試：  是的，和你看到的一樣。angular會隨機的顯示以前的教師列表組件以及我們剛剛初始化的ADD組件，較以前僅有一個組件比較，angular當前顯示的信息中表明正在測試兩個組件，被標明了測試的順序。當我們的Add組件被最后測試時，最終的界面將停留在Add組件，而當我們的Add組件被最先測試時，最終的界面則將停留在教師列表組件。  此時，我們可以找到Add組件對應的測試文件`add.component.spec.ts`，將第5行的`describe`變更為`fdescribe`，表示強制(force)執行當前測試同時忽略其它以`describe`聲明的測試： ```typescript describe('AddComponent', () => { ? fdescribe('AddComponent', () => { ? ``` 使用`ctrl（command）+s`保存當前文件后，測試界面將自動更新：  其中綠色代碼正在執行的測試，而灰色表示該測試未執行。 ## V層 下面我們打開`add.component.html`: ```html <p>add works!</p> ``` 刪除文件中的代碼并加入以下代碼，以初始化教師添加表單： ```html <form class="container-sm"> <div class="mb-3 row"> <label for="name" class="col-sm-2 col-form-label">姓名</label> <div class="col-sm-10"> <input type="text" class="form-control" id="name"> </div> </div> <div class="mb-3 row"> <label for="username" class="col-sm-2 col-form-label">用戶名</label> <div class="col-sm-10"> <input type="text" class="form-control" id="username"> </div> </div> <div class="mb-3 row"> <label for="email" class="col-sm-2 col-form-label">Email</label> <div class="col-sm-10"> <input type="text" class="form-control" id="email"> </div> </div> <div class="mb-3 row"> <label class="col-sm-2 col-form-label">性別</label> <div class="col-sm-10"> <div class="form-check form-check-inline"> <input class="form-check-input" type="radio" name="inlineRadioOptions" id="sex-male" value="option1"> <label class="form-check-label" for="sex-male">男</label> </div> <div class="form-check form-check-inline"> <input class="form-check-input" type="radio" name="inlineRadioOptions" id="sex-female" value="option2"> <label class="form-check-label" for="sex-female">女</label> </div> </div> </div> <div class="mb-3 row"> <div class="col-sm-10 offset-2"> <button class="btn btn-primary">保存</button> </div> </div> </form> ``` 最終效果如下：  # 本節資源 | 名稱 | 地址 | | ---------------------- | ------------------------------------------------------------ | | Jasmine fdescribe | [https://jasmine.github.io/api/3.6/global.html#fdescribe](https://jasmine.github.io/api/3.6/global.html#fdescribe) | | CLI 概覽與命令參考手冊 | [https://angular.cn/cli](https://angular.cn/cli) | | 本節源碼 | [https://github.com/mengyunzhi/angular11-guild/archive/step2.3.1.zip](https://github.com/mengyunzhi/angular11-guild/archive/step2.3.1.zip) |