Angular2学习笔记——详解NgModule模块  更新时间:2016年12月02日 17:15:38   作者:木的树   这篇文章主要介绍了Angular2学习笔记——详解NgModule模块,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧 在Angular2中一个Module指的是使用@NgModule修饰的class。@NgModule利用一个元数据对象来告诉Angular如何去编译和运行代码。一个模块内部可以包含组件、指令、管道,并且可以将它们的访问权限声明为公有,以使外部模块的组件可以访问和使用到它们。 模块是用来组织应用的,通过模块机制外部类库可以很方便的扩展应用,Rc5之后,Angular2将许多常用功能都分配到一个个的模块中,如:FormModule、HttpModule、RouterModule。 NgModule的主要属性如下: declarations:模块内部Components/Directives/Pipes的列表,声明一下这个模块内部成员 providers:指定应用程序的根级别需要使用的service。(Angular2中没有模块级别的service,所有在NgModule中声明的Provider都是注册在根级别的Dependency Injector中) imports:导入其他module,其它module暴露的出的Components、Directives、Pipes等可以在本module的组件中被使用。比如导入CommonModule后就可以使用NgIf、NgFor等指令。 exports:用来控制将哪些内部成员暴露给外部使用。导入一个module并不意味着会自动导入这个module内部导入的module所暴露出的公共成员。除非导入的这个module把它内部导入的module写到exports中。 bootstrap:通常是app启动的根组件,一般只有一个component。bootstrap中的组件会自动被放入到entryComponents中。 entryCompoenents: 不会再模板中被引用到的组件。这个属性一般情况下只有ng自己使用,一般是bootstrap组件或者路由组件,ng会自动把bootstrap、路由组件放入其中。 除非不通过路由动态将component加入到dom中,否则不会用到这个属性。 每个Angular2的应用都至少有一个模块即跟模块。 import {NgModule} from ‘@angular/core’; import {BrowserModule} from ‘@angular/platform-borwser’; import {AppComponent} from ‘./AppComponent’; @NgModule({ declarations: [AppComponent], imports: [BrowserModule], bootstrap: [AppComponent] }) export class AppModule{} 随着程序的壮大,单一的根模块已不能清晰的划分职责,这时候便可以引入Feature Module。Feature Module与根模块的创建方式一样,所有的模块共享一个运行期上下文和依赖注入器。 功能模块与根模块的职责区别主要有以下两点: 根模块的目的在于启动app,功能模块的目的在于扩展app 功能模块可以根据需要暴露或隐藏具体的实现 Angular2提供的另一个与模块有关的技术就是延迟加载了。默认情况下Angular2将所有的代码打包成一个文件,目的是为了提高应用的流畅性,但是如果是运行在mobile中的app,加载一个大文件可能会过慢,所以rc5提供了一种延迟加载方式。 template: ` Contact Crisis Center Heroes ` import { ModuleWithProviders } from ‘@angular/core’; import { Routes, RouterModule } from ‘@angular/router’; export const routes: Routes = [ { path: ”, redirectTo: ‘contact’, pathMatch: ‘full’}, { path: ‘crisis’, loadChildren: ‘app/crisis/crisis.module#CrisisModule’ }, { path: ‘heroes’, loadChildren: ‘app/hero/hero.module#HeroModule’ } ]; export const routing: ModuleWithProviders = RouterModule.forRoot(routes); 其中,path指明路径,loadChildren指明使用延迟加载,’app/crisis/crisis.module#CrisisModule’指明了模块的路径,和模块的名称。 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。 您可能感兴趣的文章: Angular2开发——组件规划篇 Angular2利用组件与指令实现图片轮播组件 Angular2 NgModule 模块详解 Angular2入门教程之模块和组件详解 Angular2 NgModule 相关文章 Angular框架详解之视图抽象定义 这篇文章主要给大家介绍了关于Angular框架详解之视图抽象定义的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧 2021-04-04 解决angular的post请求后SpringMVC后台接收不到参数值问题的方法 这篇文章主要介绍了解决angular的post请求后SpringMVC后台接收不到参数值问题的方法,感兴趣的小伙伴们可以参考一下 2015-12-12 Angular-Touch库用法示例 这篇文章主要介绍了Angular-Touch库用法,结合触屏滑动事件的实现为例分析了Angular-Touch库的相关使用技巧,需要的朋友可以参考下 2016-12-12 Angular4学习教程之DOM属性绑定详解 这篇文章主要给大家介绍了关于Angular4学习教程之DOM属性绑定的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。 2018-01-01 angularjs下拉框空白的解决办法 这篇文章主要为大家详细介绍了angularjs下拉框空白,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 2017-06-06 AngularJS标签页tab选项卡切换功能经典实例详解 这篇文章主要介绍了AngularJS实现标签页tab选项卡功能,结合实例形式总结分析了各种常用的tab选项卡切换操作实现技巧与相关操作注意事项,需要的朋友可以参考下 2018-05-05 AngularJs上传前预览图片的实例代码 使用AngularJs进行开发,在项目中,经常会遇到上传图片后,需在一旁预览图片内容,怎么实现这样的功能呢?今天小编给大家分享AugularJs上传前预览图片的实现代码,需要的朋友参考下吧 2017-01-01 Angular6 用户自定义标签开发的实现方法 这篇文章主要介绍了Angular6 用户自定义标签开发的实现方法,下面我们就通过一个简单的例子演示Angular6中的这一新功能,小编觉得挺不错的,现在分享给大家,需要的朋友可以参考下 2019-01-01 解决三元运算符 报错“SyntaxError: can””t assign to conditional expre 在本篇文章里小编给大家整理的是关于python三元运算符 报错“SyntaxError: can’t assign to conditional expression”的处理方法,需要的朋友们学习下。 2020-02-02 Angularjs上传文件组件flowjs功能 现在的项目,无论代销,几乎不会缺省的一个功能就是上传下载功能,今天谈一谈使用AngularJS+bootsrtap下的上传下载功能,需要的朋友参考下吧 2017-08-08 最新评论

在Angular2中一个Module指的是使用@NgModule修饰的class。@NgModule利用一个元数据对象来告诉Angular如何去编译和运行代码。一个模块内部可以包含组件、指令、管道,并且可以将它们的访问权限声明为公有,以使外部模块的组件可以访问和使用到它们。

模块是用来组织应用的,通过模块机制外部类库可以很方便的扩展应用,Rc5之后,Angular2将许多常用功能都分配到一个个的模块中,如:FormModule、HttpModule、RouterModule。

NgModule的主要属性如下:

  • declarations:模块内部Components/Directives/Pipes的列表,声明一下这个模块内部成员
  • providers:指定应用程序的根级别需要使用的service。(Angular2中没有模块级别的service,所有在NgModule中声明的Provider都是注册在根级别的Dependency Injector中)
  • imports:导入其他module,其它module暴露的出的Components、Directives、Pipes等可以在本module的组件中被使用。比如导入CommonModule后就可以使用NgIf、NgFor等指令。
  • exports:用来控制将哪些内部成员暴露给外部使用。导入一个module并不意味着会自动导入这个module内部导入的module所暴露出的公共成员。除非导入的这个module把它内部导入的module写到exports中。
  • bootstrap:通常是app启动的根组件,一般只有一个component。bootstrap中的组件会自动被放入到entryComponents中。
  • entryCompoenents: 不会再模板中被引用到的组件。这个属性一般情况下只有ng自己使用,一般是bootstrap组件或者路由组件,ng会自动把bootstrap、路由组件放入其中。 除非不通过路由动态将component加入到dom中,否则不会用到这个属性。

每个Angular2的应用都至少有一个模块即跟模块。

import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-borwser';
import {AppComponent} from './AppComponent';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  bootstrap: [AppComponent]
})
export class AppModule{}

