@[toc]
Angular2的核心组件
- 组件
- 元数据
- 模板
- 数据绑定
- 服务
- 指令
- 依赖注入
-
模块
在这里插入图片描述
核心模块详解
组件
以Angular2实现的通讯录的举例
- ContactApp：通讯录app
- Header：所有联系人
- ContactList：联系人列表
- Footer：底部
- Contact：各个联系人
在这里插入图片描述
组件要素
在这里插入图片描述
组件通讯机制
在这里插入图片描述
全生命周期支持
在这里插入图片描述
组件示例
- 装饰器：用来修饰一个类，赋予一个类更丰富的信息，里面包含元数据
-
组件类：组件的业务逻辑
在这里插入图片描述
组件渲染
在这里插入图片描述
组件绑定
在这里插入图片描述
组将绑定和事件绑定来实现数据双向流动流动的效果
组件树
在这里插入图片描述
注意：1. 父组件ContactList需要用到子组件Contact定义的一些元素标签，还需要有一个导入的过程，借助模块来实现
- 属性绑定：负责组件类与模板之间的数据传递，同时也但负着组件间数据通信重任
元数据
元素据与装饰器之间的通信
在这里插入图片描述
模板
在这里插入图片描述
数据绑定
插值的方式传递数据
在这里插入图片描述
其他常见的数据绑定的方式
- 属性绑定
- 事件绑定
- 双向绑定
在这里插入图片描述
指令
组件继承于指令，包含属性指令和结构指令。
在这里插入图片描述
在这里插入图片描述
指令是支持自定义的
在这里插入图片描述
服务
在这里插入图片描述
依赖注入
在这里插入图片描述
在这里插入图片描述
分层注入
在这里插入图片描述
在这里插入图片描述
分层注入源于组件树的结构，互不影响同级的书节点
模块
在这里插入图片描述
文件模块
在这里插入图片描述
文件模块使用
在这里插入图片描述
应用模块
在这里插入图片描述
- 按照功能进行包装组成了应用模块
- 同一个模块内时可以组件调用指令，但是跨模块组件不允许调用
应用示例
在这里插入图片描述
这里讲解使用的时一个NgModule的一个装饰器，里面包换了一些元数据
- declarations:包装组件或指令等
- providers：依赖注入，能够作用于组件（仅能该组件和子组件使用）；同样也能作用于某个模块上（可以在应用全局），只是作用于不一样
- imports：导入其他模块，能使用该模块暴露出来的指令等
- bootstrap：设置根组件，指定angular2整个应用的根组件，只在根模块使用
- exports：导出组件或指令等，与imports结合使用
应用模块之间的关系
在这里插入图片描述
- 模块C中，组件被export了，所以可以被调用
- 模块C中，指令没有被export，所以可以被调用
- 模块C中，服务的作用于是全局的，所以可以被应用内的所有组件调用
一个应用中的所有模块
在这里插入图片描述
应用的功能特性，切分成各种各样的模块
- 根模块
- 特性模块
- 共享模块
- 核心模块
在这里插入图片描述
