久久精品中文字幕av,av.涩涩涩涩涩涩涩涩,亚洲国产日韩欧美精品成人久久久,成人福利电影免费在线观看,日产国产原创av,日韩av午夜激情,bt天堂中文字幕,超级碰人妻在线视频,欧美老熟妇久久一区二区

# 原型 我們常常聽到程序員在報(bào)怨項(xiàng)目經(jīng)理或是客戶，報(bào)怨他們往往在產(chǎn)品成型后馬上提出近一步的需求。我想說這是非常正常的現(xiàn)象，因?yàn)樽鳛轫?xiàng)目經(jīng)理或客戶，他們是完全的外行。在與他們進(jìn)行信息交流時(shí)，存在信息差屬于非常正常的現(xiàn)象。 而我們要做的，就是把這種信息差盡量降低到最小。程序員是必然離不開電腦的，而一個(gè)優(yōu)秀的程序員是必然離不開紙和筆的。在正式編碼前，一定要把腦子帶上，使用最小的成本將我們計(jì)劃完成的產(chǎn)品展示給用戶，同時(shí)也是展示給自己。 而**手繪原型**則是這個(gè)最小的成本。在動(dòng)手編碼前，使用鉛筆、橡皮、直尺等繪制原型是非常必要的！假設(shè)我們當(dāng)前手繪原型如下：  接下來，讓我們共同實(shí)現(xiàn)教師保存功能。 ## 初始化組件 使用shell進(jìn)入項(xiàng)目`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 % ``` 接下來執(zhí)行：`ng generate component add`來生成一個(gè)教師添加組件： ```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: 如果出現(xiàn)以下提示（google在問我們是否在共享我們的使用情況），輸入`y`后回車鍵（允許）繼續(xù)。當(dāng)然了，你可以直接按回車（不分享我們的數(shù)據(jù)給google）后繼續(xù) 。 以上命令將自動(dòng)為我們創(chuàng)建四個(gè)文件、更新一個(gè)文件。創(chuàng)建的文件分別為構(gòu)成組件的三個(gè)文件：`src/app/add/add.component.css`, `src/app/add/add.component.html`，`src/app/add/add.component.ts`，一個(gè)供快速開發(fā)的測試文件`src/app/add/add.component.spec.ts`；更新了當(dāng)前`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`自動(dòng)添加到了`AppModule`模塊下的`declarations`中， ?自動(dòng)添加了相應(yīng)的文件引用。 ## 測試 接下來我們繼續(xù)使用`ng t`運(yùn)行單元測試以查看當(dāng)前新建的教師添加組件: ````bash panjie@panjies-Mac-Pro first-app % ng t ````  ?? 什么情況，說好的使用`ng t`顯示的組件呢？怎么仍然顯示的是教師列表呢？再刷新幾次試試：  是的，和你看到的一樣。angular會(huì)隨機(jī)的顯示以前的教師列表組件以及我們剛剛初始化的ADD組件，較以前僅有一個(gè)組件比較，angular當(dāng)前顯示的信息中表明正在測試兩個(gè)組件，被標(biāo)明了測試的順序。當(dāng)我們的Add組件被最后測試時(shí)，最終的界面將停留在Add組件，而當(dāng)我們的Add組件被最先測試時(shí)，最終的界面則將停留在教師列表組件。  此時(shí)，我們可以找到Add組件對(duì)應(yīng)的測試文件`add.component.spec.ts`，將第5行的`describe`變更為`fdescribe`，表示強(qiáng)制(force)執(zhí)行當(dāng)前測試同時(shí)忽略其它以`describe`聲明的測試： ```typescript describe('AddComponent', () => { ? fdescribe('AddComponent', () => { ? ``` 使用`ctrl（command）+s`保存當(dāng)前文件后，測試界面將自動(dòng)更新：  其中綠色代碼正在執(zhí)行的測試，而灰色表示該測試未執(zhí)行。 ## 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> ``` 最終效果如下：  # 本節(jié)資源 | 名稱 | 地址 | | ---------------------- | ------------------------------------------------------------ | | Jasmine fdescribe | [https://jasmine.github.io/api/3.6/global.html#fdescribe](https://jasmine.github.io/api/3.6/global.html#fdescribe) | | CLI 概覽與命令參考手冊(cè) | [https://angular.cn/cli](https://angular.cn/cli) | | 本節(jié)源碼 | [https://github.com/mengyunzhi/angular11-guild/archive/step2.3.1.zip](https://github.com/mengyunzhi/angular11-guild/archive/step2.3.1.zip) |