Angular2学习笔记——详解NgModule模块

在Angular2中一个Module指的是使用@NgModule修饰的class。@NgModule利用一个元数据对象来告诉Angular如何去编译和运行代码。一个模块内部可以包含组件、指令、管道，并且可以将它们的访问权限声明为公有，以使外部模块的组件可以访问和使用到它们。 模块是用来组织应用的，通过模块机制外部类库可以很方便的扩展应用，Rc5之后，Angular2将许多常用功能都分配到一个个的模块中，如:FormModule、HttpModule、RouterModule。 NgModule的主要属性如下： declarations：模块内部Components/Directives/P 在Angular2中， NgModule是应用的核心构造块，用于组织代码并定义组件、指令、管道等的范围。一个 NgModule 是通过使用 `@NgModule` 装饰器来定义的类，它包含一个元数据对象，该对象告诉Angular如何编译和运行代码。在Angular的模块化设计中，模块允许我们将应用分解为更小、更可管理的部分，从而提高了代码的可维护性和重用性。 `declarations` 属性是 NgModule 的关键部分，它包含了模块内部的组件（Components）、指令（Directives）和管道（Pipes）。这些元素只能在声明它们的模块内使用，除非通过 `exports` 属性显式导出。例如，如果你想让外部组件能够使用一个自定义的管道，你需要在 NgModule 的 `exports` 数组中声明它。 `providers` 属性用于指定应用程序需要的根级服务（Service）。在Angular2中，所有在 NgModule 中声明的 Provider 都会被注册到根级别的 Dependency Injector 中，这意味着这些服务在整个应用中是单例的。如果你希望某个服务只在特定模块的范围内存在，那么应该在 Feature Module 中声明它。 `imports` 属性用于导入其他模块，这样本模块就可以使用那些模块公开的组件、指令和管道。例如，导入 `CommonModule` 可以使得 NgIf 和 NgFor 等基础指令在当前模块中可用。`exports` 属性则决定了哪些内部组件、指令和管道可以被外部模块使用。 `bootstrap` 属性定义了应用启动时要加载的根组件。通常，这将是应用的主入口点。`entryComponents` 属性包含了那些不会直接在模板中引用的组件，比如通过路由动态加载的组件。Angular会自动处理 bootstrap 组件和路由组件的添加，但在某些特殊情况下，可能需要手动添加到 `entryComponents`。 在大型应用中，单一的根模块（AppModule）可能不足以清晰地划分职责，这时可以引入 Feature Module。Feature Module 专注于提供特定的功能，它们可以独立于根模块存在，并根据需要导出或隐藏具体实现。这种方式有助于保持代码的整洁和模块化。 Angular2还提供了延迟加载（Lazy Loading）功能，这是通过路由配置实现的。通过将模块标记为 `loadChildren`，我们可以指示Angular在用户导航到特定路由时才加载该模块，而不是一开始就加载所有代码。这样可以显著减少初始加载时间，尤其对于移动端应用来说，能提供更好的用户体验。 Angular2的 NgModule 机制是构建大型、复杂应用的关键，它通过模块化组织代码，提供了服务、组件和指令的隔离与共享，以及延迟加载等优化手段，帮助开发者构建高效、可扩展的单页应用。