学习资料来自 Angular.cn 与 Angular.io。
开发指南-词汇表
Angular 模块 (Angular module)
Angular 模块是带有 @NgModule
装饰器函数的类,它帮助我们将一个应用程序组织成内聚的功能模块群。
@NgModule
接收一个元数据对象,该对象告诉 Angular 如何编译和运行模块代码。@NgModule
标记出该模块拥有的组件、指令和管道, 并把它们的一部分公开出去,以便外部组件使用它们。@NgModule
可以向应用的依赖注入器中添加服务提供商 (service providers)。
一个 Angular 模块还包含应用程序需要的外部 Angular 模块的列表,例如 FormsModule
。
每个 Angular 应用程序都有一个应用程序根模块类。按规约这个类的名字为 AppModule
,存放在名为 app.module.ts
的文件。
启动/引导 (bootstrap)
通过应用程序根 Angular 模块来启动 Angular 应用程序。启动过程标识应用的顶级“根”组件 (component),也就是应用加载的第一个组件。
你可以在同一个 index.html
中引导多个应用,每个应用都有它自己的顶级根组件。
组件 (component)
组件是一个 Angular 类,用于把数据展示到视图 (view),并处理几乎所有的视图显示和交互逻辑。
组件是 Angular 系统中最重要的基本构造块之一。它其实是一个拥有模板 (template) 的指令 (directive)。
需要将 @Component
装饰器应用到一个组件类,从而把必要的组件元数据附加到类上。 Angular 会需要元数据来创建一个组件实例,并把组件的模板作为视图渲染出来。
根据 "MVC" 和 "MVVM" 模式,组件充当了“控制器 (controller) ”和“视图模型 (view model) ”的角色。
装饰器 (decorator | decoration)
装饰器是一个函数,它将元数据添加到类、类成员(属性、方法)和函数参数。
装饰器的作用域会被限制在它所装饰的语言特性(the language feature that it decorates)。在同一文件中,装饰器不会“泄露”到它后面的其它类。
永远别忘了在装饰器后面加括号()。
依赖注入 (dependency injection)
依赖注入既是设计模式,同时又是一种机制:当应用程序的一些部件需要另一些部件时, 利用依赖注入来创建被请求的部件,并将它们注入到发出请求的部件中。
Angular 开发者构建应用程序时的首选方法是:定义许多简单部件, 每个部件只做一件事并做好它,然后在运行时把它们装配在一起组成应用程序。
这些部件通常会依赖其它部件。一个 Angular 组件 (component) 可能依赖一个服务部件来获取数据或执行运算。
如果部件 “A” 要靠另一个部件 “B” 才能工作,我们称 “A” 依赖 “B” ,“B” 是 “A” 的依赖。
可以要求“依赖注入系统”为我们创建 “A” 并处理所有依赖。如果 “A” 需要 “B” ,“B” 需要 “C ”, 系统将解析这个依赖链,返回一个完全准备好的 “A” 实例。
在 Angular 内核中有一个注入器 (injector),当请求时返回依赖值。表达式 injector.get(token)
返回与该 token(令牌)参数相关的值。令牌是一个 Angular 中的类型 (InjectionToken
)。
我们很少直接处理令牌。 绝大多数方法都接受类名 (
Foo
) 或字符串 ("foo"), Angular 会把这些类名称和字符串转换成令牌。当调用injector.get(Foo)
时,注入器返回用Foo类生成的令牌所对应的依赖值,该依赖值通常是Foo
类的实例。
注入器 (Injector
) 维护一个令牌到依赖值的映射表。 如果注入器找不到给定令牌对应的依赖值,它会使用提供商 (Provider
) 创建一个依赖值。提供商 (provider
)是一个“菜谱”,用于创建特定令牌对应的依赖实例。
只有当注入器内部提供商注册表中存在与令牌对应的提供商时, 注入器才能为这个令牌创建一个依赖值。所以注册提供商是一个非常关键的准备步骤。
更多信息参见依赖注入 (dependency injection)。
指令 (directive)
指令是一个 Angular 类,负责创建和重塑浏览器 DOM 中的 HTML 元素,并与之互动。 指令是 Angular 中最基本的特性之一。
指令几乎总与 HTML 元素或属性 (attribute) 相关。 我们通常把这些关联到的 HTML 元素或者属性 (attribute) 当做指令本身。 当 Angular 在 HTML 模板中遇到一个指令的时候, 它会创建匹配的指令类的实例,并把浏览器中这部分 DOM 的控制权交给它。
你可以自定义 HTML 标签(例如 <my-directive>
)来关联自定义指令。 然后,可以像写原生 HTML 一样把这些自定义标签放到 HTML 模板里。 这样,指令就变成了 HTML 本身的拓展。
指令分为三类:
-
组件 (component)
-
属性型指令 (attribute directive)
可以监控和修改其它 HTML 元素、 HTML 属性 (attribute)、 DOM 属性 (property)、组件等行为。它们通常表示为 HTML 属性 (attibute),故名。 -
结构型指令 (structural directive)
负责塑造或重塑 HTML 布局。这一般是通过添加、删除或者操作 HTML 元素及其子元素来实现的。
生命周期钩子 (lifecycle hook)
指令 (directive) 和组件 (component) 具有生命周期,由 Angular 在创建、更新和销毁它们的过程中进行管理。
你可以通过实现一个或多个生命周期钩子接口,切入到生命周期中的关键时间点。
每个接口只有一个钩子方法,方法名是接口名加前缀 ng
。例如,OnInit
接口的钩子方法名为 ngOnInit
。
模块 (module)
模块是一个内聚的代码块,具有单一用途。
Angular 应用程序是模块化的。
一般来说,我们用模块来组装应用程序,这些模块包含自己编写的模块和从其它地方获取的模块。
模块会导出 (export
) 代码中的某些值,最典型的就是类。 模块如果需要什么东西,那就导入 (import
) 它。
Angular 的模块结构和导入/导出语法是基于 ES2015 模块标准的。
采用这个标准的应用程序需要一个模块加载器来按需加载模块,并解析模块间的依赖关系。 Angular 不附带模块加载器,也不偏爱任何第三方库(虽然大多数例子使用SystemJS)。
模块一般与它定义导出物的文件同名。例如 date_pipe
模块位于 date_pipe.ts
文件中。
你很少需要直接访问 Angular 的特性模块。 而通常会从一个 Angular 范围化包 (scoped package)中导入它们,例如 @angular/core
。
服务 (service)
服务是一个具有特定功能的类,它用于封装不与任何特定视图相关的数据和逻辑,或者用于在组件之间共享数据和逻辑。
模板 (template)
模板是一大块 HTML。Angular 会在指令 (directive) 特别是组件 (component) 的支持和指导下,用它来渲染视图 (view)。
视图 (view)
视图是屏幕中一小块,用来显示信息并响应用户动作,例如点击、移动鼠标和按键。
Angular 在一个或多个指令 (directive) 的控制下渲染视图, 尤其是组件 (component) 指令及其模板 (template)。 组件扮演着非常重要的角色,我们甚至经常会为了方便, 直接用视图作为组件的代名词。
视图一般包含其它视图,在用户在应用程序中导航时, 任何视图都可能被动态加载或卸载,这一般会在路由器 (router) 的控制下进行。
总结
Angular 的难点在于对编程思想和概念的理解。
网友评论