angular-cn/aio/content/guide/frequent-ngmodules.md

# 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.
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>

   <th style="vertical-align: top">

     NgModule

   </th>

   <th style="vertical-align: top">

     Import it from

     导入自

   </th>

   <th style="vertical-align: top">

     Why you use it

     为何使用

   </th>

 </tr>

 <tr>

   <td>

       <code>BrowserModule</code>

   </td>

   <td>

       <code>@angular/platform-browser</code>

   </td>

   <td>

       When you want to run your app in a browser

       当你想要在浏览器中运行应用时

   </td>

 </tr>

 <tr>

   <td>

       <code>CommonModule</code>

   </td>

   <td>

       <code>@angular/common</code>

   </td>

   <td>

       When you want to use <code>NgIf</code>, <code>NgFor</code>

       当你想要使用 <code>NgIf</code> 和 <code>NgFor</code> 时

   </td>

 </tr>

 <tr>

   <td>

       <code>FormsModule</code>

   </td>

   <td>

       <code>@angular/forms</code>

   </td>

   <td>

       When you build template driven forms (includes <code>NgModel</code>)

       当要构建模板驱动表单时（它包含 <code>NgModel</code> ）

   </td>

 </tr>

 <tr>

   <td>

       <code>ReactiveFormsModule</code>

   </td>

   <td>

       <code>@angular/forms</code>

   </td>

   <td>

       When building reactive forms

       当要构建响应式表单时

   </td>

 </tr>

 <tr>

   <td>

       <code>RouterModule</code>

   </td>

   <td>

       <code>@angular/router</code>

   </td>

   <td>

       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>

 <tr>

   <td>

       <code>HttpClientModule</code>

   </td>

   <td>

       <code>@angular/common/http</code>

   </td>

   <td>

       When you to talk to a server

       当你要和服务器对话时

   </td>

 </tr>

</table>

## 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 */
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [ /* add modules here so Angular knows to use them */
    BrowserModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

```

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
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>

<hr />

## 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).