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

# 初始化組件 是的，所有的功能在開發(fā)前都離不開初始化的工作。只有當(dāng)組件被初始化完成后，整個功能才能抽象變更為具體。團(tuán)隊內(nèi)部以及我們與甲方的交流也因此會加的順暢，這保證了我們將開發(fā)一個與甲方預(yù)期一致的系統(tǒng)。 ## 新建模塊 我們在第二章曾經(jīng)對模塊進(jìn)行了如下總結(jié)：  可見模塊與模塊間是通過`imports`來配合完成工作的。 在教師管理一章中，我們使用了Angular初始化的自帶模塊`AppModule`，本節(jié)我們初始化一個單獨用于班級管理的模塊`ClazzModule`，然后在此模塊中添加教師管理中的新增、列表、編輯等組件。這樣的做當(dāng)前的好處是可以使原本越來越亂的目錄結(jié)構(gòu)變得稍微的清爽一些。 我們使用shell來到src/app文件夾，執(zhí)行`ng g module clazz`命令來快速的創(chuàng)建一個模塊： ```bash panjie@panjies-Mac-Pro app % pwd /Users/panjie/github/mengyunzhi/angular11-guild/first-app/src/app panjie@panjies-Mac-Pro app % ng g module clazz CREATE src/app/clazz/clazz.module.ts (191 bytes) ``` 該命令將自動為我們在app文件夾下創(chuàng)建一個新的文件夾clazz，并在該文件夾下自動創(chuàng)建一個`clazz.module.ts`文件。 ```bash panjie@panjies-Mac-Pro app % tree clazz clazz └── clazz.module.ts ``` 文件內(nèi)容如下： ```typescript import {NgModule} from '@angular/core'; import {CommonModule} from '@angular/common'; @NgModule({ declarations: [], imports: [ CommonModule ] }) export class ClazzModule { } ``` 如上所示，類`ClazzModule`是使用了注解`@NgModule` ，因此被Angular識別為`模塊`。 ## 新建組件 接著使用shell進(jìn)入src/app/clazz文件夾，執(zhí)行創(chuàng)建組件命令： ```bash panjie@panjies-Mac-Pro clazz % pwd /Users/panjie/github/mengyunzhi/angular11-guild/first-app/src/app/clazz panjie@panjies-Mac-Pro clazz % ng g c add CREATE src/app/clazz/add/add.component.css (0 bytes) CREATE src/app/clazz/add/add.component.html (18 bytes) CREATE src/app/clazz/add/add.component.spec.ts (605 bytes) CREATE src/app/clazz/add/add.component.ts (263 bytes) UPDATE src/app/clazz/clazz.module.ts (250 bytes) ``` **注意**：必須確保shell所在文件夾位置為src/app/clazz。 Angular聰明的在當(dāng)前文件夾創(chuàng)建了班級add組件，并將其聲明到了clazz.module.ts中，以表明班級add組件為班級模塊的一部分。 ### V層 模板代碼如下： ```html b/first-app/src/app/clazz/add/add.component.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" name="name" id="name"> </div> </div> <div class="mb-3 row"> <label for="teacher" class="col-sm-2 col-form-label">班主任</label> <div class="col-sm-10"> <select id="teacher" class="form-control" > <option>張三</option> <option>李四</option> </select> </div> </div> <div class="mb-3 row"> <div class="col-sm-10 offset-2"> <button class="btn btn-primary">保存</button> </div> </div> </form> ``` 使用`ng t`后啟用單元測試并查看效果如下：  ### CV交互 select選擇框如何做我們還不太清楚，但部分的功能我們還是學(xué)習(xí)過的，讓我們簡單來實現(xiàn)這些功能。在CV的交互中，至于先寫哪個后寫哪個完全看自己的習(xí)慣，喜歡先寫哪個都可以，比如我在這比較喜歡先寫V層： ```html +++ b/first-app/src/app/clazz/add/add.component.html @@ -1,14 +1,15 @@ -<form class="container-sm"> +<pre>{{clazz | json}}</pre> ?? +<form class="container-sm" (ngSubmit)="onSubmit()"> <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" name="name" id="name"> + <input type="text" class="form-control" [(ngModel)]="clazz.name" name="name" id="name"> </div> </div> <div class="mb-3 row"> <label for="teacher" class="col-sm-2 col-form-label">班主任</label> <div class="col-sm-10"> - <select id="teacher" class="form-control" > + <select id="teacher" class="form-control"> <option>張三</option> <option>李四</option> </select> ``` 在這增加一個`<pre>`標(biāo)簽會有意想不到的收獲。 再寫C層： ```typescript +++ b/first-app/src/app/clazz/add/add.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit } from '@angular/core'; +import {Component, OnInit} from '@angular/core'; @Component({ selector: 'app-add', @@ -6,10 +6,17 @@ import { Component, OnInit } from '@angular/core'; styleUrls: ['./add.component.css'] }) export class AddComponent implements OnInit { + clazz = { + name: '' + }; - constructor() { } + constructor() { + } ngOnInit(): void { } + onSubmit(): void { + console.log('submit'); + } } ``` 這時候聰明的WebStorm將會在V層給我們一些錯誤的提示：   錯誤的意思都是在說沒有任何的`directive`來支持我們剛剛寫的代碼，比如：`(ngSubmit)`以及`[(ngModel)]`。事實也是這樣，由于`(ngSubmit)`以及`[(ngModel)]`并不存在于html語言中，所以要想使用其生效，則需要有一個叫做`directive`的東西來支持這樣功能。而前我們提及過的`FromModule`便是能提供支持`(ngSubmit)`以及`[(ngModel)]`的模塊。 模塊與模塊的交流位于模塊的`imports`，為些我們將`FormModule`添加到當(dāng)前組件所在的ClazzModule中： ```typescript --- a/first-app/src/app/clazz/clazz.module.ts +++ b/first-app/src/app/clazz/clazz.module.ts @@ -1,12 +1,14 @@ import {NgModule} from '@angular/core'; import {CommonModule} from '@angular/common'; import { AddComponent } from './add/add.component'; +import {FormsModule} from '@angular/forms'; @NgModule({ declarations: [AddComponent], imports: [ - CommonModule + CommonModule, + FormsModule ] }) export class ClazzModule { ``` 此時V層的錯誤消失。其實此時`ng t`所依賴的動態(tài)測試模塊也面臨著這個錯誤，只是WebStorme還沒有智能到能檢測出該錯誤，所以我們手動添加一下： ```typescript --- a/first-app/src/app/clazz/clazz.module.ts +++ b/first-app/src/app/clazz/clazz.module.ts @@ -1,12 +1,14 @@ import {NgModule} from '@angular/core'; import {CommonModule} from '@angular/common'; import { AddComponent } from './add/add.component'; +import {FormsModule} from '@angular/forms'; @NgModule({ declarations: [AddComponent], imports: [ - CommonModule + CommonModule, + FormsModule ] }) export class ClazzModule { ``` 至此大多數(shù)的初始化工作，就完成了。我們最后在單元測試中加入**自動檢測變更**的代碼后，當(dāng)前的組件便會在單元測試中動起來了。 ## Select 當(dāng)領(lǐng)導(dǎo)給我們分配一些新的任務(wù)時，**我不會**三個字永遠(yuǎn)不要輕易的就說出口。在現(xiàn)有水平的基礎(chǔ)上，合理的利用網(wǎng)上的學(xué)習(xí)資源，絕對能解決大多數(shù)的問題。即使最后沒有得到解決的答案，基于當(dāng)前自己找到的資源去和領(lǐng)導(dǎo)溝通也遠(yuǎn)勝過**我不會**三個字。 雖然我們還沒有學(xué)習(xí)過如何使用Select，但我相信你當(dāng)前一定有能力解決這個問題。Select使用方式與普通的input非常的相似：在元素上增加`name`屬性并直接應(yīng)用`([ngModel])`: ```html +++ b/first-app/src/app/clazz/add/add.component.html @@ -9,9 +9,11 @@ <div class="mb-3 row"> <label for="teacher" class="col-sm-2 col-form-label">班主任</label> <div class="col-sm-10"> - <select id="teacher" class="form-control"> - <option>張三</option> - <option>李四</option> + <select id="teacher" class="form-control" + name="teacher" + [(ngModel)]="clazz.teacherId"> + <option [ngValue]="1">張三</option> ?? + <option [ngValue]="2">李四</option> </select> </div> </div> ``` **注意**：這里使用`[ngValue]`而非`value`，在angular中`[xx]="yyy"`中的yyy表示typescript中的變量或值，我們在這里需要的值是number類型的`1`, `2`，而非字符串類型的`'1'`,`'2'`。如果你學(xué)過一些數(shù)據(jù)庫的相關(guān)知道，一定知道數(shù)字1，2，3與字符1，2，3的區(qū)別。如果使用的是value而非`[ngValue]`，則將得到字符串`1`,`2`。 接著在C層中同步為clazz添加一個teacherId字段： ```typescript +++ b/first-app/src/app/clazz/add/add.component.ts @@ -7,7 +7,8 @@ import {Component, OnInit} from '@angular/core'; }) export class AddComponent implements OnInit { clazz = { - name: '' + name: '', + teacherId: null as unknown as number }; constructor() { ``` 測試如下：  如果我們在`option`元素上，使用了`value`而非`[ngValue]`，則將得到字符類型的`'1'`：  而這并不是我們想要的。 ## 本節(jié)作業(yè) 新增班級的API為： ```bash POST /clazz ``` | **類型Type** | **名稱Name** | **描述Description** | **類型Schema** | | :----------- | :----------- | :------------------ | :----------------------------------------------------------- | | Body | clazz | 班級 | `{name: string, teacher: {id: number}}` | | Response | | 響應(yīng) | `{id: number, name: string, createTime: number, teacher: {id: number, name: string}}` | 請求Body`{name: string, teacher: {id: number}}`中的teacher屬性的類型是一個對象，該對象有一個id屬性，類型為number。在響應(yīng)信息中，給出了保存后的班級ID，以及班級對應(yīng)的teacher對象基本信息。 1. 請嘗試在`ng t`的情況下完成它。 2. 以下信息可能會給問題的解決帶來一些思路： 1. `ng t`下報401的錯誤原因為何？ 2. 如何在新建班級前完成用戶的登錄? | 名稱 | 鏈接 | | ---------------------- | ------------------------------------------------------------ | | 本節(jié)源碼(包含本節(jié)答案) | [https://github.com/mengyunzhi/angular11-guild/archive/step6.1.1.zip](https://github.com/mengyunzhi/angular11-guild/archive/step6.1.1.zip) |