angular 引入ocLazyLoad实现js、controller懒加载
项目之前是直接在index.html中引用了controller.js,其中包含了所有的controller。现引入ocLazyLoad实现按需加载,到指定页面再加载指定js、controller
1、原引用controller.js,首页首次加载时间长,文件打包之后很大
2、引入路由懒加载,直接使用npm或者bower
npm install oclazyload
ocLazyLoad相关文件被下载到node_modules文件夹下。在index.html文件中引用ocLazyLoad.min.js
3、将ocLazyLoad注入到app中
4、在路由配置文件中(app.js)中修改路由配置部分:
原:
.state('index',{
url: '',
templateUrl: 'views/login/login.html',
controller: 'loginCtrl'
})
改为:
.state('index',{
url: '',
templateUrl: 'views/login/login.html',
controller: 'loginCtrl',
resolve: {
loadMyCtrl: ['$ocLazyLoad', function($ocLazyLoad){
return $ocLazyLoad.load('views/login/loginCtrl.js')
}]
}
})
5、记录一下碰到的问题,在加入懒加载之后注释掉controller.js的引用文件,单个页面的js可以被获取到,但是提示controller未定义
查了很多,最后找到解决方法:
在配置路由的地方,加上"$controllerProvider"
app.controller = $controllerProvider.register;
这样才能将angularjs的$controllerProvider服务传入该对象中,$controllerProvider对加载进来的controller文件进行依赖关系的注入,就可以实现按需调用controller不会报错controller未定义了
结果就是这样 可以正常使用了