|
NgModule
|
Import it from
导入自
|
Why you use it
为何使用
|
BrowserModule
|
@angular/platform-browser
|
When you want to run your app in a browser
当你想要在浏览器中运行应用时
|
CommonModule
|
@angular/common
|
When you want to use NgIf, NgFor
当你想要使用 NgIf 和 NgFor 时
|
FormsModule
|
@angular/forms
|
When you want to build template driven forms (includes NgModel)
当要构建模板驱动表单时（它包含 NgModel ）
|
ReactiveFormsModule
|
@angular/forms
|
When you want to build reactive forms
当要构建响应式表单时
|
RouterModule |
@angular/router |
When you want to use RouterLink,.forRoot(), and .forChild()
要使用路由功能，并且你要用到 RouterLink,.forRoot() 和 .forChild() 时
|
HttpClientModule
|
@angular/common/http
|
When you want to talk to a server
当你要和服务器对话时
|
## 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 [Angular CLI](cli),
`BrowserModule` is the first import at the top of the `AppModule`,
`app.module.ts`.
当你使用这些 Angular 模块时，在 `AppModule`（或适当的特性模块）中导入它们，并把它们列在当前 `@NgModule` 的 `imports` 数组中。比如，在 [Angular CLI](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` 的模块中都可以使用。
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` ，因为它提供了启动和运行浏览器应用时某些必须的服务。`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`。
