美文网首页
[Angular学习笔记]Angular模块-NgModule

[Angular学习笔记]Angular模块-NgModule

作者: salt_fash | 来源:发表于2019-07-12 10:21 被阅读0次

NgModule 简介

Angular 应用是模块化的,它拥有自己的模块化系统,称作 NgModule。 一个 NgModule 就是一个容器,用于存放一些内聚的代码块,这些代码块专注于某个应用领域、某个工作流或一组紧密相关的功能。 它可以包含一些组件、服务提供商或其它代码文件,其作用域由包含它们的 NgModule 定义。 它还可以导入一些由其它模块中导出的功能,并导出一些指定的功能供其它 NgModule 使用。

每个 Angular 应用都至少有一个 NgModule 类,也就是根模块,它习惯上命名为 AppModule,并位于一个名叫 app.module.ts 的文件中。引导这个根模块就可以启动你的应用。

虽然小型的应用可能只有一个 NgModule,不过大多数应用都会有很多特性模块。应用的根模块之所以叫根模块,是因为它可以包含任意深度的层次化子模块。

@NgModule 元数据

NgModule 是一个带有 @NgModule 装饰器的类。@NgModule 装饰器是一个函数,它接受一个元数据对象,该对象的属性用来描述这个模块。其中最重要的属性如下。

  • declarations(可声明对象表) —— 那些属于本 NgModule 的组件指令管道

  • exports(导出表) —— 那些能在其它模块的组件模板中使用的可声明对象的子集。

  • imports(导入表) —— 那些导出了模块中的组件模板所需的类的其它模块。

  • providers —— 本模块向全局服务中贡献的那些服务的创建器。 这些服务能被本应用中的任何部分使用。(你也可以在组件级别指定服务提供商,这通常是首选方式。)

  • bootstrap —— 应用的主视图,称为根组件。它是应用中所有其它视图的宿主。只有根模块才应该设置这个 bootstrap 属性。

下面是一个简单的根 NgModule 定义:

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
@NgModule({
  imports:      [ BrowserModule ],
  providers:    [ Logger ],
  declarations: [ AppComponent ],
  exports:      [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

把 AppComponent 放到 exports 中是为了演示导出的语法,这在本例子中实际上是没必要的。 根模块没有任何理由导出任何东西,因为其它模块永远不需要导入根模块

NgModule 和组件

NgModule 为其中的组件提供了一个编译上下文环境。根模块总会有一个根组件,并在引导期间创建它。 但是,任何模块都能包含任意数量的其它组件,这些组件可以通过路由器加载,也可以通过模板创建。那些属于这个 NgModule 的组件会共享同一个编译上下文环境。


组件及其模板共同定义视图。组件还可以包含视图层次结构,它能让你定义任意复杂的屏幕区域,可以将其作为一个整体进行创建、修改和销毁。 一个视图层次结构中可以混合使用由不同 NgModule 中的组件定义的视图。 这种情况很常见,特别是对一些 UI 库来说。
当你创建一个组件时,它直接与一个叫做宿主视图的视图关联起来。 宿主视图可以是视图层次结构的根,该视图层次结构可以包含一些内嵌视图,这些内嵌视图又是其它组件的宿主视图。 这些组件可以位于相同的 NgModule 中,也可以从其它 NgModule 中导入。 树中的视图可以嵌套到任意深度。

相关文章

  • Angular参考资料收集

    1 、Angular2文档学习的知识点摘要——Angular模块(NgModule) 2、Angular2父子组件...

  • [Angular学习笔记]Angular模块-NgModule

    NgModule 简介 Angular 应用是模块化的,它拥有自己的模块化系统,称作 NgModule。 一个 N...

  • Angular配置模块及路由

    一、Angular模块 Angular应用是模块化的,它拥有自己的模块化系统,称作 "NgModule"。一个Ng...

  • spark_learn

    Angular2学习笔记——NgModule es6 新增的map和foreach AngularJS2.0 学习...

  • 01. 架构

    模块(Module) Angular模块都是一个带有@NgModule装饰器的类, 组件(Component) 在...

  • ANgular NgModule 简介

    Angular 应用是模块化的,它拥有自己的模块化系统,称作 NgModule。 一个 NgModule 就是一个...

  • Angular框架学习之模块

    Angular框架是模块化的,模块称为NgModule,一个NgModule是一个容器,用于存放一些内聚的代码。每...

  • 【angular】NgModule学习

    NgModule参考手册 选项说明providers:在当前模块的注入器中可用的一组可注入对象。@Componen...

  • NgModule in Angular

    Why NgModule It’s done automatically with Angular CLI, bu...

  • Augular 路由

    ### 路由配置 ``` import { NgModule } from '@angular/core'; im...

网友评论

      本文标题:[Angular学习笔记]Angular模块-NgModule

      本文链接:https://www.haomeiwen.com/subject/souskctx.html