# 組件初始化 按前面的經驗，我們知道開發組件的第一步便是原型。而原型中成本最低的便是手繪原型。但有些時候，比如我們熟悉的再不過的建立form表單，特別有其它原型代碼可以參考時。我們更愿意在html中直接完成它們。 > 是手繪還是使用html，取決于場景。簡而言之，在特定場景后，優先使用效率高的。 ## 生成組件 使用html來直接創建原型的前提是我們需要先生成這個組件。參考生成Add組件的方式，使用`ng g c edit`命令來生成教師編輯組件： ```bash panjiedeMacBook-Pro:app panjie$ pwd /Users/panjie/github/mengyunzhi/angular11-guild/first-app/src/app panjiedeMacBook-Pro:app panjie$ ng g c edit ?? CREATE src/app/edit/edit.component.css (0 bytes) CREATE src/app/edit/edit.component.html (19 bytes) CREATE src/app/edit/edit.component.spec.ts (612 bytes) CREATE src/app/edit/edit.component.ts (267 bytes) UPDATE src/app/app.module.ts (666 bytes) panjiedeMacBook-Pro:app panjie$ ``` - `ng g c edit`是`ng generate component edit`的簡寫，在實際的使用中，我們更愿意用這種快捷的簡寫模式。 此時`angular-cli`為我們自動創建了4個新文件、并更新了模塊文件app.module.ts。 ## 原型初始化 初始化原型代碼如下： ```html <div> 姓名：<input value="張三"> </div> <div> 用戶名：<input value="zhangsan"> </div> <div> Email: <input value="zhangsan@yunzhi.club"> </div> <div> 性別：<input type="radio" checked="true">男 <input type="radio">女 </div> <div> <button>保存</button> </div ``` 此時我們使用`ng t`來嘗試測試這個組件，不出意外的話，你看到的將仍然是新增教師組件。如果你一下就能定位到問題所在，說明前面的教程學習的非常的扎實，那么恭喜你！請保持住這種狀態就好；如果你不太清楚為什么`ng t`后沒有顯示教師編輯組件，那么請短暫的思索一會；如果思索一會還沒有答案，則可以回到上節中找到答案。 > 請解決問題后繼續學習 原型最終確認如下：  ## 本節作業 1. 嘗試將原型使用bootstrap樣式進行美化 | 名稱 | 地址 | 備注 | | -------- | ------------------------------------------------------------ | ---- | | 本節源碼 | [https://github.com/mengyunzhi/angular11-guild/archive/step2.4.1.zip](https://github.com/mengyunzhi/angular11-guild/archive/step2.4.1.zip) | |