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未定义了

结果就是这样 可以正常使用了