ui-route相比于angularjs的原生视图路由更好地支持了路由嵌套，状态转移等等。随着视图不断增加，打包的js体积也会越来越大，比如我在应用里面用到了wangeditor里面单独依赖的jquery就300多k。异步加载各个组件就很有必要。在这里我就以ui-route为框架来进行异步加载说明。
首先看一下路由加载文件
{
return resources.controller
}],onEnter: ['resources',(resources)=>resources.css.use()],onExit: ['resources',(resources)=>resources.css.unuse()],resolve: {
resources: ()=> {
return new Promise(
resolve => {
require([],() => {
resolve({
css: require('./css/message_box.css'),template: require('./html/message_box.html'),controller: require('./js/message_box.js')
})
})
}
);
}
}
}
).state({
name: 'home.message.add_message',url: '/add_message?isReply&toUid&title',params: {isReply: null,toUid: null,title: null},resolve: {
resources: ()=> {
return new Promise(
resolve => {
require(['./js/message.js'],() => {
resolve({
css: require('./css/add_message.css'),template: require('./html/add_message.html'),controller: require('./js/add_message.js')
})
})
}
);
}
}
}
)
}])
这个是路由状态的一个声明文件，name,url,param字段的方式不变，关键是看resolve这个部分。根据ui-route的resolve文档,resolve是为了给state或者controller进行自定义注入对象的。
下面是举出文档中关于resolve的例子：
我们可以看到resolve的对象是支持Promise的。
再回到我们之前的代码templateProvider和controllerProvider我们注入了resources的模板对象和controller对象，onEnter和onExit注入了css模块。
如果controller中依赖了服务怎么办的？
{
return new Promise(
resolve => {
require(['./js/message.js'],() => {
resolve({
css: require('./css/add_message.css'),controller: require('./js/add_message.js')
})
})
}
);
}
}
可以在require里面将服务注入，如代码中的message.js。而为了将服务进行异步加载我们不能用普通的.factory或者.service。而需要调用$provide.factory或者$provide.service
如果采用webpack进行编译打包的话就需要webpack.optimize.CommonsChunkPlugin的支持，这样可以对js进行拆分打包，达到异步加载js的目的。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
