ui-route相比于angularjs的原生视图路由更好地支持了路由嵌套,状态转移等等。随着视图不断增加,打包的js体积也会越来越大,比如我在应用里面用到了wangeditor里面单独依赖的jquery就300多k。异步加载各个组件就很有必要的。在这里我就以ui-route为框架来进行异步加载说明。
首先看一下路由加载文件
angular.module (“webtrn-sns”)。配置([stateProvider美元,函数(stateProvider美元){
美元stateProvider.state ({
名称:“home.message”,
url:/消息,
文摘:没错,
templateProvider:[‘资源’,函数(参考资料){
返回resources.template
}),
controllerProvider:[‘资源’,(资源)=比;{
返回resources.controller
}),>
stateProvider美元。状态(myState, {
解决:{//使用简单的返回值的函数例子。//因为它不是一个承诺,它立即解决。
simpleObj:函数(){
返回{值:“简单!”};
},//例子用函数返回的承诺。//这是解决的典型用例。//你需要注入任何服务//使用,例如http美元在这个例子
promiseObj:函数(http) {//美元http url数据返回一个承诺
返回http美元({方法:‘得到’,url: '/someUrl '});
},//另一个承诺的例子。如果你需要做一些//处理结果,使用犹豫,和你//承诺免费链接。这是另一个//解决的典型用例。
promiseObj2:函数(http) {
返回http美元({方法:‘得到’,url: '/someUrl '})
不要犹豫(功能(数据){
返回doSomeStuffFirst(数据);
});
},//使用服务的名字字符串示例。//这将寻找一个“翻译”服务//模块并返回它。//注意:服务可以返回一个承诺//将工作就像上面的例子
翻译:“翻译”,//例子显示注射服务//解析函数。服务然后返回一个//保证。提示:注入stateParams美元//访问url参数。
translations2:函数(翻译,stateParams美元){//假设getLang服务方法//使用http美元获取一些翻译。//还假设我们的url是“朗/:/home”。
返回translations.getLang ($ stateParams.lang);
},//例子显示返回的定制的承诺
问候:函数(q,超时美元){
var延迟=$ q.defer ();
美元超时(函数(){
deferred.resolve(“你好!”);
},1000);
返回deferred.promise;
}
},//控制器等待每一个>
解决:{
资源:()=比;{
返回新的承诺(
解决=比;{
要求([’。/js/信息。js '],()=比;{
解决({
css:要求(“。/css/add_message.css”),
模板:要求(’。/html/add_message.html '),
控制器:要求(“。/js/add_message.js”)
})
})
}
);
}
}
之前
可以在要求里面将服务注入,如代码中的message.js。而为了将服务进行异步加载我们不能用普通的.factory或者.service。而需要调用provide.factory美元或美元者provide.service
如果采用webpack进行编译打包的话就需要webpack.optimize.CommonsChunkPlugin的支持,这样可以对js进行拆分打包,达到异步加载js的目的。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
