词汇表

Angular 词汇表

Angular 有自己的词汇表。 虽然大多数 Angular 短语都是日常用语或计算机术语,但是在 Angular 体系中,它们有特别的含义。

本词汇表列出了常用术语和少量具有独特或反直觉含义的罕用术语。

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

预 (ahead-of-time, AOT) 编译

Angular 的预先(AOT)编译器可以在编译期间把你的 HTML 代码和 TypeScript 代码转换成高效的 JavaScript 代码,这样浏览器就可以直接下载和运行它们。

使用命令行工具 ngc 来编译你的应用之后,就可以直接启动一个模块工厂,这意味着你不必再在 JavaScript 打包文件中包含 Angular 编译器。

可以与即时(JIT)编译对比一下。

Angular 元素

被包装成自定义元素的 Angular 组件

参见 Angular 元素 一文。

注解

一种为类提供元数据的结构。参见 装饰器

属性型指令

指令 (directive)的一种。可以监听或修改其它 HTML 元素、特性 (attribute)、属性 (property)、组件的行为。通常用作 HTML 属性,就像它的名字所暗示的那样。

要了解更多,参见属性型指令

绑定 (binding)

广义上是指把变量或属性设置为某个数据值的一种实践。 在 Angular 中,一般是指数据绑定,它会根据数据对象属性的值来设置 DOM 对象的属性。

有时也会指在“令牌(Token)”和依赖提供商(Provider) 之间的依赖注入 绑定。

启动/引导 (bootstrap)

一种用来初始化和启动应用或系统的途径。

在 Angular 中,应用的根模块(AppModule)有一个 bootstrap 属性,用于指出该应用的的顶级组件。 在引导期间,Angular 会创建这些组件,并插入到宿主页面 index.html 中。 你可以在同一个 index.html 中引导多个应用,每个应用都有一些自己的组件。

要了解更多,参见引导一章。

大小写约定

Angular 使用大小写约定来区分多种名字,详见风格指南中的 "命名" 一节

  • 小驼峰形式(camelCase):符号、属性、方法、管道名、非组件指令的选择器、常量。

类装饰器

出现在类定义紧前方的装饰器语句用来声明该类具有指定的类型,并且提供适合该类型的元数据。

可以声明为下列类型之一:

  • @Component

类字段装饰器

出现在类定义中属性紧前方的装饰器语句用来声明该字段的类型。比如 @Input@Output

CLI

Angular CLI 是一个命令行工具,用于管理 Angular 的开发周期。它用于为工作空间项目创建初始的脚手架,并且运行生成器(schematics)来为初始生成的版本添加或修改各类代码。 该工具支持开发周期中的所有阶段,比如构建、测试、打包和部署。

  • 要开始使用 CLI 来创建新项目,参见快速起步

组件 (component)

一个带有 @Component 装饰器的类,和它的伴生模板关联在一起。组件及其模板共同定义了一个视图。

组件是指令的一种特例。@Component 装饰器扩展了 @Directive 装饰器,增加了一些与模板有关的特性。

Angular 的组件类负责暴露数据,并通过数据绑定机制来处理绝大多数视图的显示和用户交互逻辑。

要了解更多关于组件、模板和视图的知识,参见 架构 一章。

自定义元素(Custom element)

一种 Web 平台的特性,目前已经被绝大多数浏览器支持,在其它浏览器中也可以通过腻子脚本获得支持(参见浏览器支持)。

这种自定义元素特性通过允许你定义标签(其内容是由 JavaScript 代码来创建和控制的)来扩展 HTML。当自定义元素(也叫 Web Component)被添加到 CustomElementRegistry 之后就会被浏览器识别。

你可以使用 API 来转换 Angular 组件,以便它能够注册进浏览器中,并且可以用在你往 DOM 中添加的任意 HTML 中。 自定义元素标签可以把组件的视图(包括变更检测和数据绑定功能)插入到不受 Angular 控制的内容中。

参见动态组件

数据绑定 (data binding)

数据绑定允许应用程序将数据展示给用户,并对用户的操作(点击、触屏、按键)做出回应。

在数据绑定机制下,你只要声明一下 HTML 部件和数据源之间的关系,把细节交给框架去处理。 而以前的手动操作过程是:将数据推送到 HTML 页面中、添加事件监听器、从屏幕获取变化后的数据,并更新应用中的值。

更多的绑定形式,见模板语法

可声明对象

