师者,所以传道受业解惑也。

在今天这个特殊的日子,向所有人民教师说声:你们辛苦了,教师节快乐。(^__^)

论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元素叫宿主元素。组件可以与宿主元素进行交互,包括:

  • 显示数据:使用插值语法(双大括号)来显示组件的数据
  • 双向数据绑定:便控制用户输入
    [{ngModel}]=property
    
  • 监听宿主元素时间以及调用组件方法:监听click事件,触发组件类中特定函数
    <i (click)="someFun()"></i>
    

    Angular和AngularJS最大的不同就是Angular不再默认双向数据绑定,而是又额外增加了属性以及事件绑定,为交互增加了更多的选择。

组件一般不是单独存在的,而是通过与其他组件协调合作的,然后把他们封装在模块中。模块是组件之上的一层抽象。

未完待续…

组件交互

组件生命周期

Angular依赖注入-Dependency Injection

Angular依赖注入-Dependency Injection Continue reading

Angular生命周期钩子

Published on December 24, 2017

万丈高楼平地起

Published on October 23, 2017