feat: 翻译了一部分 NgModule 的内容
This commit is contained in:
Zhicheng Wang
parent
935fdf30dc
commit
b9c59b2249
|
|
@ -1,5 +1,7 @@
|
|||
# Entry Components
|
||||
|
||||
# 入口组件
|
||||
|
||||
#### Prerequisites:
|
||||
|
||||
#### 前提条件：
|
||||
|
|
@ -10,27 +12,44 @@ A basic understanding of the following concepts:
|
|||
|
||||
* [Bootstrapping](guide/bootstrapping).
|
||||
|
||||
[引导](guide/bootstrapping)。
|
||||
|
||||
<hr />
|
||||
|
||||
An entry component is any component that Angular loads imperatively, (which means you’re not referencing it in the template), by type. You specify an entry component by bootstrapping it in an NgModule, or including it in a routing definition.
|
||||
|
||||
从分类上说，入口组件是 Angular 命令式加载的（也就是说你没有在模板中引用过它）任意组件，
|
||||
你可以通过在 NgModule 中引导它，或者把它包含在路由定义中来指定入口组件。
|
||||
|
||||
<div class="alert is-helpful">
|
||||
|
||||
To contrast the two types of components, there are components which are included in the template, which are declarative. Additionally, there are components which you load imperatively; that is, entry components.
|
||||
|
||||
对比一下这两种组件类型：有一类组件被包含在模板中，它们是声明式加载的；另一类组件你会命令式加载它，这就是入口组件。
|
||||
|
||||
</div>
|
||||
|
||||
There are two main kinds of entry components:
|
||||
|
||||
入口组件有两种主要的类型：
|
||||
|
||||
* The bootstrapped root component.
|
||||
|
||||
引导用的根组件。
|
||||
|
||||
* A component you specify in a route definition.
|
||||
|
||||
在路由定义中指定的组件。
|
||||
|
||||
## A bootstrapped entry component
|
||||
|
||||
## 引导用的入口组件
|
||||
|
||||
The following is an example of specifying a bootstrapped component,
|
||||
`AppComponent`, in a basic `app.module.ts`:
|
||||
|
||||
下面这个例子中指定了一个引导用组件 `AppComponent`，位于基本的 `app.module.ts` 中：
|
||||
|
||||
```typescript
|
||||
|
||||
@NgModule({
|
||||
|
|
@ -53,23 +72,37 @@ A bootstrapped component is an entry component
|
|||
that Angular loads into the DOM during the bootstrap process (application launch).
|
||||
Other entry components are loaded dynamically by other means, such as with the router.
|
||||
|
||||
可引导组件是一个入口组件，Angular 会在引导过程中把它加载到 DOM 中。
|
||||
其它入口组件是在其它时机动态加载的，比如用路由器。
|
||||
|
||||
Angular loads a root `AppComponent` dynamically because it's listed by type in `@NgModule.bootstrap`.
|
||||
|
||||
Angular 会动态加载根组件 `AppComponent`，是因为它的类型作为参数传给了 `@NgModule.bootstrap` 函数。
|
||||
|
||||
<div class="alert is-helpful">
|
||||
|
||||
A component can also be bootstrapped imperatively in the module's `ngDoBootstrap()` method.
|
||||
The `@NgModule.bootstrap` property tells the compiler that this is an entry component and
|
||||
it should generate code to bootstrap the application with this component.
|
||||
|
||||
组件也可以在该模块的 `ngDoBootstrap()` 方法中进行命令式引导。
|
||||
`@NgModule.bootstrap` 属性告诉编译器，这里是一个入口组件，它应该生成代码，来使用这个组件引导该应用。
|
||||
|
||||
</div>
|
||||
|
||||
A bootstrapped component is necessarily an entry component because bootstrapping is an imperative process, thus it needs to have an entry component.
|
||||
|
||||
引导用的组件必须是入口组件，因为引导过程是命令式的，所以它需要一个入口组件。
|
||||
|
||||
## A routed entry component
|
||||
|
||||
## 路由到的入口组件
|
||||
|
||||
The second kind of entry component occurs in a route definition like
|
||||
this:
|
||||
|
||||
入口组件的第二种类型出现在路由定义中，就像这样：
|
||||
|
||||
```typescript
|
||||
|
||||
const routes: Routes = [
|
||||
|
|
@ -83,38 +116,72 @@ const routes: Routes = [
|
|||
|
||||
A route definition refers to a component by its type with `component: CustomerListComponent`.
|
||||
|
||||
路由定义使用组件类型引用了一个组件：`component: CustomerListComponent`。
|
||||
|
||||
All router components must be entry components. Because this would require you to add the component in two places (router and `entryComponents`) the Compiler is smart enough to recognize that this is a router definition and automatically add the router component into `entryComponents`.
|
||||
|
||||
所有路由组件都必须是入口组件。这需要你把同一个组件添加到两个地方（路由中和 `entryComponents` 中），但编译器足够聪明，可以识别出这里是一个路由定义，因此它会自动把这些路由组件添加到 `entryComponents` 中。
|
||||
|
||||
## The `entryComponents` array
|
||||
|
||||
## `entryComponents` 数组
|
||||
|
||||
Though the `@NgModule` decorator has an `entryComponents` array, most of the time
|
||||
you won't have to explicitly set any entry components because Angular adds components listed in `@NgModule.bootstrap` and those in route definitions to entry components automatically. Though these two mechanisms account for most entry components, if your app happens to bootstrap or dynamically load a component by type imperatively,
|
||||
you must add it to `entryComponents` explicitly.
|
||||
|
||||
虽然 `@NgModule` 装饰器具有一个 `entryComponents` 数组，但大多数情况下你不用显式设置入口组件，因为 Angular 会自动把 `@NgModule.bootstrap` 中的组件以及路由定义中的组件添加到入口组件中。
|
||||
虽然这两种机制足够自动添加大多数入口组件，但如果你要用其它方式根据类型来命令式的引导或动态加载某个组件，你就必须把它们显式添加到 `entryComponents` 中了。
|
||||
|
||||
### `entryComponents` and the compiler
|
||||
|
||||
### `entryComponents` 和编译器
|
||||
|
||||
For production apps you want to load the smallest code possible.
|
||||
The code should contain only the classes that you actually need and
|
||||
exclude components that are never used. For this reason, the Angular compiler only generates code for components which are reachable from the `entryComponents`; This means that adding more references to `@NgModule.declarations` does not imply that they will necessarily be included in the final bundle.
|
||||
|
||||
对于生产环境的应用，你总是希望加载尽可能小的代码。
|
||||
这些代码应该只包含你实际使用到的类，并且排除那些从未用到的组件。因此，Angular 编译器只会为那些可以从 `entryComponents` 中直接或间接访问到的组件生成代码。
|
||||
这意味着，仅仅往 `@NgModule.declarations` 中添加更多引用，并不能表达出它们在最终的代码包中是必要的。
|
||||
|
||||
In fact, many libraries declare and export components you'll never use.
|
||||
For example, a material design library will export all components because it doesn’t know which ones you will use. However, it is unlikely that you will use them all.
|
||||
For the ones you don't reference, the tree shaker drops these components from the final code package.
|
||||
|
||||
实际上，很多库声明和导出的组件都是你从未用过的。
|
||||
比如，Material Design 库会导出其中的所有组件，因为它不知道你会用哪一个。然而，显然你也不打算全都用上。
|
||||
对于那些你没有引用过的，摇树优化工具就会把这些组件从最终的代码包中摘出去。
|
||||
|
||||
If a component isn't an _entry component_ and isn't found in a template,
|
||||
the tree shaker will throw it away. So, it's best to add only the components that are truly entry components to help keep your app
|
||||
as trim as possible.
|
||||
|
||||
如果一个组件既不是*入口组件*也不没有在模板中使用过，摇树优化工具就会把它扔出去。
|
||||
所以，最好只添加那些真正的入口组件，以便让应用尽可能保持精简。
|
||||
|
||||
<hr />
|
||||
|
||||
## More on Angular modules
|
||||
|
||||
## 关于 Angular 模块的更多知识
|
||||
|
||||
You may also be interested in the following:
|
||||
|
||||
你可能还对下列内容感兴趣：
|
||||
|
||||
* [Types of NgModules](guide/module-types)
|
||||
|
||||
[Angular 模块的分类](guide/module-types)
|
||||
|
||||
* [Lazy Loading Modules with the Angular Router](guide/lazy-loading-ngmodules).
|
||||
|
||||
[使用 Angular 路由器实现惰性加载模块](guide/lazy-loading-ngmodules).
|
||||
|
||||
* [Providers](guide/providers).
|
||||
|
||||
[服务提供商](guide/providers).
|
||||
|
||||
* [NgModules FAQ](guide/ngmodule-faq).
|
||||
|
||||
[NgModule 常见问题](guide/ngmodule-faq).
|
||||
|
|
|
|||
|
|
@ -1,7 +1,11 @@
|
|||
# Feature Modules
|
||||
|
||||
# 特性模块
|
||||
|
||||
Feature modules are NgModules for the purpose of organizing code.
|
||||
|
||||
特性模块是用来对代码进行组织的模块。
|
||||
|
||||
#### Prerequisites
|
||||
|
||||
#### 前提条件
|
||||
|
|
@ -12,15 +16,21 @@ A basic understanding of the following:
|
|||
|
||||
* [Bootstrapping](guide/bootstrapping).
|
||||
|
||||
[引导](guide/bootstrapping)。
|
||||
|
||||
* [JavaScript Modules vs. NgModules](guide/ngmodule-vs-jsmodule).
|
||||
|
||||
[JavaScript 模块与 NgModules](guide/ngmodule-vs-jsmodule).
|
||||
[JavaScript 模块与 NgModules](guide/ngmodule-vs-jsmodule)。
|
||||
|
||||
* [Frequently Used Modules](guide/frequent-ngmodules).
|
||||
|
||||
[常用模块](guide/frequent-ngmodules).
|
||||
|
||||
For the final sample app with a feature module that this page describes,
|
||||
see the <live-example></live-example>.
|
||||
|
||||
要想查看本页提到的这个带有特性模块的范例应用，参见 <live-example></live-example>。
|
||||
|
||||
<hr>
|
||||
|
||||
As your app grows, you can organize code relevant for a specific feature.
|
||||
|
|
@ -30,8 +40,14 @@ separate from other code. Delineating areas of your
|
|||
app helps with collaboration between developers and teams, separating
|
||||
directives, and managing the size of the root module.
|
||||
|
||||
随着应用的增长，你可能需要组织与特定应用有关的代码。
|
||||
这将帮你把特性划出清晰的边界。使用特性模块，你可以把与特定的功能或特性有关的代码从其它代码中分离出来。
|
||||
为应用勾勒出清晰的边界，有助于开发人员之间、小组之间的协作，有助于分离各个指令，并帮助管理根模块的大小。
|
||||
|
||||
## Feature modules vs. root modules
|
||||
|
||||
## 特性模块 vs. 根模块
|
||||
|
||||
A feature module is an organizational best practice, as opposed to a concept of the core Angular API. A feature module delivers a cohesive set of functionality focused on a
|
||||
specific application need such as a user workflow, routing, or forms.
|
||||
While you can do everything within the root module, feature modules
|
||||
|
|
@ -40,13 +56,20 @@ collaborates with the root module and with other modules through
|
|||
the services it provides and the components, directives, and
|
||||
pipes that it shares.
|
||||
|
||||
与核心的 Angular API 的概念相反，特性模块是最佳的组织方式。特性模块提供了聚焦于特定应用需求的一组功能，比如用户工作流、路由或表单。
|
||||
虽然你也可以用根模块做完所有事情，不过特性模块可以帮助你把应用划分成一些聚焦的功能区。特性模块通过它提供的服务以及共享出的组件、指令和管道来与根模块和其它模块合作。
|
||||
|
||||
## How to make a feature module
|
||||
|
||||
## 如何制作特性模块
|
||||
|
||||
Assuming you already have a CLI generated app, create a feature
|
||||
module using the CLI by entering the following command in the
|
||||
root project directory. Replace `CustomerDashboard` with the
|
||||
name of your module. You can omit the "Module" suffix from the name because the CLI appends it:
|
||||
|
||||
如果你已经有了 CLI 生成的应用，可以在项目的根目录下输入下面的命令来创建特性模块。把这里的 `CustomerDashboard` 替换成你的模块名。你可以从名字中省略掉“Module”后缀，因为 CLI 会自动追加上它：
|
||||
|
||||
```sh
|
||||
|
||||
ng generate module CustomerDashboard
|
||||
|
|
@ -55,6 +78,8 @@ ng generate module CustomerDashboard
|
|||
|
||||
This causes the CLI to create a folder called `customer-dashboard` with a file inside called `customer-dashboard.module.ts` with the following contents:
|
||||
|
||||
这会让 CLI 创建一个名叫 `customer-dashboard` 的文件夹，其中有一个名叫 `customer-dashboard.module.ts`，内容如下：
|
||||
|
||||
```typescript
|
||||
|
||||
import { NgModule } from '@angular/core';
|
||||
|
|
@ -72,9 +97,16 @@ export class CustomerDashboardModule { }
|
|||
|
||||
The structure of an NgModule is the same whether it is a root module or a feature module. In the CLI generated feature module, there are two JavaScript import statements at the top of the file: the first imports `NgModule`, which, like the root module, lets you use the `@NgModule` decorator; the second imports `CommonModule`, which contributes many common directives such as `ngIf` and `ngFor`. Feature modules import `CommonModule` instead of `BrowserModule`, which is only imported once in the root module. `CommonModule` only contains information for common directives such as `ngIf` and `ngFor` which are needed in most templates, whereas `BrowserModule` configures the Angular app for the browser which needs to be done only once.
|
||||
|
||||
无论根模块还是特性模块，其 NgModule 结构都是一样的。在 CLI 生成的特性模块中，在文件顶部有两个 JavaScript 的导入语句：第一个导入了 `NgModule`，它像根模块中一样让你能使用 `@NgModule` 装饰器；第二个导入了 `CommonModule`，它提供了很多像 `ngIf` 和 `ngFor` 这样的常用指令。
|
||||
特性模块导入 `CommonModule`，而不是 `BrowserModule`，后者只应该在根模块中导入一次。
|
||||
`CommonModule` 只包含常用指令的信息，比如 `ngIf` 和 `ngFor`，它们在大多数模板中都要用到，而 `BrowserModule` 为浏览器所做的应用配置只会使用一次。
|
||||
|
||||
The `declarations` array is available for you to add declarables, which
|
||||
are components, directives, and pipes that belong exclusively to this particular module. To add a component, enter the following command at the command line where `customer-dashboard` is the directory where the CLI generated the feature module and `CustomerDashboard` is the name of the component:
|
||||
|
||||
`declarations` 数组让你能添加专属于这个模块的可声明对象（组件、指令和管道）。
|
||||
要添加组件，就在命令行中输入如下命令，这里的 `customer-dashboard` 是一个目录，CLI 会把特性模块生成在这里，而 `CustomerDashboard` 就是该组件的名字：
|
||||
|
||||
```sh
|
||||
|
||||
ng generate component customer-dashboard/CustomerDashboard
|
||||
|
|
@ -83,44 +115,65 @@ ng generate component customer-dashboard/CustomerDashboard
|
|||
|
||||
This generates a folder for the new component within the customer-dashboard folder and updates the feature module with the `CustomerDashboardComponent` info:
|
||||
|
||||
这会在 `customer-dashboard` 中为新组件生成一个目录，并使用 `CustomerDashboardComponent` 的信息修改这个特性模块：
|
||||
|
||||
<code-example path="feature-modules/src/app/customer-dashboard/customer-dashboard.module.ts" region="customer-dashboard-component" title="src/app/customer-dashboard/customer-dashboard.module.ts" linenums="false">
|
||||
|
||||
</code-example>
|
||||
|
||||
The `CustomerDashboardComponent` is now in the JavaScript import list at the top and added to the `declarations` array, which lets Angular know to associate this new component with this feature module.
|
||||
|
||||
`CustomerDashboardComponent` 出现在了顶部的 JavaScript 导入列表里，并且被添加到了 `declarations` 数组中，它会让 Angular 把新组件和这个特性模块联系起来。
|
||||
|
||||
## Importing a feature module
|
||||
|
||||
## 导入特性模块
|
||||
|
||||
To incorporate the feature module into your app, you have to let the root module, `app.module.ts`, know about it. Notice the `CustomerDashboardModule` export at the bottom of `customer-dashboard.module.ts`. This exposes it so that other modules can get to it. To import it into the `AppModule`, add it to the imports in `app.module.ts` and to the `imports` array:
|
||||
|
||||
要想把这个特性模块包含进应用中，你还得让根模块 `app.module.ts` 知道它。注意，在 `customer-dashboard.module.ts` 的底部导出了 `CustomerDashboardModule`。这样就把它暴露出来，以便其它模块可以拿到它。要想把它导入到 `AppModule` 中，就把它加入 `app.module.ts` 的导入表中，并将其加入 `imports` 数组：
|
||||
|
||||
<code-example path="feature-modules/src/app/app.module.ts" region="app-module" title="src/app/app.module.ts" linenums="false">
|
||||
|
||||
</code-example>
|
||||
|
||||
Now the `AppModule` knows about the feature module. If you were to add any service providers to the feature module, `AppModule` would know about those too, as would any other feature modules. However, NgModules don’t expose their components.
|
||||
|
||||
现在 `AppModule` 知道这个特性模块了。如果你往该特性模块中加入过任何服务提供商，`AppModule` 也同样会知道它，其它模块中也一样。不过，NgModule 并不会暴露出它们的组件。
|
||||
|
||||
## Rendering a feature module’s component template
|
||||
|
||||
## 渲染特性模块的组件模板
|
||||
|
||||
When the CLI generated the `CustomerDashboardComponent` for the feature module, it included a template, `customer-dashboard.component.html`, with the following markup:
|
||||
|
||||
当 CLI 为这个特性模块生成 `CustomerDashboardComponent` 时，还包含一个模板 `customer-dashboard.component.html`，它带有如下页面脚本：
|
||||
|
||||
<code-example path="feature-modules/src/app/customer-dashboard/customer-dashboard/customer-dashboard.component.html" region="feature-template" title="src/app/customer-dashboard/customer-dashboard/customer-dashboard.component.html" linenums="false">
|
||||
|
||||
</code-example>
|
||||
|
||||
To see this HTML in the `AppComponent`, you first have to export the `CustomerDashboardComponent` in the `CustomerDashboardModule`. In `customer-dashboard.module.ts`, just beneath the `declarations` array, add an `exports` array containing `CustomerDashboardModule`:
|
||||
|
||||
要想在 `AppComponent` 中查看这些 HTML，你首先要在 `CustomerDashboardModule` 中导出 `CustomerDashboardComponent`。
|
||||
在 `customer-dashboard.module.ts` 中，`declarations` 数组的紧下方，加入一个包含 `CustomerDashboardModule` 的 `exports` 数组：
|
||||
|
||||
<code-example path="feature-modules/src/app/customer-dashboard/customer-dashboard.module.ts" region="component-exports" title="src/app/customer-dashboard/customer-dashboard.module.ts" linenums="false">
|
||||
|
||||
</code-example>
|
||||
|
||||
Next, in the `AppComponent`, `app.component.html`, add the tag `<app-customer-dashboard>`:
|
||||
|
||||
然后，在 `AppComponent` 的 `app.component.html` 中，加入标签 `<app-customer-dashboard>`：
|
||||
|
||||
<code-example path="feature-modules/src/app/app.component.html" region="app-component-template" title="src/app/app.component.html" linenums="false">
|
||||
|
||||
</code-example>
|
||||
|
||||
Now, in addition to the title that renders by default, the `CustomerDashboardComponent` template renders too:
|
||||
|
||||
现在，除了默认渲染出的标题外，还渲染出了 `CustomerDashboardComponent` 的模板：
|
||||
|
||||
<figure>
|
||||
<img src="generated/images/guide/feature-modules/feature-module.png" alt="feature module component">
|
||||
</figure>
|
||||
|
|
@ -129,10 +182,20 @@ Now, in addition to the title that renders by default, the `CustomerDashboardCom
|
|||
|
||||
## More on NgModules
|
||||
|
||||
## 关于 NgModule 的更多知识
|
||||
|
||||
You may also be interested in the following:
|
||||
|
||||
你可能还对下列内容感兴趣：
|
||||
|
||||
* [Lazy Loading Modules with the Angular Router](guide/lazy-loading-ngmodules).
|
||||
|
||||
[使用 Angular 路由器实现惰性加载模块](guide/lazy-loading-ngmodules).
|
||||
|
||||
* [Providers](guide/providers).
|
||||
|
||||
[服务提供商](guide/providers).
|
||||
|
||||
* [Types of Feature Modules](guide/module-types).
|
||||
|
||||
[Angular 模块的分类](guide/module-types)
|
||||
|
|
|
|||
|
|
@ -1,11 +1,15 @@
|
|||
# Frequently Used Modules
|
||||
|
||||
# 常用模块
|
||||
|
||||
#### Prerequisites
|
||||
|
||||
#### 前提条件
|
||||
|
||||
A basic understanding of [Bootstrapping](guide/bootstrapping).
|
||||
|
||||
对[引导](guide/bootstrapping)有基本的理解。
|
||||
|
||||
<hr>
|
||||
|
||||
An Angular app needs at least one module that serves as the root module.
|
||||
|
|
@ -13,6 +17,10 @@ As you add features to your app, you can add them in modules.
|
|||
The following are frequently used Angular modules with examples
|
||||
of some of the things they contain:
|
||||
|
||||
Angular 应用需要不止一个模块，它们都为根模块服务。
|
||||
如果你要把某些特性添加到应用中，可以通过添加模块来实现。
|
||||
下列是一些常用的 Angular 模块，其中带有一些其内容物的例子：
|
||||
|
||||
<table>
|
||||
|
||||
<tr>
|
||||
|
|
@ -27,12 +35,16 @@ of some of the things they contain:
|
|||
|
||||
Import it from
|
||||
|
||||
导入自
|
||||
|
||||
</th>
|
||||
|
||||
<th style="vertical-align: top">
|
||||
|
||||
Why you use it
|
||||
|
||||
为何使用
|
||||
|
||||
</th>
|
||||
|
||||
</tr>
|
||||
|
|
@ -55,6 +67,8 @@ of some of the things they contain:
|
|||
|
||||
When you want to run your app in a browser
|
||||
|
||||
当你想要在浏览器中运行应用时
|
||||
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
|
|
@ -77,6 +91,8 @@ of some of the things they contain:
|
|||
|
||||
When you want to use <code>NgIf</code>, <code>NgFor</code>
|
||||
|
||||
当你想要使用 <code>NgIf</code> 和 <code>NgFor</code> 时
|
||||
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
|
|
@ -99,6 +115,8 @@ of some of the things they contain:
|
|||
|
||||
When you build template driven forms (includes <code>NgModel</code>)
|
||||
|
||||
当要构建模板驱动表单时（它包含 <code>NgModel</code> ）
|
||||
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
|
|
@ -121,6 +139,8 @@ of some of the things they contain:
|
|||
|
||||
When building reactive forms
|
||||
|
||||
当要构建响应式表单时
|
||||
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
|
|
@ -131,8 +151,6 @@ of some of the things they contain:
|
|||
|
||||
<code>RouterModule</code>
|
||||
|
||||
<code>RouterModule</code>（路由器模块）
|
||||
|
||||
</td>
|
||||
|
||||
<td>
|
||||
|
|
@ -145,6 +163,8 @@ of some of the things they contain:
|
|||
|
||||
For Routing and when you want to use <code>RouterLink</code>,<code>.forRoot()</code>, and <code>.forChild()</code>
|
||||
|
||||
要使用路由功能，并且你要用到 <code>RouterLink</code>,<code>.forRoot()</code> 和 <code>.forChild()</code> 时
|
||||
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
|
|
@ -167,6 +187,8 @@ of some of the things they contain:
|
|||
|
||||
When you to talk to a server
|
||||
|
||||
当你要和服务器对话时
|
||||
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
|
|
@ -175,12 +197,16 @@ of some of the things they contain:
|
|||
|
||||
## Importing modules
|
||||
|
||||
## 导入模块
|
||||
|
||||
When you use these Angular modules, import them in `AppModule`,
|
||||
or your feature module as appropriate, and list them in the `@NgModule`
|
||||
`imports` array. For example, in the basic app generated by the CLI,
|
||||
`BrowserModule` is the first import at the top of the `AppModule`,
|
||||
`app.module.ts`.
|
||||
|
||||
当你使用这些 Angular 模块时，在 `AppModule`（或适当的特性模块）中导入它们，并把它们列在当前 `@NgModule` 的 `imports` 数组中。比如，在 CLI 生成的基本应用中，`BrowserModule` 会在 `app.module.ts` 中 `AppModule` 的顶部最先导入。
|
||||
|
||||
```typescript
|
||||
|
||||
/* import modules so that AppModule can access them */
|
||||
|
|
@ -207,13 +233,21 @@ The imports at the top of the array are JavaScript import statements
|
|||
while the `imports` array within `@NgModule` is Angular specific.
|
||||
For more information on the difference, see [JavaScript Modules vs. NgModules](guide/ngmodule-vs-jsmodule).
|
||||
|
||||
文件顶部的这些导入是 JavaScript 的导入语句，而 `@NgModule` 中的 `imports` 数组则是 Angular 特有的。
|
||||
要了解更多的不同点，参见 [JavaScript 模块 vs. NgModule](guide/ngmodule-vs-jsmodule)。
|
||||
|
||||
## `BrowserModule` and `CommonModule`
|
||||
|
||||
## `BrowserModule` 和 `CommonModule`
|
||||
|
||||
`BrowserModule` imports `CommonModule`, which contributes many common
|
||||
directives such as `ngIf` and `ngFor`. Additionally, `BrowserModule`
|
||||
re-exports `CommonModule` making all of its directives available
|
||||
to any module that imports `BrowserModule`.
|
||||
|
||||
`BrowserModule` 导入了 `CommonModule`，它贡献了很多通用的指令，比如 `ngIf` 和 `ngFor`。
|
||||
另外，`BrowserModule` 重新导出了 `CommonModule`，以便它所有的指令在任何导入了 `BrowserModule` 的 Angular 模块中都可以使用。
|
||||
|
||||
For apps that run in the browser, import `BrowserModule` in the
|
||||
root `AppModule` because it provides services that are essential
|
||||
to launch and run a browser app. `BrowserModule`’s providers
|
||||
|
|
@ -221,9 +255,14 @@ are for the whole app so it should only be in the root module,
|
|||
not in feature modules. Feature modules only need the common
|
||||
directives in `CommonModule`; they don’t need to re-install app-wide providers.
|
||||
|
||||
对于运行在浏览器中的应用来说，都必须在根模块中 `AppModule`，因为它提供了启动和运行浏览器应用时某些必须的服务。`BrowserModule` 的提供商是面向整个应用的，所以它只能在根模块中使用，而不是特性模块。
|
||||
特性模块只需要 `CommonModule` 中的常用指令，它们不需要重新安全所有全应用级的服务。
|
||||
|
||||
If you do import `BrowserModule` into a lazy loaded feature module,
|
||||
Angular returns an error telling you to use `CommonModule` instead.
|
||||
|
||||
如果你把 `BrowserModule` 导入了惰性加载的特性模块中，Angular 就会返回一个错误，并告诉你应该改用 `CommonModule`。
|
||||
|
||||
<figure>
|
||||
<img src="generated/images/guide/frequent-ngmodules/browser-module-error.gif" width=750 alt="BrowserModule error">
|
||||
</figure>
|
||||
|
|
@ -232,12 +271,20 @@ Angular returns an error telling you to use `CommonModule` instead.
|
|||
|
||||
## More on NgModules
|
||||
|
||||
## 关于 NgModule 的更多知识
|
||||
|
||||
You may also be interested in the following:
|
||||
|
||||
你可能还对下列内容感兴趣：
|
||||
|
||||
* [Bootstrapping](guide/bootstrapping).
|
||||
|
||||
[引导](guide/bootstrapping).
|
||||
|
||||
* [NgModules](guide/ngmodules).
|
||||
|
||||
[Angular 模块](guide/ngmodules).
|
||||
|
||||
* [JavaScript Modules vs. NgModules](guide/ngmodule-vs-jsmodule).
|
||||
|
||||
[JavaScript 模块与 NgModules](guide/ngmodule-vs-jsmodule).
|
||||
|
|
|
|||
|
|
@ -10,30 +10,48 @@ A basic understanding of the following concepts:
|
|||
|
||||
* [Feature Modules](guide/feature-modules).
|
||||
|
||||
[特性模块](guide/feature-modules)。
|
||||
|
||||
* [JavaScript Modules vs. NgModules](guide/ngmodule-vs-jsmodule).
|
||||
|
||||
[JavaScript 模块与 NgModules](guide/ngmodule-vs-jsmodule).
|
||||
[JavaScript 模块与 NgModules](guide/ngmodule-vs-jsmodule)。
|
||||
|
||||
* [Frequently Used Modules](guide/frequent-ngmodules).
|
||||
|
||||
[常用模块](guide/frequent-ngmodules)。
|
||||
|
||||
<hr>
|
||||
|
||||
There are five general categories of feature modules which
|
||||
tend to fall into the following groups:
|
||||
|
||||
下面是特性模块的五个常用分类，包括五组：
|
||||
|
||||
* Domain feature modules.
|
||||
|
||||
领域特性模块。
|
||||
|
||||
* Routed feature modules.
|
||||
|
||||
带路由的特性模块。
|
||||
|
||||
* Routing modules.
|
||||
|
||||
路由模块。
|
||||
|
||||
* Service feature modules.
|
||||
|
||||
服务特性模块
|
||||
|
||||
* Widget feature modules.
|
||||
|
||||
可视部件特性模块。
|
||||
|
||||
While the following guidelines describe the use of each type and their
|
||||
typical characteristics, in real world apps, you may see hybrids.
|
||||
|
||||
虽然下面的指南中描述了每种类型的使用及其典型特征，但在实际的应用中，你还可能看到它们的混合体。
|
||||
|
||||
<table>
|
||||
|
||||
<tr>
|
||||
|
|
@ -70,14 +88,24 @@ typical characteristics, in real world apps, you may see hybrids.
|
|||
|
||||
Domain feature modules deliver a user experience dedicated to a particular application domain like editing a customer or placing an order.
|
||||
|
||||
领域特性模块用来给用户提供应用程序领域中特有的用户体验，比如编辑客户信息或下订单等。
|
||||
|
||||
They typically have a top component that acts as the feature root and private, supporting sub-components descend from it.
|
||||
|
||||
它们通常会有一个顶级组件来充当该特性的根组件，并且通常是私有的。用来支持它的各级子组件。
|
||||
|
||||
Domain feature modules consist mostly of declarations. Only the top component is exported.
|
||||
|
||||
领域特性模块大部分由 `declarations` 组成，只有顶级组件会被导出。
|
||||
|
||||
Domain feature modules rarely have providers. When they do, the lifetime of the provided services should be the same as the lifetime of the module.
|
||||
|
||||
领域特性模块很少会有服务提供商。如果有，那么这些服务的生命周期必须和该模块的生命周期完全相同。
|
||||
|
||||
Domain feature modules are typically imported exactly once by a larger feature module.
|
||||
|
||||
领域特性模块通常会由更高一级的特性模块导出且只导出一次。
|
||||
|
||||
They might be imported by the root `AppModule` of a small application that lacks routing.
|
||||
|
||||
对于缺少路由的小型应用，它们可能只会被根模块`AppModule`导入一次。
|
||||
|
|
@ -92,7 +120,7 @@ typical characteristics, in real world apps, you may see hybrids.
|
|||
|
||||
Routed
|
||||
|
||||
路由
|
||||
带路由的
|
||||
|
||||
</td>
|
||||
|
||||
|
|
@ -100,16 +128,26 @@ typical characteristics, in real world apps, you may see hybrids.
|
|||
|
||||
Routed feature modules are domain feature modules whose top components are the targets of router navigation routes.
|
||||
|
||||
带路由的特性模块是一种特殊的领域特性模块，但它的顶层组件会作为路由导航时的目标组件。
|
||||
|
||||
All lazy-loaded modules are routed feature modules by definition.
|
||||
|
||||
根据这个定义，所有惰性加载的模块都是路由特性模块。
|
||||
|
||||
Routed feature modules don’t export anything because their components never appear in the template of an external component.
|
||||
|
||||
带路由的特性模块不会导出任何东西，因为它们的组件永远不会出现在外部组件的模板中。
|
||||
|
||||
A lazy-loaded routed feature module should not be imported by any module. Doing so would trigger an eager load, defeating the purpose of lazy loading.That means you won’t see them mentioned among the `AppModule` imports. An eager loaded routed feature module must be imported by another module so that the compiler learns about its components.
|
||||
|
||||
惰性加载的路由特性模块不应该被任何模块导入。如果那样做就会导致它被立即加载，破坏了惰性加载的设计用途。
|
||||
也就是说你应该永远不会看到它们在 `AppModule` 的 `imports` 中被引用。
|
||||
立即加载的路由特性模块必须被其它模块导入，以便编译器能了解它所包含的组件。
|
||||
|
||||
Routed feature modules rarely have providers for reasons explained in [Lazy Loading Feature Modules](/guide/lazy-loading-ngmodules). When they do, the lifetime of the provided services should be the same as the lifetime of the module. Don't provide application-wide singleton services in a routed feature module or in a module that the routed module imports.
|
||||
|
||||
路由特性模块很少会有服务提供商，原因参见[惰性加载的特性模块](/guide/lazy-loading-ngmodules)中的解释。如果那样做，那么它所提供的服务的生命周期必须与该模块的生命周期完全相同。不要在路由特性模块或被路由特性模块所导入的模块中提供全应用级的单例服务。
|
||||
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
|
|
@ -128,6 +166,8 @@ typical characteristics, in real world apps, you may see hybrids.
|
|||
|
||||
A routing module provides routing configuration for another module and separates routing concerns from its companion module.
|
||||
|
||||
路由模块为其它模块提供路由配置，并且把路由这个关注点从它的伴随模块中分离出来。
|
||||
|
||||
A routing module typically does the following:
|
||||
|
||||
路由模块通常会做这些：
|
||||
|
|
@ -138,42 +178,58 @@ typical characteristics, in real world apps, you may see hybrids.
|
|||
|
||||
Defines routes.
|
||||
|
||||
定义路由。
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
|
||||
Adds router configuration to the module's imports.
|
||||
|
||||
把路由配置添加到该模块的 `imports` 中。
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
|
||||
Adds guard and resolver service providers to the module's providers.
|
||||
|
||||
把路由守卫和解析器的服务提供商添加到该模块的 `providers` 中。
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
|
||||
The name of the routing module should parallel the name of its companion module, using the suffix "Routing". For example, <code>FooModule</code> in <code>foo.module.ts</code> has a routing module named <code>FooRoutingModule</code> in <code>foo-routing.module.ts</code>. If the companion module is the root <code>AppModule</code>, the <code>AppRoutingModule</code> adds router configuration to its imports with <code>RouterModule.forRoot(routes)</code>. All other routing modules are children that import <code>RouterModule.forChild(routes)</code>.
|
||||
|
||||
路由模块应该与其伴随模块同名，但是加上“Routing”后缀。比如，<code>foo.module.ts</code> 中的 <code>FooModule</code> 就有一个位于 <code>foo-routing.module.ts</code> 文件中的 <code>FooRoutingModule</code> 路由模块。
|
||||
如果其伴随模块是根模块 `AppModule`，`AppRoutingModule` 就要使用 `RouterModule.forRoot(routes)` 来把路由器配置添加到它的 `imports` 中。
|
||||
所有其它路由模块都是子模块，要使用 `RouterModule.forChild(routes)`。
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
|
||||
A routing module re-exports the <code>RouterModule</code> as a convenience so that components of the companion module have access to router directives such as <code>RouterLink</code> and <code>RouterOutlet</code>.
|
||||
|
||||
按照惯例，路由模块会重新导出这个 <code>RouterModule</code>，以便伴随模块中的组件可以访问路由器指令，比如 `RouterLink` 和 `RouterOutlet`。
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
|
||||
A routing module does not have its own declarations. Components, directives, and pipes are the responsibility of the feature module, not the routing module.
|
||||
|
||||
路由模块没有自己的可声明对象。组件、指令和管道都是特性模块的职责，而不是路由模块的。
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
A routing module should only be imported by its companion module.
|
||||
|
||||
路由模块应该只被它的伴随模块导入。
|
||||
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
|
|
@ -192,8 +248,12 @@ typical characteristics, in real world apps, you may see hybrids.
|
|||
|
||||
Service modules provide utility services such as data access and messaging. Ideally, they consist entirely of providers and have no declarations. Angular's `HttpClientModule` is a good example of a service module.
|
||||
|
||||
服务模块提供了一些工具服务，比如数据访问和消息。理论上，它们应该是完全由服务提供商组成的，不应该有可声明对象。Angular 的 `HttpClientModule` 就是一个服务模块的好例子。
|
||||
|
||||
The root `AppModule` is the only module that should import service modules.
|
||||
|
||||
根模块 `AppModule` 是唯一的可以导入服务模块的模块。
|
||||
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
|
|
@ -212,10 +272,16 @@ typical characteristics, in real world apps, you may see hybrids.
|
|||
|
||||
A widget module makes components, directives, and pipes available to external modules. Many third-party UI component libraries are widget modules.
|
||||
|
||||
窗口部件模块为外部模块提供组件、指令和管道。很多第三方 UI 组件库都是窗口部件模块。
|
||||
|
||||
A widget module should consist entirely of declarations, most of them exported.
|
||||
|
||||
窗口部件模块应该完全由可声明对象组成，它们中的大部分都应该被导出。
|
||||
|
||||
A widget module should rarely have providers.
|
||||
|
||||
窗口部件模块很少会有服务提供商。
|
||||
|
||||
Import widget modules in any module whose component templates need the widgets.
|
||||
|
||||
如果任何模块的组件模板中需要用到这些窗口部件，就请导入相应的窗口部件模块。
|
||||
|
|
@ -228,6 +294,8 @@ typical characteristics, in real world apps, you may see hybrids.
|
|||
|
||||
The following table summarizes the key characteristics of each feature module group.
|
||||
|
||||
下表中汇总了各种特性模块类型的关键特征。
|
||||
|
||||
<table>
|
||||
|
||||
<tr>
|
||||
|
|
@ -268,6 +336,8 @@ The following table summarizes the key characteristics of each feature module gr
|
|||
|
||||
Imported by
|
||||
|
||||
被谁导入
|
||||
|
||||
</th>
|
||||
|
||||
</tr>
|
||||
|
|
@ -310,6 +380,8 @@ The following table summarizes the key characteristics of each feature module gr
|
|||
|
||||
Feature, AppModule
|
||||
|
||||
特性模块，AppModule
|
||||
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
|
|
@ -352,6 +424,8 @@ The following table summarizes the key characteristics of each feature module gr
|
|||
|
||||
None
|
||||
|
||||
无
|
||||
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
|
|
@ -378,6 +452,8 @@ The following table summarizes the key characteristics of each feature module gr
|
|||
|
||||
Yes (Guards)
|
||||
|
||||
是（守卫）
|
||||
|
||||
</td>
|
||||
|
||||
<td>
|
||||
|
|
@ -390,6 +466,8 @@ The following table summarizes the key characteristics of each feature module gr
|
|||
|
||||
Feature (for routing)
|
||||
|
||||
特性（供路由使用）
|
||||
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
|
|
@ -486,8 +564,16 @@ The following table summarizes the key characteristics of each feature module gr
|
|||
|
||||
## More on NgModules
|
||||
|
||||
## 关于 NgModule 的更多知识
|
||||
|
||||
You may also be interested in the following:
|
||||
|
||||
你可能还对下列内容感兴趣：
|
||||
|
||||
* [Lazy Loading Modules with the Angular Router](guide/lazy-loading-ngmodules).
|
||||
|
||||
[使用 Angular 路由器惰性加载模块](guide/lazy-loading-ngmodules)。
|
||||
|
||||
* [Providers](guide/providers).
|
||||
|
||||
[服务提供商](guide/providers)。
|
||||
|
|
|
|||
|
|
@ -1,20 +1,30 @@
|
|||
# JavaScript Modules vs. NgModules
|
||||
|
||||
# JavaScript 模块 vs. NgModule
|
||||
|
||||
#### Prerequisites
|
||||
|
||||
#### 前提条件
|
||||
|
||||
A basic understanding of [JavaScript/ECMAScript modules](https://hacks.mozilla.org/2015/08/es6-in-depth-modules/).
|
||||
|
||||
对 [JavaScript/ECMAScript 模块](https://hacks.mozilla.org/2015/08/es6-in-depth-modules/) 有基本的了解。
|
||||
|
||||
<hr>
|
||||
|
||||
JavaScript and Angular use modules to organize code, and
|
||||
though they organize it differently, Angular apps rely on both.
|
||||
|
||||
JavaScript 和 Angular 都使用模块来组织代码，虽然它们的组织形式不同，但 Angular 的应用会同时依赖两者。
|
||||
|
||||
## JavaScript modules
|
||||
|
||||
## JavaScript 模块
|
||||
|
||||
In JavaScript, modules are individual files with JavaScript code in them. To make what’s in them available, you write an export statement, usually after the relevant code, like this:
|
||||
|
||||
在 JavaScript 中，模块是内含 JavaScript 代码的独立文件。要让其中的东西可用，你要写一个导出语句，通常会放在相应的代码之后，类似这样：
|
||||
|
||||
```typescript
|
||||
|
||||
export class AppComponent { ... }
|
||||
|
|
@ -23,6 +33,8 @@ export class AppComponent { ... }
|
|||
|
||||
Then, when you need that file’s code in another file, you import it like this:
|
||||
|
||||
然后，当你在其它文件中需要这个文件的代码时，要像这样导入它：
|
||||
|
||||
```typescript
|
||||
|
||||
import { AppComponent } from './app.component';
|
||||
|
|
@ -31,14 +43,22 @@ import { AppComponent } from './app.component';
|
|||
|
||||
JavaScript modules help you namespace, preventing accidental global variables.
|
||||
|
||||
JavaScript 模块让你能为代码加上命名空间，防止因为全局变量而引起意外。
|
||||
|
||||
## NgModules
|
||||
|
||||
<!-- KW-- perMisko: let's discuss. This does not answer the question why it is different. Also, last sentence is confusing.-->
|
||||
|
||||
NgModules are classes decorated with `@NgModule`. The `@NgModule` decorator’s `imports` array tells Angular what other NgModules the current module needs. The modules in the `imports` array are different than JavaScript modules because they are NgModules rather than regular JavaScript modules. Classes with an `@NgModule` decorator are by convention kept in their own files, but what makes them an `NgModule` isn’t being in their own file, like JavaScript modules; it’s the presence of `@NgModule` and its metadata.
|
||||
|
||||
NgModule 是一些带有 `@NgModule` 装饰器的类。`@NgModule` 装饰器的 `imports` 数组会告诉 Angular 哪些其它的 NgModule 是当前模块所需的。
|
||||
`imports` 数组中的这些模块与 JavaScript 模块不同，它们都是 NgModule 而不是常规的 JavaScript 模块。
|
||||
带有 `@NgModule` 装饰器的类通常会习惯性地放在单独的文件中，但单独的文件并不像 JavaScript 模块那样作为必要条件，而是因为它带有 `@NgModule` 装饰器及其元数据。
|
||||
|
||||
The `AppModule` generated from the Angular CLI demonstrates both kinds of modules in action:
|
||||
|
||||
Angular CLI 生成的 `AppModule` 实际演示了这两种模块：
|
||||
|
||||
```typescript
|
||||
|
||||
/* These are JavaScript import statements. Angular doesn’t know anything about these. */
|
||||
|
|
@ -64,6 +84,8 @@ export class AppModule { }
|
|||
|
||||
The NgModule classes differ from JavaScript module in the following key ways:
|
||||
|
||||
NgModule 类与 JavaScript 模块有下列关键性的不同：
|
||||
|
||||
* An NgModule bounds [declarable classes](guide/ngmodule-faq#q-declarable) only.
|
||||
Declarables are the only classes that matter to the [Angular compiler](guide/ngmodule-faq#q-angular-compiler).
|
||||
|
||||
|
|
@ -72,6 +94,8 @@ Declarables are the only classes that matter to the [Angular compiler](guide/ngm
|
|||
* Instead of defining all member classes in one giant file as in a JavaScript module,
|
||||
you list the module's classes in the `@NgModule.declarations` list.
|
||||
|
||||
与 JavaScript 类把它所有的成员类都放在一个巨型文件中不同，你要把该模块的类列在它的 `@NgModule.declarations` 列表中。
|
||||
|
||||
* An NgModule can only export the [declarable classes](guide/ngmodule-faq#q-declarable)
|
||||
it owns or imports from other modules. It doesn't declare or export any other kind of class.
|
||||
|
||||
|
|
@ -80,14 +104,26 @@ it owns or imports from other modules. It doesn't declare or export any other ki
|
|||
* Unlike JavaScript modules, an NgModule can extend the _entire_ application with services
|
||||
by adding providers to the `@NgModule.providers` list.
|
||||
|
||||
与 JavaScript 模块不同，NgModule 可以通过把服务提供商加到 `@NgModule.providers` 列表中，来用服务扩展*整个*应用。
|
||||
|
||||
<hr />
|
||||
|
||||
## More on NgModules
|
||||
|
||||
## 关于 NgModule 的更多知识
|
||||
|
||||
For more information on NgModules, see:
|
||||
|
||||
要了解关于 NgModule 的更多知识，参见
|
||||
|
||||
* [Bootstrapping](guide/bootstrapping).
|
||||
|
||||
[引导](guide/bootstrapping).
|
||||
|
||||
* [Frequently used modules](guide/frequent-ngmodules).
|
||||
|
||||
[常用模块](guide/frequent-ngmodules).
|
||||
|
||||
* [Providers](guide/providers).
|
||||
|
||||
[服务提供商](guide/providers).
|
||||
|
|
|
|||
|
|
@ -12,24 +12,36 @@ A basic understanding of the following concepts:
|
|||
|
||||
* [Bootstrapping](guide/bootstrapping).
|
||||
|
||||
[引导启动](guide/bootstrapping)。
|
||||
|
||||
* [JavaScript Modules vs. NgModules](guide/ngmodule-vs-jsmodule).
|
||||
|
||||
[JavaScript 模块与 NgModules](guide/ngmodule-vs-jsmodule).
|
||||
[JavaScript 模块与 NgModules](guide/ngmodule-vs-jsmodule)。
|
||||
|
||||
<hr>
|
||||
|
||||
**NgModules** configure the injector and the compiler and help organize related things together.
|
||||
|
||||
**NgModules** 用于配置注入器和编译器，并帮你把那些相关的东西组织在一起。
|
||||
|
||||
An NgModule is a class marked by the `@NgModule` decorator.
|
||||
`@NgModule` takes a metadata object that describes how to compile a component's template and how to create an injector at runtime.
|
||||
It identifies the module's own components, directives, and pipes,
|
||||
making some of them public, through the `exports` property, so that external components can use them.
|
||||
`@NgModule` can also add service providers to the application dependency injectors.
|
||||
|
||||
NgModule 是一个带有 `@NgModule` 装饰器的类。
|
||||
`@NgModule` 的参数是一个元数据对象，用于描述如何编译组件的模板，以及如何在运行时创建注入器。
|
||||
它会标出该模块自己的组件、指令和管道，通过 `exports` 属性公开其中的一部分，以便外部组件使用它们。
|
||||
`NgModule` 还能把一些服务提供商添加到应用的依赖注入器中。
|
||||
|
||||
For an example app showcasing all the techniques that NgModules related pages
|
||||
cover, see the <live-example></live-example>. For explanations on the individual techniques, visit the relevant NgModule pages under the NgModules
|
||||
section.
|
||||
|
||||
要想找一个涉及本章所讲的全部技术的范例，参见 <live-example></live-example>。
|
||||
要想得到针对单项技术的一些讲解，参见本目录下的相关页面。
|
||||
|
||||
## Angular modularity
|
||||
|
||||
## Angular 模块化
|
||||
|
|
@ -44,6 +56,11 @@ Many third-party libraries are available as NgModules such as
|
|||
<a href="http://ionicframework.com/">Ionic</a>, and
|
||||
<a href="https://github.com/angular/angularfire2">AngularFire2</a>.
|
||||
|
||||
Angular 自己的库都是 NgModule，比如 `FormsModule`、`HttpClientModule` 和 `RouterModule`。
|
||||
很多第三方库也是 NgModule，比如 <a href="https://material.angular.io/">Material Design</a>、
|
||||
<a href="http://ionicframework.com/">Ionic</a> 和
|
||||
<a href="https://github.com/angular/angularfire2">AngularFire2</a>。
|
||||
|
||||
NgModules consolidate components, directives, and pipes into
|
||||
cohesive blocks of functionality, each focused on a
|
||||
feature area, application business domain, workflow, or common collection of utilities.
|
||||
|
|
@ -53,46 +70,87 @@ Angular 模块把组件、指令和管道打包成内聚的功能块，每个模
|
|||
Modules can also add services to the application.
|
||||
Such services might be internally developed, like something you'd develop yourself or come from outside sources, such as the Angular router and HTTP client.
|
||||
|
||||
模块还可以把服务加到应用中。
|
||||
这些服务可能是内部开发的（比如你自己写的），或者来自外部的（比如 Angular 的路由和 HTTP 客户端）。
|
||||
|
||||
Modules can be loaded eagerly when the application starts or lazy loaded asynchronously by the router.
|
||||
|
||||
模块可以在应用启动时立即加载，也可以由路由器进行异步的惰性加载。
|
||||
|
||||
NgModule metadata does the following:
|
||||
|
||||
NgModule 的元数据会做这些：
|
||||
|
||||
* Declares which components, directives, and pipes belong to the module.
|
||||
|
||||
声明某些组件、指令和管道属于这个模块。
|
||||
|
||||
* Makes some of those components, directives, and pipes public so that other module's component templates can use them.
|
||||
|
||||
公开其中的部分组件、指令和管道，以便其它模块中的组件模板中可以使用它们。
|
||||
|
||||
* Imports other modules with the components, directives, and pipes that components in the current module need.
|
||||
|
||||
导入其它带有组件、指令和管道的模块，这些模块中的元件都是本模块所需的。
|
||||
|
||||
* Provides services that the other application components can use.
|
||||
|
||||
提供一些供应用中的其它组件使用的服务。
|
||||
|
||||
Every Angular app has at least one module, the root module.
|
||||
You [bootstrap](guide/bootstrapping) that module to launch the application.
|
||||
|
||||
每个 Angular 应用都至少有一个模块，也就是根模块。
|
||||
你可以[引导](guide/bootstrapping)那个模块，以启动该应用。
|
||||
|
||||
The root module is all you need in a simple application with a few components.
|
||||
As the app grows, you refactor the root module into [feature modules](guide/feature-modules)
|
||||
that represent collections of related functionality.
|
||||
You then import these modules into the root module.
|
||||
|
||||
对于那些只有少量组件的简单应用，根模块就是你所需的一切。
|
||||
随着应用的成长，你要把这个根模块重构成一些[特性模块](guide/feature-modules)，它们代表一组密切相关的功能集。
|
||||
然后你再把这些模块导入到根模块中。
|
||||
|
||||
## The basic NgModule
|
||||
|
||||
## 基本的模块
|
||||
|
||||
The CLI generates the following basic app module when creating a new app.
|
||||
|
||||
CLI 在创建新应用时会生成下列基本的应用模块。
|
||||
|
||||
<code-example path="bootstrapping/src/app/app.module.ts" region="whole-ngmodule" title="src/app/app.module.ts" linenums="false">
|
||||
|
||||
</code-example>
|
||||
|
||||
At the top are the import statements. The next section is where you configure the `@NgModule` by stating what components and directives belong to it (`declarations`) as well as which other modules it uses (`imports`). This page builds on [Bootstrapping](guide/bootstrapping), which covers the structure of an NgModule in detail. If you need more information on the structure of an `@NgModule`, be sure to read [Bootstrapping](guide/bootstrapping).
|
||||
|
||||
文件的顶部是一些导入语句。接下来是你配置 `NgModule` 的地方，用于规定哪些组件和指令属于它（`declarations`），以及它使用了哪些其它模块（`imports`）。
|
||||
本章是基于[引导](guide/bootstrapping)一章的，那里详细讲了 NgModule 的结构。如果要进一步了解 `@NgModule` 的结构，参见[引导](guide/bootstrapping)。
|
||||
|
||||
<hr />
|
||||
|
||||
## More on NgModules
|
||||
|
||||
## 关于 NgModule 的更多知识
|
||||
|
||||
You may also be interested in the following:
|
||||
|
||||
你可能还会对下列内容感兴趣：
|
||||
|
||||
* [Feature Modules](guide/feature-modules).
|
||||
|
||||
[特性模块](guide/feature-modules)
|
||||
|
||||
* [Entry Components](guide/entry-components).
|
||||
|
||||
[入口组件](guide/entry-components)
|
||||
|
||||
* [Providers](guide/providers).
|
||||
|
||||
[服务提供商](guide/providers).
|
||||
|
||||
* [Types of NgModules](guide/module-types).
|
||||
|
||||
[NgModule 的分类](guide/module-types).
|
||||
|
|
|
|||
|
|
@ -1,24 +1,37 @@
|
|||
# Providers
|
||||
|
||||
# 服务提供商
|
||||
|
||||
#### Prerequisites:
|
||||
|
||||
#### 前提条件：
|
||||
|
||||
* A basic understanding of [Bootstrapping](guide/bootstrapping).
|
||||
|
||||
对[引导](guide/bootstrapping)有基本的了解。
|
||||
|
||||
* Familiarity with [Frequently Used Modules](guide/frequent-ngmodules).
|
||||
|
||||
熟悉[常用模块](guide/frequent-ngmodules).
|
||||
|
||||
For the final sample app using the provider that this page describes,
|
||||
see the <live-example></live-example>.
|
||||
|
||||
要想查看本页提到的这个带有特性模块的范例应用，参见 <live-example></live-example>。
|
||||
|
||||
<hr>
|
||||
|
||||
## Create a service
|
||||
|
||||
## 创建服务
|
||||
|
||||
You can provide services to your app by using the `providers` array in an NgModule.
|
||||
Consider the default app generated by the CLI. In order to add a user service to it,
|
||||
you can generate one by entering the following command in the terminal window:
|
||||
|
||||
你可以使用 NgModule 中的 `providers` 数组来为你的应用提供服务。
|
||||
对于用 CLI 生成的默认应用，要想为它添加一个 `user` 服务，你可以在终端窗口中输入如下命令来生成一个：
|
||||
|
||||
```sh
|
||||
|
||||
ng generate service User
|
||||
|
|
@ -29,60 +42,106 @@ This creates a service called `UserService`. You now need to make the service av
|
|||
app's injector. Update `app.module.ts` by importing it with your other import statements at the top
|
||||
of the file and adding it to the `providers` array:
|
||||
|
||||
这将会创建一个名叫 `UserService` 的服务。你现在要让该服务在你的应用注入器中可用，就要修改 `app.module.ts` 文件。先在文件的顶部导入它，然后把它加入 `providers` 数组中：
|
||||
|
||||
<code-example path="providers/src/app/app.module.ts" title="src/app/app.module.ts" linenums="false">
|
||||
|
||||
</code-example>
|
||||
|
||||
## Provider scope
|
||||
|
||||
## 提供商的作用域
|
||||
|
||||
When you add a service provider to the `providers` array of the root module, it’s available throughout the app. Additionally, when you import a module that has providers, those providers are also available to all the classes in the app as long they have the lookup token. For example, if you import the `HttpClientModule` into your `AppModule`, its providers are then available to the entire app and you can make HTTP requests from anywhere in your app.
|
||||
|
||||
当你把服务提供商添加到根模块的 `providers` 数组中时，它就在整个应用程序中可用了。
|
||||
另外，当你导入一个带有服务提供商的模块时，其中的服务提供商也同样对整个应用中的类是可用的 —— 只要它们有供查找用的服务令牌。
|
||||
比如，如果你把 `HttpClientModule` 导入了 `AppModule`，它里面的提供商就是对整个应用可用的，你可以在应用的任何地方发起 HTTP 请求。
|
||||
|
||||
## Limiting provider scope by lazy loading modules
|
||||
|
||||
## 使用惰性加载模块限制提供商的作用域
|
||||
|
||||
In the basic CLI generated app, modules are eagerly loaded which means that they are all loaded when the app launches. Angular uses an injector system to make things available between modules. In an eagerly loaded app, the root application injector makes all of the providers in all of the modules available throughout the app.
|
||||
|
||||
在 CLI 生成的基本应用中，模块是立即加载的，这意味着它们都是由本应用启动的，Angular 会使用一个依赖注入体系来让一切服务都在模块间有效。对于立即加载式应用，应用中的根注入器会让所有服务提供商都对整个应用有效。
|
||||
|
||||
This behavior necessarily changes when you use lazy loading. Lazy loading is when you load modules only when you need them; for example, when routing. They aren’t loaded right away like with eagerly loaded modules. This means that any services listed in their provider arrays aren’t available because the root injector doesn’t know about these modules.
|
||||
|
||||
当使用惰性加载时，这种行为需要进行改变。惰性加载就是只有当需要时才加载模块，比如路由中。它们没办法像立即加载模块那样进行加载。这意味着，在它们的 `providers` 数组中列出的服务都是不可用的，因为根注入器并不知道这些模块。
|
||||
|
||||
<!-- KW--Make diagram here -->
|
||||
|
||||
<!-- KW--per Misko: not clear if the lazy modules are siblings or grand-children. They are both depending on router structure. -->
|
||||
|
||||
When the Angular router lazy-loads a module, it creates a new injector. This injector is a child of the root application injector. Imagine a tree of injectors; there is a single root injector and then a child injector for each lazy loaded module. The router adds all of the providers from the root injector to the child injector. When the router creates a component within the lazy-loaded context, Angular prefers service instances created from these providers to the service instances of the application root injector.
|
||||
|
||||
当 Angular 的路由器惰性加载一个模块时，它会创建一个新的注入器。这个注入器是应用的根注入器的一个子注入器。想象一棵注入器树，它有唯一的根注入器，而每一个惰性加载模块都有一个自己的子注入器。路由器会把根注入器中的所有提供商添加到子注入器中。如果路由器在惰性加载时创建组件， Angular 会更倾向于使用从这些提供商中创建的服务实例，而不是来自应用的根注入器的服务实例。
|
||||
|
||||
Any component created within a lazy loaded module’s context, such as by router navigation, gets the local instance of the service, not the instance in the root application injector. Components in external modules continue to receive the instance created for the application root.
|
||||
|
||||
任何在惰性加载模块的上下文中创建的组件（比如路由导航），都会获取该服务的局部实例，而不是应用的根注入器中的实例。而外部模块中的组件，仍然会收到来自于应用的根注入器创建的实例。
|
||||
|
||||
Though you can provide services by lazy loading modules, not all services can be lazy loaded. For instance, some modules only work in the root module, such as the Router. The Router works with the global location object in the browser.
|
||||
|
||||
虽然你可以使用惰性加载模块来提供实例，但不是所有的服务都能惰性加载。比如，像路由之类的模块只能在根模块中使用。路由器需要使用浏览器中的全局对象 `location` 进行工作。
|
||||
|
||||
## Limiting provider scope with components
|
||||
|
||||
## 使用组件限定服务提供商的作用域
|
||||
|
||||
Another way to limit provider scope is by adding the service you want to limit to the component’s
|
||||
`providers` array. Component providers and NgModule providers are independent of each other. This
|
||||
method is helpful for when you want to eagerly load a module that needs a service all to itself.
|
||||
Providing a service in the component limits the service only to that component (other components in
|
||||
the same module can’t access it.)
|
||||
|
||||
另一种限定提供商作用域的方式是把要限定的服务添加到组件的 `providers` 数组中。组件中的提供商和 NgModule 中的提供商是彼此独立的。
|
||||
当你要立即加载一个自带了全部所需服务的模块时，这种方式是有帮助的。
|
||||
在组件中提供服务，会限定该服务只能在该组件中有效（同一模块中的其它组件不能访问它）。
|
||||
|
||||
<code-example path="providers/src/app/app.component.ts" region="component-providers" title="src/app/app.component.ts" linenums="false">
|
||||
|
||||
</code-example>
|
||||
|
||||
## Providing services in modules vs. components
|
||||
|
||||
## 在模块中提供服务还是在组件中？
|
||||
|
||||
Generally, provide services the whole app needs in the root module and scope services by providing them in lazy loaded modules.
|
||||
|
||||
通常，要在根模块中提供整个应用都需要的服务，在惰性加载模块中提供限定范围的服务。
|
||||
|
||||
The router works at the root level so if you put providers in a component, even `AppComponent`, lazy loaded modules, which rely on the router, can’t see them.
|
||||
|
||||
路由器工作在根级，所以如果你把服务提供商放进组件（即使是 `AppComponent`）中，那些依赖于路由器的惰性加载模块，将无法看到它们。
|
||||
|
||||
<!-- KW--Make a diagram here -->
|
||||
|
||||
Register a provider with a component when you must limit a service instance to a component and its component tree, that is, its child components. For example, a user editing component, `UserEditorComponent`, that needs a private copy of a caching `UserService` should register the `UserService` with the `UserEditorComponent`. Then each new instance of the `UserEditorComponent` gets its own cached service instance.
|
||||
|
||||
当你必须把一个服务实例的作用域限定到组件及其组件树中时，可以使用组件注册一个服务提供商。
|
||||
比如，用户编辑组件 `UserEditorComponent`，它需要一个缓存 `UserService` 实例，那就应该把 `UserService` 注册进 `UserEditorComponent` 中。
|
||||
然后，每个 `UserEditorComponent` 的实例都会获取它自己的缓存服务实例。
|
||||
|
||||
<hr>
|
||||
|
||||
## More on NgModules
|
||||
|
||||
## 关于 NgModule 的更多知识
|
||||
|
||||
You may also be interested in:
|
||||
|
||||
你可能还对下列内容感兴趣：
|
||||
|
||||
* [Singleton Services](guide/singleton-services), which elaborates on the concepts covered on this page.
|
||||
|
||||
[单例服务](guide/singleton-services)详细解释了本页包含的那些概念。
|
||||
|
||||
* [Lazy Loading Modules](guide/lazy-loading-ngmodules).
|
||||
|
||||
[惰性加载模块](guide/lazy-loading-ngmodules)。
|
||||
|
||||
* [NgModule FAQ](guide/ngmodule-faq).
|
||||
|
||||
[NgModule 常见问题](guide/ngmodule-faq)。
|
||||
|
|
|
|||
|
|
@ -227,63 +227,63 @@
|
|||
"tooltip": "在应用的根模块（AppModule）中告诉 Angular 如何构造并引导引用。"
|
||||
},
|
||||
{
|
||||
"title": "NgModules",
|
||||
"tooltip": "NgModules.",
|
||||
"title": "Angular 模块",
|
||||
"tooltip": "Angular 中的模块",
|
||||
"children": [
|
||||
{
|
||||
"url": "guide/ngmodules",
|
||||
"title": "NgModules Introduction",
|
||||
"tooltip": "Use NgModules to make your apps efficient."
|
||||
"title": "NgModule 简介",
|
||||
"tooltip": "使用 NgModule 让你的应用更高效"
|
||||
},
|
||||
{
|
||||
"url": "guide/ngmodule-vs-jsmodule",
|
||||
"title": "JS Modules vs NgModules",
|
||||
"tooltip": "Differentiate between JavaScript modules and NgModules."
|
||||
"title": "JS 模块 vs NgModule",
|
||||
"tooltip": "JavaScript 模块和 NgModule 之间的差异"
|
||||
},
|
||||
{
|
||||
"url": "guide/frequent-ngmodules",
|
||||
"title": "Frequently Used NgModules",
|
||||
"tooltip": "Introduction to the most frequently used NgModules."
|
||||
"title": "常用模块",
|
||||
"tooltip": "介绍最常用的 Angular 模块"
|
||||
},
|
||||
{
|
||||
"url": "guide/module-types",
|
||||
"title": "Types of Feature Modules",
|
||||
"tooltip": "Description of the different types of feature modules."
|
||||
"title": "特性模块的分类",
|
||||
"tooltip": "介绍特性模块的几种类型"
|
||||
},
|
||||
{
|
||||
"url": "guide/entry-components",
|
||||
"title": "Entry Components",
|
||||
"tooltip": "All about entry components in Angular."
|
||||
"title": "入口组件",
|
||||
"tooltip": "关于 Angular 中入口组件的一切"
|
||||
},
|
||||
{
|
||||
"url": "guide/feature-modules",
|
||||
"title": "Feature Modules",
|
||||
"tooltip": "Create feature modules to organize your code."
|
||||
"title": "特性模块",
|
||||
"tooltip": "创建特性模块，以组织你的代码"
|
||||
},
|
||||
{
|
||||
"url": "guide/providers",
|
||||
"title": "Providers",
|
||||
"tooltip": "Providers and NgModules."
|
||||
"title": "服务提供商",
|
||||
"tooltip": "服务提供商与 Angular 模块"
|
||||
},
|
||||
{
|
||||
"url": "guide/singleton-services",
|
||||
"title": "Singleton Services",
|
||||
"tooltip": "Creating singleton services."
|
||||
"title": "单例应用",
|
||||
"tooltip": "创建单例应用"
|
||||
},
|
||||
{
|
||||
"url": "guide/lazy-loading-ngmodules",
|
||||
"title": "Lazy Loading Feature Modules",
|
||||
"tooltip": "Lazy load modules to speed up your apps."
|
||||
"title": "惰性加载的特性模块",
|
||||
"tooltip": "惰性加载模块，以提高应用的性能"
|
||||
},
|
||||
{
|
||||
"url": "guide/sharing-ngmodules",
|
||||
"title": "Sharing NgModules",
|
||||
"tooltip": "Share NgModules to streamline your apps."
|
||||
"title": "共享 Angular 模块",
|
||||
"tooltip": "共享 Angular 模块让你的应用现代化。"
|
||||
},
|
||||
{
|
||||
"url": "guide/ngmodule-api",
|
||||
"title": "NgModule API",
|
||||
"tooltip": "Understand the details of NgModules."
|
||||
"tooltip": "理解 NgModule 的那些细节。"
|
||||
},
|
||||
{
|
||||
"url": "guide/ngmodule-faq",
|
||||
|
|
|
|||
Loading…
Reference in New Issue