填写这份《一分钟调查》，帮我们（开发组）做得更好！去填写Home
JS 模块 vs Angular 模块

JavaScript 模块 vs. NgModule

JavaScript modules vs. NgModules

JavaScript 模块和 NgModule 都可以帮你模块化你的代码，但它们却有着本质性的不同。 Angular 应用同时依赖这两种模块。

JavaScript modules and NgModules can help you modularize your code, but they are very different. Angular apps rely on both kinds of modules.

JavaScript 模块：包含代码的文件

JavaScript modules: Files containing code

JavaScript 模块是一个带有 JavaScript 代码的单独文件，它通常包含一个应用中特定用途的类或函数库。 JavaScript 模块让你可以跨多个文件进行工作。

A JavaScript module is an individual file with JavaScript code, usually containing a class or a library of functions for a specific purpose within your app. JavaScript modules let you spread your work across multiple files.

要了解更多关于 JavaScript 模块的信息，参阅深入 ES6：模块 。关于模块规范的更多信息，请参阅ECMAScript 标准第 6 版。

To learn more about JavaScript modules, see ES6 In Depth: Modules. For the module specification, see the 6th Edition of the ECMAScript standard.

要让 JavaScript 模块中的代码可用于其它模块，请在模块中相关代码的末尾使用 export 导出它，比如：

To make the code in a JavaScript module available to other modules, use an export statement at the end of the relevant code in the module, such as the following:

      
      export class AppComponent { ... }

如果你在另一个模块中需要来自本模块的代码时，请使用 import 语句，如下所示：

When you need that module’s code in another module, use an import statement as follows:

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

每个模块都有自己的顶级作用域。换句话说，模块中的顶级变量和函数在其他脚本或模块中是看不到的。每个模块都为其中的标识符提供了一个命名空间，以防止它们与其它模块中的标识符冲突。要想使用多个模块，你可以通过创建一个全局命名空间并为它添加子模块来防止出现意外的全局变量。

Each module has its own top-level scope. In other words, top-level variables and functions in a module are not seen in other scripts or modules. Each module provides a namespace for identifiers to prevent them from clashing with identifiers in other modules. With multiple modules, you can prevent accidental global variables by creating a single global namespace and adding sub-modules to it.

Angular 框架本身就是作为一组 JavaScript 模块加载的。

The Angular framework itself is loaded as a set of JavaScript modules.

NgModule：带有供编译用的元数据的类

NgModules: Classes with metadata for compiling

NgModule 是带有 @NgModule 装饰器标记的类，它带有一个描述该应用里这个特定部分要如何与其他部分配合使用的元数据对象。 NgModule 是 Angular 特有的。虽然带有 @NgModule 装饰器的类一般也保存在单独的文件中，但它们与 JavaScript 模块的不同，因为它们包含这种元数据。

An NgModule is a class marked by the @NgModule decorator with a metadata object that describes how that particular part of the app fits together with the other parts. NgModules are specific to Angular. While classes with an @NgModule decorator are by convention kept in their own files, they differ from JavaScript modules because they include this metadata.

@NgModule 元数据在指导 Angular 编译过程中发挥了重要作用，它把你编写的应用代码转换成高效的 JavaScript 代码。元数据描述了如何编译组件模板以及如何在运行时创建注入器。它标出了 NgModule 的组件、指令和管道，并且通过 exports 属性把它们中的一部分标为公开的，以便外部组件可以使用它们。你还可以使用 NgModule 为服务添加服务提供者，以便这些服务可以用在你应用的其他地方。

The @NgModule metadata plays an important role in guiding the Angular compilation process that converts the app code you write into highly performant JavaScript code. The metadata describes how to compile a component's template and how to create an injector at runtime. It identifies the NgModule's components, directives, and pipes, and makes some of them public through the exports property so that external components can use them. You can also use an NgModule to add providers for services, so that the services are available elsewhere in your app.

不要把所有类都作为 JavaScript 模块定义在一个巨型文件中，而应该在 @NgModule.declarations 列表中声明哪些组件、指令和管道属于这个 NgModule。这些类叫做可声明对象 。NgModule 只能导出它自己拥有的可声明对象类或从其他 NgModule 中导入的类。它不会声明或导出任何其他类型的类。对 Angular 编译过程来说，可声明对象是唯一值得关注的类。

Rather than defining all member classes in one giant file as a JavaScript module, declare which components, directives, and pipes belong to the NgModule in the @NgModule.declarations list. These classes are called declarables. An NgModule can export only the declarable classes it owns or imports from other NgModules. It doesn't declare or export any other kind of class. Declarables are the only classes that matter to the Angular compilation process.

关于 NgModule 元数据属性的完整描述，请参阅使用 NgModule 元数据。

For a complete description of the NgModule metadata properties, see Using the NgModule metadata.

同时使用两者的例子

An example that uses both

Angular CLI为新应用项目生成的根模块 AppModule 演示了如何使用这两种模块：

The root NgModule AppModule generated by the Angular CLI for a new app project demonstrates how you use both kinds of modules:

src/app/app.module.ts (default AppModule)
      
      // imports
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

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

// @NgModule decorator with its metadata
@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

根模块根据 import 语句开头导入 JavaScript 模块。然后使用下列数组 @NgModule

The root NgModule starts with import statements to import JavaScript modules. It then configures the @NgModule with the following arrays:

  • declarations ：属于该 NgModule 的组件、指令和管道。新应用项目的根模块中只有一个叫做 AppComponent 的组件。

    declarations: The components, directives, and pipes that belong to the NgModule. A new app project's root NgModule has only one component, called AppComponent.

  • imports ：你要用的其他 NgModule，这样你才可以使用它们的可声明对象。新生成的根模块会导入BrowserModule，以便使用特定于浏览器的服务，比如 DOM 渲染、无害化处理和定位。

    imports: Other NgModules you are using, so that you can use their declarables. The newly generated root NgModule imports BrowserModulein order to use browser-specific services such as DOM rendering, sanitization, and location.

  • providers ：一些服务提供者，可供其他 NgModule 中的组件使用。新生成的根模块中没有提供者。

    providers: Providers of services that components in other NgModules can use. There are no providers in a newly generated root NgModule.

  • bootstrap ： Angular 创建的入口组件，Angular 会创建它，并把它插入到宿主页面 index.html 中，从而引导该应用。这个入口组件 AppComponent 会同时出现在 declarations 和 bootstrap 数组中。

    bootstrap: The entry component that Angular creates and inserts into the index.html host web page, thereby bootstrapping the app. This entry component, AppComponent, appears in both the declarations and the bootstrap arrays.

下一步

Next steps