类的一种类型,你可以把它们添加到 NgModule 的 declarations 列表中。

你可以声明组件指令管道

不要声明:

  • 已经在其它 NgModule 中声明过的类。

装饰器(decorator | decoration)

一个函数,用来修饰紧随其后的类或属性定义。 装饰器(也叫注解)是 JavaScript 的一种语言特性,是一项位于阶段2(stage 2)的试验特性

Angular 定义了一些装饰器,用来为类或属性附加元数据,以便 Angular 了解那些类或属性的含义,以及要如何处理它们。

参见 类装饰器类属性装饰器

依赖注入(dependency injection)

依赖注入既是设计模式,同时又是一种机制:当应用程序的一些部件(即一些依赖)需要另一些部件时, 利用依赖注入来创建被请求的部件,并将它们注入到需要它们的部件中。

在 Angular 中,依赖通常是服务,但是也可以是值,比如字符串或函数。应用的注入器(它是在启动期间自动创建的)会使用该服务或值的配置好的提供商来按需实例化这些依赖。各个不同的提供商可以为同一个服务提供不同的实现。

要了解更多,参见依赖注入一章。

DI 令牌(Token)

一种用来查阅的令牌,它关联到一个依赖提供商,用于依赖注入系统中。

指令 (directive)

一个带有 @Directive 装饰器的类,它可以修改 DOM 结构或者修改 DOM 的属性和组件数据模型的属性。

指令类几乎总与 HTML 元素或属性 (attribute) 相关。 通常会把这些 HTML 元素或者属性 (attribute) 当做指令本身。 当 Angular 在 HTML 模板中发现某个指令时,会创建与之相匹配的指令类的实例,并且把这部分 DOM 的控制权交给它。

指令分为三类:

  • 组件使用 @Component(继承自 @Directive)为某个类关联一个模板。

Angular 提供了一些以 ng 为前缀的内置指令。你也可以创建新的指令来实现自己的功能。 你可以为自定义指令关联一个选择器(一种形如 <my-directive> 的 HTML 标记),以扩展模板语法,从而让你能在应用中使用它。

领域特定语言(DSL)

一种特殊用途的库或 API,参见领域特定语言词条。

Angular 在一些相关的应用领域中用领域特定语言扩展了 TypeScript,这些 DSL 都定义在 NgModule 中,比如 动画表单路由与导航

动态组件加载

一种在运行期间把组件添加到 DOM 中的技术,它需要你从编译期间排除该组件,然后,当你把它添加到 DOM 中时,再把它接入 Angular 的变更检测与事件处理框架。

参见自定义组件,它提供了一种更简单的方式来达到相同的效果。

ECMAScript 语言

官方 JavaScript 语言规范

并不是所有浏览器都支持最新的 ECMAScript 标准,不过你可以使用转译器(比如TypeScript)来用最新特性写代码,然后它会被转译成可以在浏览器的其它版本上运行的代码。

要了解更多,参见浏览器支持页。

元素(Element)

Angular 定义了 ElementRef 类来包装与渲染有关的原生 UI 元素。这让你可以在大多数情况下使用 Angular 的模板和数据绑定机制来访问 DOM 元素,而不必再引用原生元素。

本文档中一般会使用元素(Element)来指代 ElementRef 的实例,而用 DOM 元素来指代直接访问的 DOM。

可以对比下自定义元素

入口点(Entry Point)

JavaScript 的 ID 用来让这段代码成为 NPM 包的一部分,从而让其它代码能导入它。 Angular 的每个范围化的包都有一个名叫 index 的入口点。

在 Angular 领域中,NgModules 起到同样的作用。

Injectable

Angular 中的类或其它概念使用依赖注入机制来提供依赖。要用 @Injectable 装饰器标出可注入的类。

无论服务还是组件,只要它们依赖服务,就必须标记为可注入的(可作为注入目标的)。其它内容(比如常量)也可以作为注入源。

注入器 (injector)

Angular 依赖注入系统中可以在缓存中根据名字查找依赖,也可以通过配置过的提供商来创建依赖。 启动过程中会自动为每个模块创建一个注入器,并被组件树继承。

  • 注入器会提供依赖的一个单例,并把这个单例对象注入到多个组件中。

要了解关于多级注入器的更多知识,参见依赖注入一章。

输入属性 (input)

当定义指令时,指令属性上的 @Input 装饰器让该属性可以作为属性绑定的目标使用。 数据值会从等号右侧的模板表达式所指定的数据源流入组件的输入属性。

