师者，所以传道受业解惑也。
在今天这个特殊的日子，向所有人民教师说声：你们辛苦了，教师节快乐。(^__^)
论Component的重要性
敲黑板，组件这一块是Angular最重要的部分，没有之一！！!
谈到组件化，必须先提起模块化。Node.js中的模块就是一个文件，通过import的方式来进行模块或者资源的加载，Angular与Node.js类似。在早期的模块化工具中，多数只对JS文件做了处理，缺少对HTML和CSS的管理。后来形成的按模块划分的概念，相对传统的按资源目录划分的方式，按照逻辑来划分显得更加合理，让模块更加独立，方便维护。
我的理解：前端的组件就是为了实现同一个业务逻辑的代码文件的组合。
@Component
Angular用@Component来定义一个类作为Angular的组件。
最常用的元数据有以下几个：
- selector：在HTML模板中标识此组件的CSS选择器
- styleUrls：指定此组件所需要的CSS文件路径(一个数组)
- templateUrl：指定此组件HTML模板文件路径
还有几个不是很常用的，但是要了解一下：
- animations：标明此组件的动画效果
- providers：为此组件注入Service数组(包括子组件)
- styles：此组件的CSS样式
- template：此组件的HTML模板
以上两个元数据不建议使用，因为他们是明文固定的写在这个文件里面，不利于复用和维护，建议使用常用的以文件引用的形式。
组件基础
每个组件都有一个模板，Angular才能将组件内容渲染到DOM上，这个DOM元素叫宿主元素。组件可以与宿主元素进行交互，包括：
- 显示数据：使用插值语法(双大括号)来显示组件的数据
- 双向数据绑定：便控制用户输入
1 | [(ngModel)]=“property” |
- 监听宿主元素时间以及调用组件方法：监听click事件，触发组件类中特定函数
1 | <i (click)="someFun()"></i> |
Angular和AngularJS最大的不同就是Angular不再默认双向数据绑定，而是又额外增加了属性以及事件绑定，为交互增加了更多的选择。
组件一般不是单独存在的，而是通过与其他组件协调合作的，然后把他们封装在模块中。模块是组件之上的一层抽象。