Angular2 核心概念

@[toc]

Angular2的核心组件

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

• 模块

  
  
  

  在这里插入图片描述

核心模块详解

组件

以Angular2实现的通讯录的举例

• ContactApp：通讯录app
• Header：所有联系人
• ContactList：联系人列表
• Footer：底部
• Contact：各个联系人

在这里插入图片描述

组件要素

在这里插入图片描述

组件通讯机制

在这里插入图片描述

全生命周期支持

在这里插入图片描述

组件示例

• 装饰器：用来修饰一个类，赋予一个类更丰富的信息，里面包含元数据

• 组件类：组件的业务逻辑

  
  
  

  在这里插入图片描述

组件渲染

在这里插入图片描述

组件绑定

在这里插入图片描述

组将绑定和事件绑定来实现数据双向流动流动的效果

组件树

在这里插入图片描述

注意：1. 父组件ContactList需要用到子组件Contact定义的一些元素标签，还需要有一个导入的过程，借助模块来实现

2. 属性绑定：负责组件类与模板之间的数据传递，同时也但负着组件间数据通信重任

元数据

元素据与装饰器之间的通信

在这里插入图片描述

模板

在这里插入图片描述

数据绑定

插值的方式传递数据

在这里插入图片描述

其他常见的数据绑定的方式

• 属性绑定
• 事件绑定
• 双向绑定

在这里插入图片描述

指令

组件继承于指令，包含属性指令和结构指令。

在这里插入图片描述

在这里插入图片描述

指令是支持自定义的

在这里插入图片描述

服务

在这里插入图片描述

依赖注入

在这里插入图片描述

在这里插入图片描述

分层注入

在这里插入图片描述

在这里插入图片描述

分层注入源于组件树的结构，互不影响同级的书节点

模块

在这里插入图片描述

文件模块

在这里插入图片描述

文件模块使用

在这里插入图片描述

应用模块

在这里插入图片描述

• 按照功能进行包装组成了应用模块
• 同一个模块内时可以组件调用指令，但是跨模块组件不允许调用

应用示例

在这里插入图片描述

这里讲解使用的时一个NgModule的一个装饰器，里面包换了一些元数据

• declarations:包装组件或指令等
• providers：依赖注入，能够作用于组件（仅能该组件和子组件使用）；同样也能作用于某个模块上（可以在应用全局），只是作用于不一样
• imports：导入其他模块，能使用该模块暴露出来的指令等
• bootstrap：设置根组件，指定angular2整个应用的根组件，只在根模块使用
• exports：导出组件或指令等，与imports结合使用

应用模块之间的关系

在这里插入图片描述

• 模块C中，组件被export了，所以可以被调用
• 模块C中，指令没有被export，所以可以被调用
• 模块C中，服务的作用于是全局的，所以可以被应用内的所有组件调用

一个应用中的所有模块

在这里插入图片描述

应用的功能特性，切分成各种各样的模块

• 根模块
• 特性模块
• 共享模块
• 核心模块

在这里插入图片描述