要了解更多,参见输入与输出属性

插值表达式 (interpolation)

属性数据绑定 (property data binding) 的一种形式,位于双大括号中的模板表达式 (template expression)会被渲染成文本。 在被赋值给元素属性或者显示在元素标签中之前,这些文本可能会先与周边的文本合并,参见下面的例子。

content_copyMy current hero is {{hero.name}}

更多信息,见模板语法中的插值表达式

JavaScript

参见 ECMAScriptTypeScript

即时 (just-in-time, JIT) 编译

在启动期间,Angular 的即时编译器(JIT)会在运行期间把你的 HTML 和 TypeScript 代码转换成高效的 JavaScript 代码。 当你运行 Angular 的 CLI 命令 ng buildng serve 时,JIT 编译是默认选项,而且是开发期间的最佳实践。但是强烈建议你不要在生产环境下使用 JIT 模式,因为它会导致巨大的应用负担,从而拖累启动时的性能。

参见 预先 (AOT) 编译

惰性加载(Lazy loading)

惰性加载会把应用拆分成多个包并且按需加载它们,从而提高应用加载速度。 比如,一些依赖可以根据需要进行惰性加载,与之相对的是那些 "急性加载" 的模块,它们是根模块所要用的,因此会在启动期间加载。 同样,路由器只有当父视图激活时才需要加载子视图,你还可以构建一些自定义元素,它们也可以在需要时才加载进 Angular 应用。

库(Library)

一种 Angular 项目。用来让其它 Angular 应用包含它,以提供各种功能。库不是一个完整的 Angular 应用,不能独立运行。

  • 库的开发者可以使用 CLI 在现有的 工作空间 中 generate 新库的脚手架,还能把库发布为 npm 包。

生命周期钩子(Lifecycle hook)

一种接口,它允许你监听指令组件的生命周期,比如创建、更新和销毁等。

每个接口只有一个钩子方法,方法名是接口名加前缀 ng。例如,OnInit接口的钩子方法名为 ngOnInit

Angular 会按以下顺序调用钩子方法:

  • ngOnChanges - 在输入属性 (input)/输出属性 (output)的绑定值发生变化时调用。

要了解更多,参见生命周期钩子页。

模块 (module)

通常,模块会收集一组专注于单一目的的代码块。Angular 既使用 JavaScript 的标准模块,也定义了 Angular 自己的模块,也就是 NgModule

在 JavaScript (ECMAScript) 中,每个文件都是一个模块,该文件中定义的所有对象都属于这个模块。这些对象可以导出为公共对象,而这些公共对象可以被其它模块导入后使用。

Angular 就是用一组 JavaScript 模块(或叫库)的形式发布的。每个 Angular 库都带有 @angular 前缀。 使用 NPM 包管理器安装它们,并且使用 JavaScript 的 import 声明语句从中导入各个部件。

参见 Angular NgModule

NgModule

一种带有 @NgModule 装饰器的类定义,它会声明并提供一组专注于特定功能的代码块,比如业务领域、工作流或一组紧密相关的能力集等。

JavaScript 模块一样,NgModule 能导出那些可供其它 NgModule 使用的功能,也可以从其它 NgModule 中导入其公开的功能。

NgModule 类的元数据中包括一些供应用使用的组件、指令和管道,以及导入、导出列表。参见可声明对象

NgModule 通常会根据它导出的内容决定其文件名,比如,Angular 的 DatePipe 类就属于 date_pipe.ts 文件中一个名叫 date_pipe 的特性模块。 你可以从 Angular 的范围化包中导入它们,比如 @angular/core

每个 Angular 应用都有一个根模块。通常,这个类会命名为 AppModule,并且位于一个名叫 app.module.ts 的文件中。

要了解更多,参见 NgModules

Observable(可观察对象)

一个多值生成器,这些值会被推送给订阅者。 Angular 中到处都会用到异步事件处理。你要通过调用可观察对象的 subscribe() 方法来订阅它,从而让这个可观察对象得以执行,你还要给该方法传入一些回调函数来接收 "有新值"、"错误" 或 "完成" 等通知。

可观察对象可以把任意类型的一个或多个值传给订阅者,无论是同步(就像函数把值返回给它的调用者一样)还是异步。 一旦生成了新值,订阅者就会收到通知,并且还会收到错误或正常完成的通知。

