# 组件初始化 按前面的经验，我们知道开发组件的第一步便是原型。而原型中成本最低的便是手绘原型。但有些时候，比如我们熟悉的再不过的建立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) | |