浅析Angular2子模块以及异步加载-创新互联

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

为昌邑等地区用户提供了全套网页设计制作服务，及昌邑网站建设行业解决方案。主营业务为成都网站设计、成都做网站、外贸营销网站建设、昌邑网站设计，以传统方式定制建设网站，并提供域名空间备案等一条龙服务，秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求，就会得到认可，从而选择与我们长期合作。这样，我们也可以走得更远！

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

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

模块设计

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

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

子模块开发

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

子模块路由

首先需要注意的是路由。在之前的例子中，我们把todo相关的路由定义在一个文件中，然后在app的路由定义中把所有路由合并到一起。todo.routes.ts的内容如下：

// 省略import
export const TodoRoutes: Route[] = [
  {
    path: 'todo',
    canActivateChild: [MyTodoGuard],
    children: [
      { path: 'list', component: TodoListComponent, resolve: { todos: MyTodoResolver } },
      { path: 'detail/:id', component: TodoDetailComponent, canDeactivate: [ CanLeaveTodoDetailGuard ] }
    ]
  }
];

另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

当前文章：浅析Angular2子模块以及异步加载-创新互联
本文路径：http://shouzuofang.com/article/pjsgj.html