Angular 使用一个名叫响应式扩展 (RxJS)的第三方包来实现这些功能。

要了解更多,参见可观察对象

观察者(Observer)

传给可观察对象 的 subscribe() 方法的一个对象,其中定义了订阅者的一组回调函数。

输出属性 (output)

当定义指令时,指令属性上的 @Output 装饰器会让该属性可用作事件绑定的目标

事件从该属性流到等号右侧指定的模板表达式中。

要了解更多,参见输入与输出属性

管道 (pipe)

一个带有 @Pipe 装饰器的类,它定义了一个函数,用来把输入值转换成输出值,以显示在视图中。

Angular 定义了很多管道,并且你还可可以自定义新的管道。

要了解更多,参见管道页。

腻子脚本(polyfill)

一个 NPM 包,它负责弥补浏览器 JavaScript 实现与最新标准之间的 "缝隙"。参见浏览器支持页,以了解要在特定平台支持特定功能时所需的腻子脚本。

项目(Project)

在 Angular 中,是指工作空间中的一个文件夹,它包含 Anuglar 应用或。 每个工作空间中可以包含多个项目。工作空间中的每个应用都可以使用同一工作空间中的任意

提供商 (provider)

一种可注入服务的提供商。更准确的说是一个与 DI 令牌相关的代码 "菜谱",注入器会使用这个菜谱来创建它所依赖的那些类的实例。

Angular 会为其自带的服务在每个注入器中注册它自己的提供商。你也可以自己注册应用所需的自己的服务提供商。

参见服务依赖注入

响应式表单 (reactive forms)

通过组件中代码构建 Angular 表单的一种技术。 另一种技术是模板驱动表单

构建响应式表单时:

  • 组件是“真理之源”。表单验证在组件代码中定义。

动态表单非常强大、灵活,它在复杂数据输入的场景下尤其好用,例如动态的生成表单控制器。

路由器 (router)

一种工具,用来配置和实现 Angular 应用中各个状态和视图之间的导航。

路由器模块是一个 NgModule,它提供在应用视图间导航时需要的服务提供商和指令。路由组件是一种组件,它导入了路由模块,并且其模板中包含 RouterOutlet 元素,路由器生成的视图就会被显示在那里。

路由器定义了在单页面中的各个视图之间导航的方式,而不是在页面之间。它会解释类似 URL 的链接,以决定该创建或销毁哪些视图,以及要加载或卸载哪些组件。它让你可以在 Angular 应用中获得惰性加载的好处。

要了解更多,参见路由与导航

路由器模块 (router module)

一个独立的 Angular 模块,用来提供导航所需的服务提供商和指令。

更多信息,见路由与导航

路由出口

一种指令,它在路由组件的模板中充当占位符的角色,Angular 会根据当前的路由状态动态填充它。

路由组件 (routing component)

一个带有 RouterOutlet 的 Angular 组件,根据路由器导航来显示视图。

更多信息,见路由与导航

Schematic

A scaffolding library that defines how to generate or transform a programming project by creating, modifying, refactoring, or moving files and code.

The Angular CLI uses schematics to generate and modify Angular projects and parts of projects.

范围化包 (scoped package)

一种把相关的 NPM 包分组到一起的方式。 Angular 的 NgModule 都是在一些以 @angular 为范围名的范围化包中发布的。比如 @angular/core@angular/common@angular/forms@angular/router

和导入普通包相同的方式导入范围化包。

architecture/src/app/app.component.ts (import)

content_copyimport { Component } from '@angular/core';

服务 (service)

在 Angular 中,服务就是一个带有 @Injectable 装饰器的类,它封装了可以在应用程序中复用的非 UI 逻辑和代码。 Angular 把组件和服务分开,是为了增进模块化程度和可复用性。

@Injectable 元数据让服务类能用于依赖注入机制中。可注入的类是用提供商进行实例化的,模块中包含一个提供商列表,它可以为依赖它的组件或其它服务提供该服务的具体类。

要了解更多,参见服务简介

结构型指令(Structural directives)

一种指令类型,它能通过修改 DOM (添加、删除或操纵元素及其子元素)来修整或重塑 HTML 的布局。

要了解更多,参见结构型指令页。

订阅者(Subscriber)

一个函数,用于定义如何获取或生成要发布的值或消息。 当有消费者调用可观察对象的 subscribe() 方法时,该函数就会执行。

