angular2 NgModel 模块

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

NgModule 的API

interface NgModule {
   // providers: 这个选项是一个数组,需要我们列出我们这个模块的一些需要共用的服务
   //      然后我们就可以在这个模块的各个组件中通过依赖注入使用了.
  providers : Provider[]
   // declarations: 数组类型的选项, 用来声明属于这个模块的指令,管道等等.
   //        然后我们就可以在这个模块中使用它们了.
  declarations : Array<Type<any>|any[]>
   // imports: 数组类型的选项,我们的模块需要依赖的一些其他的模块,这样做的目的使我们这个模块
   //     可以直接使用别的模块提供的一些指令,组件等等.
  imports : Array<Type<any>|ModuleWithProviders|any[]>
   // exports: 数组类型的选项,我们这个模块需要导出的一些组件,指令,模块等;
   //     如果别的模块导入了我们这个模块,
   //     那么别的模块就可以直接使用我们在这里导出的组件,指令模块等.
  exports : Array<Type<any>|any[]>
  // entryComponents: 数组类型的选项,指定一系列的组件,这些组件将会在这个模块定义的时候进行编译
  //         Angular会为每一个组件创建一个ComponentFactory然后把它存储在ComponentFactoryResolver
  entryComponents : Array<Type<any>|any[]>
  // bootstrap: 数组类型选项, 指定了这个模块启动的时候应该启动的组件.当然这些组件会被自动的加入到entryComponents中去
  bootstrap : Array<Type<any>|any[]>
  // schemas: 不属于Angular的组件或者指令的元素或者属性都需要在这里进行声明.
  schemas : Array<SchemaMetadata|any[]>
  // id: 字符串类型的选项,模块的隐藏ID,它可以是一个名字或者一个路径;用来在getModuleFactory区别模块,如果这个属性是undefined
  //   那么这个模块将不会被注册.
  id : string
 }

常用API简介

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中,否则不会用到这个属性。

子模块

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

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

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

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

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' }, // 可以延迟加载子模块,子模块的结构和父模块一样,它会去加载子模块中的Routes配置,并跳转对应的组件中去。
 { path: 'heroes', loadChildren: 'app/hero/hero.module#HeroModule' }
];

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

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

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

华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com

《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。