文章目录

1. 1. Angular应用中的构造块
   1. 1.1. 模块
   2. 1.2. 组件
   3. 1.3. 模板
   4. 1.4. 元数据
   5. 1.5. 数据绑定
   6. 1.6. 指令
   7. 1.7. 服务
   8. 1.8. 依赖注入
2. 2. 结束语

最近在学习Angular2作为前端的框架，《Angular2使用笔记》系列用于记录过程中的一些使用和解决方法。
本文记录一些Angular2中的基本概念和基础知识。

Angular应用中的构造块

---

首先我们来看一张图。

使用Angular2的小伙伴们肯定很熟悉，这是张架构图，展现了 Angular 应用中的8个主要构造块。

模块

前面我们也提到过模块化。
Angualr应用是模块化的，并且Angular有自己的模块系统，它被称为Angular模块或NgModules。

每个Angular应用至少有一个模块（根模块），习惯上命名为AppModule。
根模块在一些小型应用中可能是唯一的模块，不过大多数应用可能会有很多特性模块，它们由一组领域类、工作流、或紧密相关的功能聚合而成。

• @NgModule装饰器

  • Angular模块（无论是根模块还是特性模块）都是一个带有@NgModule装饰器的类
  • NgModule是一个装饰器函数，它接收一个用来描述模块属性的元数据对象
    • declarations（声明） - 本模块中拥有的视图类。Angular有三种视图类：组件、指令和管道
    • exports - 声明（declaration）的子集，它可用于其它模块中的组件模板
    • imports - 本模块组件模板中需要由其它模块导出的类
    • providers - 服务的创建者。本模块把它们加入全局的服务表中，让它们在应用中的任何部分都可被访问到
    • bootstrap - 标识出应用的主视图（被称为根组件），它是所有其它视图的宿主。只有根模块才能设置bootstrap属性

• JavaScript模块

  • 在JavaScript中，每个文件就是一个模块，并且该文件中定义的所有对象都从属于那个模块
  • 通过export关键字，模块可以把它的某些对象声明为公开的
  • 别的JavaScript模块中可以使用import语句来访问这些公开对象

• Angular模块

  • Angular模块（一个用@NgModel装饰的类）是Angular本身的基础特性
  • 每个Angular库的名字都带有@angular前缀，可以用npm包管理工具安装
  • 可以用JavaScript的import语句从Angular库中导入Angular的 某些模块

组件

我们在类中定义组件的应用逻辑 (它被用来为视图提供支持) 。

• 组件控制视图
• 组件通过一些由属性和方法组成的API与视图交互
• Angular会创建、更新和销毁组件
  开发人员可以通过生命周期钩子在组件生命周期的各个时间点上插入自己的操作。
• 组件间的通讯
  • 使用输入型绑定，把数据从父组件传到子组件
  • 通过setter拦截输入属性值的变化
  • 使用ngOnChanges拦截输入属性值的变化
  • 父组件监听子组件的事件
  • 父组件与子组件通过本地变量local variable互动
  • 父组件调用ViewChild
  • 父组件和子组件通过服务来通讯

模板

我们通过组件的自带的模板来定义视图。模板以HTML形式存在，用来告诉Angular如何渲染组件(视图)。

• Angular模板语法
  • 插值表达式、模板表达式
  • 模板语句：用来响应由绑定目标(如HTML元素、组件或指令)触发的事件对象
  • 绑定语法：单向（从数据源到视图目标、从视图目标到数据源）、双向
  • 属性绑定：当要把一个视图元素的属性设置为模板表达式时设置
  • HTML属性、class和style绑定
  • 事件绑定：由等号左侧带圆括号的目标事件，和右侧一个引号中的模板语句组成
  • 使用NgModel进行双向数据绑定
  • 内建指令（NgClass/NgStyle/NgIf/NgSwitch/NgFor）
  • *与