师者,所以传道受业解惑也。
在今天这个特殊的日子,向所有人民教师说声:你们辛苦了,教师节快乐。(^__^)
论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不再默认双向数据绑定,而是又额外增加了属性以及事件绑定,为交互增加了更多的选择。
组件一般不是单独存在的,而是通过与其他组件协调合作的,然后把他们封装在模块中。模块是组件之上的一层抽象。