Angular 中的 @NgModule 实际上是什么？答案

【问题标题】：What is @NgModule actually in Angular?Angular 中的 @NgModule 实际上是什么？
【发布时间】：2017-03-16 13:51:23
【问题描述】：

我是 Angular 2 的新手。

Angular 2 中的 @NgModule 实际上是什么？我参考了 Angular 的官方文档。但我没有任何清楚。

【问题讨论】：

标签： angular ng-modules

【解决方案1】：

随着应用程序开始变得越来越复杂，很明显所有应用程序都应该划分为modules。每个模块本身就是一个小型迷你应用程序，但现在您可以将所有这些迷你应用程序捆绑在一起以制作更大的应用程序。

Angular 创建模块的答案是@NgModule。这是允许您创建模块的标签。 Angular 中的模块由 components 或 other module's components 以及其他我们不会讨论的内容组成。

假设您的应用程序有两个主要部分 - 愿望清单和购物车。您可以为它们中的每一个创建模块 - WishlistModule 和 CartModule。在 WishlistModule 中，您将拥有多个组件（装饰为 @NgComponent），例如显示项目、拖放项目等。对于 CartModule 也是如此。

要创建模块，您需要使用@NgModule，如下所示。

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { WishlistMainComponent }   from './wishlistMain.component';
import { WishlistShowComponent }   from './wishlistShow.component';
import { WishlistDragComponent }   from './wishlistDrag.component';
import { HeaderModule }   from './header.module';

@NgModule({
  imports:      [ 
    BrowserModule,
    HeaderModule
  ],
  declarations: [
    WishlistMainComponent, WishlistShowComponent, WishlistDragComponent
  ],
  bootstrap: [ WishlistMainComponent ]
})
export class WishlistModule { }

正如其他答案已经指出的那样，@NgModule 在幕后做了很多工作，但简单来说，它声明了一个模块。它有点像 Java 类，无论你在 bootstrap 选项中传递什么，都像 main() 方法。

模块（或@NgModule）本身只不过是一个包含一堆components 的公文包，实际上，组件就是您的应用程序的真正组成部分。一个组件定义一个标签，例如<wishlist></wishlist> angular 将您所有的愿望清单代码放在哪里。模块就在组件所在的下面，如果你想使用外部组件，那么你只能通过导入它的模块来实现，就像Java类和方法一样。

【讨论】：

“Ng”代表什么？一个ng标准？这可能是added to your answer（没有“编辑：”、“更新：”或类似的 - 答案应该看起来好像是今天写的）。

【解决方案2】：

首先，再读一遍https://angular.io/docs/ts/latest/guide/ngmodule.html，当然还有https://angular.io/docs/ts/latest/cookbook/ngmodule-faq.html。

@NgModule 完成了所有神奇的设置。它设置依赖注入，引入它使用的任何 3rd 方模块，声明所有组件/指令/管道/等。在模块中使用的组件，将其中一些组件等暴露给其他模块，为模块设置路由，并设置任何可用作根组件的“引导”组件。

有两种类型的模块。首先，有你的'根模块'，它是你的应用程序的入口点。从技术上讲，您可以将应用中的所有内容都放在一个模块中。

然后是“功能模块”，它们用于在开发过程中分离关注点，也用于延迟加载应用程序的某些部分。对于大型应用程序来说，这是一个更大的问题，但尽早这样做肯定可以帮助您“正确”设置。

【讨论】：

【解决方案3】：

Angular NgModules 不同于并补充了 JavaScript (ES2015) 模块。 NgModule 声明了一组组件的编译上下文，这些组件专用于应用程序域、工作流或一组密切相关的功能。 NgModule 可以将其组件与相关的代码（例如服务）关联起来，形成功能单元。

一个 NgModule 是由一个用 @NgModule() 修饰的类定义的。 @NgModule() 装饰器是一个接受单个元数据对象的函数，其属性描述了模块。最重要的属性如下。

声明：属于这个 NgModule 的组件、指令和管道。

exports：应该在其他 NgModule 的组件模板中可见和可用的声明子集。

imports：在这个 NgModule 中声明的组件模板需要其导出类的其他模块。

providers：这个 NgModule 贡献给全球服务集合的服务的创建者；它们在应用程序的所有部分都可以访问。（您还可以在组件级别指定提供程序，这通常是首选。）

bootstrap：主应用程序视图，称为根组件，它托管所有其他应用程序视图。只有根 NgModule 应该设置引导属性。

【讨论】：

【解决方案4】：

@NgModule 是 RC5 中添加的新装饰器，它为 Angular 的核心和开发人员人体工程学提供了许多有用的功能。

NgModule 的基本用法如下所示：

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ MyComponent ],
  bootstrap: [ MyComponent ]
})
class MyAppModule {}

这个装饰器告诉 Angular 关于你的应用程序的两件事：

声明告诉 Angular MyComponent 属于 MyAppModule。

bootstrap 建议 Angular 在启动时创建此模块，并且我们希望自动将 MyComponent 引导到 DOM 中。

【讨论】：

【解决方案5】：

来自docs

NgModule 是由 @NgModule 装饰器标记的类。 @NgModule 采用元数据对象，该对象描述如何编译组件的模板以及如何在运行时创建注入器。它通过exports 属性识别模块自己的组件、指令和管道，将其中一些公开，以便外部组件可以使用它们。 @NgModule 还可以将服务提供者添加到应用程序依赖注入器。

NgModule 元数据执行以下操作：

声明哪些组件、指令和管道属于模块。

公开其中一些组件、指令和管道，以便其他模块的组件模板可以使用它们。

使用当前模块中的组件所需的组件、指令和管道导入其他模块。

提供其他应用程序组件可以使用的服务。

【讨论】：