Question

我是 angular 2 的新手。

angular 2 中的@NgModule实际上是什么？我通过角度提到官方文档。但我没有任何清晰度。

任何人都可以帮助我吗？

Answer 1

Angular NgModules与JavaScript（ES2015）模块有所不同并互补。 NgModule为专用于应用程序域，工作流或紧密相关功能集的一组组件声明一个编译上下文。 NgModule可以将其组件与相关代码（例如服务）相关联，以形成功能单元。

NgModule由装饰有@NgModule（）的类定义。 @NgModule（）装饰器是一个使用单个元数据对象的函数，该对象的属性描述了模块。最重要的属性如下。

声明：属于此NgModule的组件，指令和管道。

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

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

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

bootstrap：主应用程序视图（称为根组件），该视图承载所有其他应用程序视图。只有根NgModule才能设置bootstrap属性。

Answer 2

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

基本的NgModule用法如下：

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

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

声明告诉角度MyComponent属于MyAppModule

bootstrap 建议角度，当它在启动时创建此模块时，我们希望自动将MyComponent引导到DOM中。

Answer 3

首先，请再次阅读https://angular.io/docs/ts/latest/guide/ngmodule.html并明确https://angular.io/docs/ts/latest/cookbook/ngmodule-faq.html。

@NgModule可以完成所有魔法设置。它设置依赖注入，引入它使用的任何第三方模块，声明所有组件/指令/管道/等。在模块中使用，将其中一些组件等公开给其他模块，设置模块的路由，并设置任何可用作根组件的“boostrap”组件。

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

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

Answer 4

来自docs

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

NgModule元数据执行以下操作：


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

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

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

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

Answer 5

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

Angular创建模块的答案是@NgModule。这是允许您创建模块的标签。角度模块由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类和方法一样。

实际上@NgModule的角度是多少？

5 个答案: