Angular2 模块简介

liaosilzu2007 发布于2019-08-30 15:55 / 3338人阅读

摘要：模块简介简介应用是模块化的，而我们可以把它当做一个容器，用于存放一些内聚的代码块，它接收一个元数据对象并通过该对象告诉如何编译和运行模块代码。它标记出该模块拥有的组件指令和管道，并把它们的一部分公开出去，以便外部组件使用它们。

Angular2 模块简介 NgModule 简介

Angular 应用是模块化的，而NgModule我们可以把它当做一个容器，用于存放一些内聚的代码块，它接收一个元数据对象并通过该对象告诉 Angular 如何编译和运行模块代码。它标记出该模块拥有的组件、指令和管道，并把它们的一部分公开出去，以便外部组件使用它们。它可以向应用的依赖注入器中添加服务提供商。
每个 Angular 应用都至少有一个 NgModule 类，也就是根模块，它习惯上命名为 AppModule，并位于一个名叫 app.module.ts 的文件中。引导这个根模块就可以启动你的应用。

NgModule 元数据

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

declarations（可声明对象表） —— 那些属于本 NgModule 的组件、指令、管道。

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

imports（导入表） —— 那些导出了本模块中的组件模板所需的类的其它模块。

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

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

通俗一点讲即：

声明哪些组件、指令、管道属于该模块；

公开某些类，以便其它的组件模板可以使用它们；

导入其它模块，从其它模块中获得本模块所需的组件、指令和管道；

在应用程序级提供服务，以便应用中的任何组件都能使用它。

如：

import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { NgModule } from "@angular/core";
import { HttpModule, Http } from "@angular/http";
import { RouterModule } from "@angular/router";
import { appRoutes } from "./app.routes";
import { AppcontentModule } from "./appcontent/appcontent.module";
import { AppComponent } from "./app.component";
import { CommonService } from "./shared/common.service";

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    HttpModule,
    RouterModule.forRoot(appRoutes),
    AppcontentModule
  ],
  providers: [CommonService],
  bootstrap: [AppComponent]
})
export class AppModule { }

特性模块

我们一般把自定义的其他模块叫特性模块。随着应用的扩大，所有的事情都在一个模块中完成难免会变乱，我们就会想着把统分为多个模块，每个模块都只做各自的事情而互不干扰，用根模块来引导程序并管理所有子模块即通过路由定向以及为它们提供全局配置与服务实例。
实现方式如下：

根模块负责全局的路由。

核心模块负责全局服务，也可以定义一些只在根模块中使用的组件等，并只能由根模块引入一次，不再导出。

共享模块不做服务的提供，而是定义全局共享的组件等，以及帮助子模块导入系统模块，让子模块只需要导入此共享模块就够了。

子模块内部可以细分自己的子路由到具体的子组件，以及提供自己的服务等。

除了页面入口模块(即除了根模块外的具体业务模块)之外的其他子模块均考虑写成惰性加载的模块，以提升页面引导的速度减少性能浪费。

当需要一个比较通用的全局服务时，可以将其加入CoreModule，也可以再创建一个仅被根模块引入的特性模块。进一步的，甚至可以将此模块发布到npm，这就需要更强的编码能力和技术积累了。

Angular2模块的目录和目录结构一般如下：

每个模块一个应该多带带的文件夹

模块内功能相关或相近

每个模块最好都有多带带的路由定义

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/117211.html

Angular2 模块简介

摘要：模块简介简介应用是模块化的，而我们可以把它当做一个容器，用于存放一些内聚的代码块，它接收一个元数据对象并通过该对象告诉如何编译和运行模块代码。它标记出该模块拥有的组件指令和管道，并把它们的一部分公开出去，以便外部组件使用它们。 Angular2 模块简介 NgModule 简介 Angular 应用是模块化的，而NgModule我们可以把它当做一个容器，用于存放一些内聚的代码块，它接...

asoren 2019-08-02 14:02 评论0 收藏0
Angular2 模块简介

摘要：模块简介简介应用是模块化的，而我们可以把它当做一个容器，用于存放一些内聚的代码块，它接收一个元数据对象并通过该对象告诉如何编译和运行模块代码。它标记出该模块拥有的组件指令和管道，并把它们的一部分公开出去，以便外部组件使用它们。 Angular2 模块简介 NgModule 简介 Angular 应用是模块化的，而NgModule我们可以把它当做一个容器，用于存放一些内聚的代码块，它接...

Chaz 2019-08-23 14:33 评论0 收藏0
angular2 NgModel` 模块

摘要：模块在中一个指的是使用修饰的。中没有模块级别的，所有在中声明的都是注册在根级别的中导入其他，其它暴露的出的等可以在本的组件中被使用。导入一个并不意味着会自动导入这个内部导入的所暴露出的公共成员。 angular2 NgModel 模块在Angular2中一个Module指的是使用@NgModule修饰的class。@NgModule利用一个元数据对象来告诉Angular如何去编译和...

OnlyLing 2019-08-23 16:51 评论0 收藏0
Angular 2.x 从0到1 (一）史上最简单的Angular2教程

摘要：官方支持微软出品，是的超集，是的强类型版本作为首选编程语言，使得开发脚本语言的一些问题可以更早更方便的找到。第一个组件那么我们来为我们的增加一个吧，在命令行窗口输入。引导过程通过在中引导来启动应用。它们的核心就是。第一节：Angular 2.0 从0到1 （一）第二节：Angular 2.0 从0到1 （二）第三节：Angular 2.0 从0到1 （三）第一章：认识Angular...

tuniutech 2019-08-20 13:58 评论0 收藏0
Angular 2 快速上手

摘要：为了简单起见，在本文中将会使用。已经实例化了并且将它的模板载入到了元素中。中的依赖注入发生在该类的构造函数中，因此我们将在构造函数中注入。国内 Angular2 资料比较少，这里看到一篇不错的入门文章就分享过来了 —— Angular 2 快速上手，这里面还有很多有关于 Angular2 的文章，感兴趣的朋友可以去看一看目前angular2已经来到了beta版，这意味着它已经做好了...

singerye 2019-08-19 17:38 评论0 收藏0