随着程序的壮大,单一的根模块已不能清晰的划分职责,这时候便可以引入Feature Module。Feature Module与根模块的创建方式一样,所有的模块共享一个运行期上下文和依赖注入器。

功能模块与根模块的职责区别主要有以下两点:

  • 根模块的目的在于启动app,功能模块的目的在于扩展app
  • 功能模块可以根据需要暴露或隐藏具体的实现

Angular2提供的另一个与模块有关的技术就是延迟加载了。默认情况下Angular2将所有的代码打包成一个文件,目的是为了提高应用的流畅性,但是如果是运行在mobile中的app,加载一个大文件可能会过慢,所以rc5提供了一种延迟加载方式。

template: `
 <app-title [subtitle]="subtitle"></app-title>
 <nav>
  <a routerLink="contact" routerLinkActive="active">Contact</a>
  <a routerLink="crisis" routerLinkActive="active">Crisis Center</a>
  <a routerLink="heroes" routerLinkActive="active">Heroes</a>
 </nav>
 <router-outlet></router-outlet>
`
import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

export const routes: Routes = [
 { path: '', redirectTo: 'contact', pathMatch: 'full'},
 { path: 'crisis', loadChildren: 'app/crisis/crisis.module#CrisisModule' },
 { path: 'heroes', loadChildren: 'app/hero/hero.module#HeroModule' }
];

export const routing: ModuleWithProviders = RouterModule.forRoot(routes);

其中,path指明路径,loadChildren指明使用延迟加载,’app/crisis/crisis.module#CrisisModule’指明了模块的路径,和模块的名称。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

您可能感兴趣的文章:

  • Angular2开发——组件规划篇
  • Angular2利用组件与指令实现图片轮播组件
  • Angular2 NgModule 模块详解
  • Angular2入门教程之模块和组件详解
张贴在3