组件数据绑定流向

Angular2 : 八个核心组件

模块、组件、元数据、模板、数据绑定、服务、指令、依赖注入

组件核心，其余是为组件服务

组件要素：JavaScript、HTML、CSS

Angular内部处理流程

模板与用户直接进行交互--》模板接收来自用户的操作--》将数据绑定到组件类中--》组件类处理后更新模板视图反馈给用户.

Angular核心概念

1.模块

2.组件

3.元数据

4.模板

5.数据绑定

6.服务

7.指令

8.依赖注入

Angular要成功运行至少要定义一个模块,因为需要一个模块作为应用启动的入口,这种模块称作为根模块.

往后应用添加新的模块时只需将新模块导入到根模块中即可.

Angular中的模块支持懒加载.

*服务不在模块的导入和导出范畴,因为服务作用于模块时是作用于全局的,所有的组件都可以直接使用模块中的服务.

应用模块

每个应用模块都有自己的指令、组件、服务等,如果想在一个应用模块中使用另一个应用模块中的指令、组件则需要结合模块的导入和导出功能

使用@NgModule装饰器声明应用模块

元数据:

declarations:包装组件、指令

providers:依赖注入服务

imports:导入其他模块,将会继承导入模块中暴露的指令、组件

bootstrap:指定Angular应用的根组件,此参数只在根模块中使用.

exports:设置本模块对外暴露的组件或指令,其他模块导入此模块只能使用此参数暴露的组件和指令.

应用模块

每个应用模块都有自己的指令、组件、服务等,如果想在一个应用模块中使用另一个应用模块中的功能则需要结合模块的导入和导出功能

模块

Angular中的模块包括文件模块和应用模块

文件模块类似Java的类库

应用模块即按业务逻辑将程序进行逻辑划分.

Angular内置了很多文件模块

核心模块:

@angular/core 

通用模块:

@angular/common

表单模块:

@angular/forms

网络模块:

@angular/http

每个文件模块下封装了很多API,在使用到这些API时需要通过import命令进行导入.

import {类名} from "文件模块"

依赖注入:组件引入外部构建的机制(服务)

组件引入服务是引入服务组件类的实例,因此服务在被引用之前会有一个实例化的过程.

组件引入服务的方法:

1.Component装饰器使用providers元数据指定引入服务的名称.

2.组件类的构造方法中带服务类型(类似autowired=construtor)

由于存在组件树,当组件注入服务后,其所有的子组件都能使用此服务并且是使用同一个服务实例.

每个provider对应一个新的服务实例,因此如果想在某个组件使用新的服务实例而不使用继承父组件的则在该组件注入服务实例即可.

服务

服务提供特定的功能,可以在组件以及应用模块中使用.

*服务其实也是一个组件类

依赖注入:引入外部构建的机制

组件以及应用模块引入服务是引入服务组件类的实例,因此服务在被引用之前会有一个实例化的过程.

组件引入服务的方法:

1.Component装饰器使用providers元数据指定引入服务的名称.

2.组件类的构造方法中带服务类型(类似autowired=construtor)

由于存在组件树,当组件注入服务后,其所有的子组件都能使用此服务并且是使用同一个服务实例.

每个provider对应一个新的服务实例,因此如果想在某个组件使用新的服务实例而不使用继承父组件的则在该组件注入服务实例即可.

应用模块中引入服务的方法

1.NgModule装饰器使用providers元数据指定引入服务的名称.

当应用模块注入服务,则服务可以在应用全局中使用.

指令

Angular的指令分为：属性指令、结构指令、自定义指定

属性指令:用于改变组件模板的外观(样式)或行为,在元素的属性使用.

结构指令:改变组件模板的DOM结构.

自定义指令:使用@Directive装饰器定义指令

若@Directive装饰器的selector元数据有中括号则表示指令在元素的属性上进行使用.

*Augular内部已预定义了很多指令.

指令的使用:

templete:"<p [style.color] = "textColor" >{{greeting}}</p>"

*textColor为组件类中的属性.

数据是通过属性绑定自上而下的进行传递、通过事件绑定自下而上的进行传递.

子组件类中的@Input()标识表示子组件的输入接口,用于接收来自父组件的数据.

父组件的模板定义中data被当做属性来使用(属性绑定)

*属性绑定既负责组件内模板与组件类数据的传递也负责组件中数据的传递.

组件树

若ContactList是Contact的父组件,则将Contact子组件匹配的标签适用在父组件模板的定义中即可.

若想在父组件中使用子组件的属性则需要外加导入的过程.

组件渲染流程

执行Component装饰器将装饰器中的元数据注入到组件类中,最终Angular解析组件,将模板中的内容匹配到指定标签的元素中.

*模板中的数据取自组件类.