非常教程

AngularJS参考手册

Angular 模块

特性模块的分类

前提条件

对下列概念有基本的理解:

  • 特性模块
  • JavaScript 模块与 NgModules。
  • 常用模块。

下面是特性模块的五个常用分类,包括五组:

  • 领域特性模块。
  • 带路由的特性模块。
  • 路由模块。
  • 服务特性模块
  • 可视部件特性模块。

虽然下面的指南中描述了每种类型的使用及其典型特征,但在实际的应用中,你还可能看到它们的混合体。

特性模块

指导原则

领域

领域特性模块用来给用户提供应用程序领域中特有的用户体验,比如编辑客户信息或下订单等。它们通常会有一个顶级组件来充当该特性的根组件,并且通常是私有的。用来支持它的各级子组件。领域特性模块大部分由 declarations 组成,只有顶级组件会被导出。领域特性模块很少会有服务提供商。如果有,那么这些服务的生命周期必须和该模块的生命周期完全相同。领域特性模块通常会由更高一级的特性模块导出且只导出一次。对于缺少路由的小型应用,它们可能只会被根模块 AppModule 导入一次。

路由

带路由的特性模块是一种特殊的领域特性模块,但它的顶层组件会作为路由导航时的目标组件。根据这个定义,所有惰性加载的模块都是路由特性模块。带路由的特性模块不会导出任何东西,因为它们的组件永远不会出现在外部组件的模板中。惰性加载的路由特性模块不应该被任何模块导入。如果那样做就会导致它被立即加载,破坏了惰性加载的设计用途。 也就是说你应该永远不会看到它们在 AppModule 的 imports 中被引用。 立即加载的路由特性模块必须被其它模块导入,以便编译器能了解它所包含的组件。路由特性模块很少会有服务提供商,原因参见惰性加载的特性模块中的解释。如果那样做,那么它所提供的服务的生命周期必须与该模块的生命周期完全相同。不要在路由特性模块或被路由特性模块所导入的模块中提供全应用级的单例服务。

路由

路由模块为其它模块提供路由配置,并且把路由这个关注点从它的配套模块中分离出来。路由模块通常会做这些:定义路由。把路由配置添加到该模块的 imports 中。把路由守卫和解析器的服务提供商添加到该模块的 providers 中。路由模块应该与其配套模块同名,但是加上“Routing”后缀。比如,foo.module.ts 中的 FooModule 就有一个位于 foo-routing.module.ts 文件中的 FooRoutingModule 路由模块。 如果其配套模块是根模块 AppModule,AppRoutingModule 就要使用 RouterModule.forRoot(routes) 来把路由器配置添加到它的 imports 中。 所有其它路由模块都是子模块,要使用 RouterModule.forChild(routes)。按照惯例,路由模块会重新导出这个 RouterModule,以便其配套模块中的组件可以访问路由器指令,比如 RouterLink 和 RouterOutlet。路由模块没有自己的可声明对象。组件、指令和管道都是特性模块的职责,而不是路由模块的。路由模块只应该被它的配套模块导入。

服务

服务模块提供了一些工具服务,比如数据访问和消息。理论上,它们应该是完全由服务提供商组成的,不应该有可声明对象。Angular 的 HttpClientModule 就是一个服务模块的好例子。根模块 AppModule 是唯一的可以导入服务模块的模块。

窗口部件

窗口部件模块为外部模块提供组件、指令和管道。很多第三方 UI 组件库都是窗口部件模块。窗口部件模块应该完全由可声明对象组成,它们中的大部分都应该被导出。窗口部件模块很少会有服务提供商。如果任何模块的组件模板中需要用到这些窗口部件,就请导入相应的窗口部件模块。

  • 定义路由。
  • 把路由配置添加到该模块的 imports 中。
  • 把路由守卫和解析器的服务提供商添加到该模块的 providers 中。
  • 路由模块应该与其配套模块同名,但是加上“Routing”后缀。比如,foo.module.ts 中的 FooModule 就有一个位于 foo-routing.module.ts 文件中的 FooRoutingModule 路由模块。 如果其配套模块是根模块 AppModuleAppRoutingModule 就要使用 RouterModule.forRoot(routes) 来把路由器配置添加到它的 imports 中。 所有其它路由模块都是子模块,要使用 RouterModule.forChild(routes)
  • 按照惯例,路由模块会重新导出这个 RouterModule,以便其配套模块中的组件可以访问路由器指令,比如 RouterLinkRouterOutlet
  • 路由模块没有自己的可声明对象。组件、指令和管道都是特性模块的职责,而不是路由模块的。

