最近在做angular项目,发现使用requirejs来加载模块的时候,它会根据已经建立好的依赖一次性把所有模块加载下来,而我们的项目中有两个不同的产品,我们希望进入每个产品时只加载该产品对应的模块。但是要结合ui-router来实现,网上的例子还实在少,好不容易有同事搜到类似的解决方案,试了半天终于成功了,原文章在这里:
http://christopherthielen.github.io/ui-router-extras/#/future
文章写的相当简洁,具体概念原理大家自己去看文章吧,这里就大家分享一下本项目中如何使用它的。。
1,首先需要引用一些库:
bower install angularAMD --save ---------angularAMD用来动态加载js文件和js模块,依赖于angular。这里我们使用angularAMD中的ngload来动态加载模块。
bower install ui-router-extra --save --------- ui-router-extra是ui-router的扩展包,主要是用到其中的futureState。futureState是在config时候定义,但真正跳转的时候会用一个full ui-router替换。这个full ui-router到时候会用$stateProvider。具体在例子里面解释。
2. 在require的config文件里面定义各种引用:
require.config({
baseUrl: '../',
paths: {
...
'angularUiRouterExtra':'xxx/ui-router-extras/release/ct-ui-router-extras.min', //for lazy load
'angularAMD':'xxx/angularAMD/angularAMD.min', //for lazy load
'ngload':'xxx/angularAMD/ngload.min', //for lazy load
},
shim: {
...
'angularAMD':{
deps:['angular']
},
'angularUiRouter': {
deps: ['angular']
},
'ngload':{
deps:['angularAMD']
},
'angularUiRouterExtra':{
deps:['angular']
}
...
}
});
require(['app'], function(app) { //init the application
app.init();
});