订阅一个可观察对象就会触发该对象的执行、为该对象关联一些回调函数,并创建一个 Subscription(订阅记录)对象来让你能取消订阅。

subscribe() 方法接收一个 JavaScript 对象(叫做 "观察者"),其中最多可以包含三个回调,分别对应可观察对象可以发出的几种通知类型:

  • next(下一个)通知会发送一个值,比如数字、字符串、对象等。

模板 (template)

模板用来定义如何在 HTML 中渲染组件的视图

模板会把纯 HTML 和 Angular 的数据绑定语法、指令模板表达式组合起来。Angular 的元素会插入或计算那些值,以便在页面显示出来之前修改 HTML 元素。

模板通过 @Component 装饰器与组件类关联起来。其 HTML 可以作为 template 属性的值用内联的方式提供,也可以通过 templateUrl 属性链接到一个独立的 HTML 文件。

TemplateRef 对象表示的其它模板用来定义一些备用视图或内嵌视图,它们可以来自多个不同的组件。

模板驱动表单 (template-driven forms)

一项在视图中使用 HTML 表单和输入类元素构建 Angular 表单的技术。 它的替代方案是响应式表单

当构建模板驱动表单时:

  • 模板是“真理之源”。使用属性 (attribute) 在单个输入元素上定义验证规则。

模板驱动表单便捷、快速、简单,是很多基础型数据输入表单的最佳选择。

要了解如何构建模板驱动表单的更多信息,参见表单页。

模板表达式 (template expression)

Angular 用来在数据绑定 (data binding)内求值的、类似JavaScript 语法的表达式。

模板语法一章的模板表达式部分了解更多模板表达式的知识。

令牌(Token)

用于高效查表的不透明标识符(译注:不透明是指你不必了解其细节)。在 Angular 中,DI 令牌用于在依赖注入系统中查找服务提供商

转译(transpile)

一种翻译过程,它会把一个版本的 JavaScript 转换成另一个版本,比如把下一版的 ES2015 转换成老版本的 ES5。

TypeScript 语言

TypeScript 是一种程序设计语言,以其可选类型系统著称。 该类型系统提供了编译时类型检查和强大的工具支持(比如代码补齐、重构、内联文档和智能搜索等)。 许多代码编辑器和 IDE 都原生支持 TypeScript 或通过插件提供支持。

TypeScript 是 Angular 的首选语言。要了解更多,参见 typescriptlang.org

视图 (view)

视图是指显示元素的最小分组单位,它们会被同时创建和销毁。

Angular 在一个或多个指令 (directive) 的控制下渲染视图, 尤其是组件 (component) 指令及其模板 (template)

具体实现上,视图由一个与该组件相关的 ViewRef 实例表示。 属于某个组件的视图叫做宿主视图。 通常会把视图组织成一些视图树(view hierarchies)。

视图中各个元素的属性可以动态修改以响应用户的操作,而这些元素的结构(数量或顺序)则不能。你可以通过在它们的视图容器中插入、移动或移除内嵌视图来修改这些元素的结构。

当用户在应用中导航时(比如使用路由器),视图树可以动态加载或卸载。

视图树(View hierarchy)

一棵相关视图的树,它们可以作为一个整体行动。其根视图就是组件的宿主视图宿主视图可以是内嵌视图树的根,它被收集到了宿主组件上的一个视图容器(ViewContainerRef)中。视图树是 Angular 变更检测的关键部件之一。

视图树和组件树并不是一一对应的。那些嵌入到指定视图树上下文中的视图也可能是其它组件的宿主视图。那些组件可能和宿主组件位于同一个 NgModule 中,也可能属于其它 NgModule。

Web 组件

参见自定义元素

工作空间(Workspace)

在 Angular 中,是指一个包含项目(即应用和库)的文件夹。 CLI 的 new命令会创建一个包含项目的工作空间。而用来创建或操作应用和库的 addgenerate 命令必须在工作空间目录下才能执行。

区域 (zone)

一组异步任务的执行上下文。它对于调试、性能分析和测试那些包含了异步操作(如事件处理、承诺、远程服务器调用等)的应用是非常有用的。

Angular 应用会运行在一个 Zone 区域中,在这里,它可以对异步事件做出反应,可以通过检查数据变更、利用数据绑定 (data bindings) 来更新信息显示。

Zone 的使用方可以在异步操作完成之前或之后采取行动。

要了解更多,参见 Brian Ford 的视频