路由模块只应该被它的配套模块导入。服务服务模块提供了一些工具服务,比如数据访问和消息。理论上,它们应该是完全由服务提供商组成的,不应该有可声明对象。Angular 的 HttpClientModule 就是一个服务模块的好例子。 根模块 AppModule 是唯一的可以导入服务模块的模块。窗口部件窗口部件模块为外部模块提供组件、指令和管道。很多第三方 UI 组件库都是窗口部件模块。 窗口部件模块应该完全由可声明对象组成,它们中的大部分都应该被导出。 窗口部件模块很少会有服务提供商。 如果任何模块的组件模板中需要用到这些窗口部件,就请导入相应的窗口部件模块。

下表中汇总了各种特性模块类型的关键特征。

特性模块

声明 declarations

提供商 providers

导出什么

被谁导入

领域

罕见

顶级组件

特性模块,AppModule

路由

罕见

路由

是(守卫)

RouterModule

特性(供路由使用)

服务

AppModule

窗口部件

罕见

特性


关于 NgModule 的更多知识

你可能还对下列内容感兴趣:

  • 使用 Angular 路由器惰性加载模块。
  • 服务提供商。
AngularJS

Angular 是一个开发平台。它能帮你更轻松的构建 Web 应用。Angular 集声明式模板、依赖注入、端到端工具和一些最佳实践于一身,为你解决开发方面的各种挑战。

AngularJS目录

1.快速上手 | quick start
2.语言服务
3.安全
4.环境准备与部署
5.Service Worker
6.保持最新
7.从 AngularJS 升级
8.服务端渲染
9.Visual Studio 2015 快速上手
10.风格指南
11.国际化
12.测试
13.路由与导航
14. 教程 | Tutorial
15.架构
16.组件与模板
17.表单
18.可观察对象与RxJS
19.引导启动
20.Angular 模块
21.依赖注入
22.HttpClient
23.词汇表
24.AngularJS 应用
25.AngularJS 模块
26.AngularJS 事件
27.AngularJS HTML DOM
28.AngularJS 过滤器
29.AngularJS 控制器
30.AngularJS 指令
31.AngularJS 表达式
32.AngularJS 简介
33.AngularJS 参考手册
34.AngularJS 实例
35.AngularJS 输入验证
36.AngularJS 表单
37.AngularJS SQL
38.AngularJS 表格
39.AngularJS Http
40.AngularJS 包含
41.AngularJS Bootstrap
42.AngularJS API
43.AngularJS ng-checked 指令
44.AngularJS ng-change 指令
45.AngularJS ng-blur 指令
46.AngularJS ng-bind-template 指令
47.AngularJS ng-bind-html 指令
48.AngularJS ng-bind 指令
49.AngularJS ng-app 指令
50.AngularJS Scope(作用域)
51.AngularJS ng-model 指令
52.AngularJS ng-dblclick 指令
53.AngularJS ng-cut 指令
54.AngularJS ng-csp 指令
55.AngularJS ng-copy 指令
56.AngularJS ng-controller 指令
57.AngularJS ng-cloak 指令
58.AngularJS ng-click 指令
59.AngularJS ng-class-odd 指令
60.AngularJS ng-class-even 指令
61.AngularJS ng-class 指令
62.AngularJS ng-keyup 指令
63.AngularJS ng-keypress 指令
64.AngularJS ng-keydown 指令
65.AngularJS ng-init 指令
66.AngularJS ng-include 指令
67.AngularJS ng-if 指令
68.AngularJS ng-href 指令
69.AngularJS ng-hide 指令
70.AngularJS ng-focus 指令
71.AngularJS ng-disabled 指令
72.AngularJS ng-non-bindable 指令
73.AngularJS ng-mouseup 指令
74.AngularJS ng-mouseover 指令
75.AngularJS ng-mousemove 指令
76.AngularJS ng-mouseleave 指令
77.AngularJS ng-mouseenter 指令
78.AngularJS ng-mousedown 指令
79.AngularJS ng-model-options 指令
80.AngularJS ng-model 指令
81.AngularJS ng-list 指令
82.AngularJS ng-style 指令
83.AngularJS ng-srcset 指令
84.AngularJS ng-src 指令
85.AngularJS ng-show 指令
86.AngularJS ng-selected 指令
87.AngularJS ng-repeat 指令
88.AngularJS ng-readonly 指令
89.AngularJS ng-paste 指令
90.AngularJS ng-options 指令
91.AngularJS ng-open 指令
92.AngularJS ng-value 指令
93.AngularJS ng-switch 指令
94.AngularJS ng-submit 指令
95.AngularJS 服务(Service)
96.AngularJS Select(选择框)
97.AngularJS 动画
98.AngularJS 依赖注入