浅析Angular2子模块以及异步加载 - 行业资讯 - 肥雀云

用Angular2开发一个大型的应用,我们通常都需要分模块进行开发。例如将某一个功能的相关页面和功能放在一个模块里面,这样既可以实现系统的松耦合,给开发和后期的维护带来很大的便利。同时,对于子模块,我们还可以使用延时加载,这样可以减少初始加载的文件的大小。在这篇文章中,我们就来看看在Angular2框架下怎么实现子模块及其延时加载。

可以在这里查看本文使用的实例。该实例基于上篇文章Angular2使用警卫和解决进行验证和权限控制所用的实例,并在它基础上添加了一个懒惰的模块,以及将现有的todo模块配置成延时加载方式。

为了体现启用延时加载前后的包的大小变化,以及启用压缩后的变化,在这个教程里面,使用了angular-cli创建项目脚手架,并用它来进行测试和打包。有关angular-cli的使用请查看官网。在这篇文章我们使用的angular-cli的版本是1.0.0-beta.21。如果你使用的是别的版本,可能结果就会不一样,甚至有些错误,我们在最后会说明当前版本angular-cli的错误。

<强>模块设计

在开发Angular2应用时,像组件设计,路由设计以外,对于一个较大型的应用,我们还需要设计模块,例如,将一个应用分成几个功能模块,以及有哪些公用模块。公用模块里面应该放公用的服务类,例如权限验证,登录,获取用户信息,全局的错误处理,工具类等,还有封装的指令或组件。而在某一个功能模块里面,只处理这个模块里面的业务,尽量不和其他模块交互。

拿之前教程中的基于网络应用来说,只有家页面和2个todo页面,我们把todo相关的功能放在一个子模块里面,为了演示,又加了一个简单的名字叫懒惰的模块。我们将把todo模块和懒惰模块配置成延时加载的模块。

<强>子模块开发

接下来再看看子模块的开发。其实在之前的例子中,就把todo相关的组件放在了一个模块里面。但是却没有强调子模块开发需要注意的地方,甚至有些配置可能没有采用子模块的方式进行配置。这里,我们就主要说明一下需要注意的地方,如果要查看完整的代码,请参考实例源代码。

<强>子模块路由

首先需要注意的是路由。在之前的例子中,我们把todo相关的路由定义在一个文件中,然后在应用的路由定义中把所有路由合并到一起。<代码> todo.routes。ts> 　　　　//省略导入　　出口const TodoRoutes:路线[]=[ 　　{ 　　路径:“待办事项”, 　　canActivateChild:(MyTodoGuard), 　　孩子:( 　　{路径:“名单”,组件:TodoListComponent,解决:{待办事项:MyTodoResolver}}, 　　{路径:/细节:id,组件:TodoDetailComponent, canDeactivate: [CanLeaveTodoDetailGuard]} 　　] 　　} 　　]; 　　之前　　　　

然后在<代码> app.routes。ts> 　　　　　　const路线:路线=( 　　{路径:“redirectTo:/home, pathMatch:“全部”}, 　　{路径:“回家”,组件:HomeComponent}, 　　…TodoRoutes//这里就是将TodoRoutes列表里的内容合并到路线　　]; 　　@NgModule ({ 　　进口:[RouterModule.forRoot(路线), 　　出口(RouterModule): 　　}) 　　出口classAppRoutingModule {} 　　之前　　　　

最后,在AppModule里面引入这个路由模块。

这种方式实现的路由无法实现子模块的延时加载,要实现延时加载,首先要将todo模块的路由修改成子路由模块,也就是要修改<代码> todo.routes。ts :

　　　　//省略导入　　出口const TodoRoutes:路线[]=[ 　　{ 　　路径:“待办事项”, 　　canActivateChild:(MyTodoGuard), 　　孩子:( 　　{路径:“名单”,组件:TodoListComponent,解决:{待办事项:MyTodoResolver}}, 　　{路径:/细节:id,组件:TodoDetailComponent, canDeactivate: [CanLeaveTodoDetailGuard]} 　　] 　　} 　　];//通过下面的方式定义了一个子路由模块　　@NgModule ({ 　　进口:[RouterModule.forChild (TodoRoutes)), 　　出口(RouterModule): 　　}) 　　出口classTodoRoutingModule {} 　　　　

这里,我们定义了一个子路由模块,<代码> TodoRoutingModule> RouterModule.forChild (TodoRoutes) 来创建。跟整个应用的路由模块比较的话,主路由模块使用<代码> RouterModule.forRoot(路线)来定义。

定义好了子路由模块,我们就在子模块里面引入它既可:

　　　　//省略导入　　@NgModule ({ 　　进口:[CommonModule、FormsModule TodoRoutingModule), 　　声明:[TodoListComponent、TodoDetailComponent TodoItemComponent), 　　提供者:[TodoService MyTodoResolver、MyTodoGuard CanLeaveTodoDetailGuard] 　　}) 　　出口classTodoModule {}