利用ocLazyLoad加载controller的方法和问题

原创
2017/03/09 12:56
阅读数 288

   在AngluarJs中,可以利用LazyLoad方法可以异步的加载controller。在ui-router中写法如下:

  1  .state('app.projectList', {
  2             url: '/plist?page',
  3             templateUrl: 'admin/projectList.html',
  4             resolve: {
  5                 deps: ['$ocLazyLoad',
  6                     function ($ocLazyLoad) {
  7                         return $ocLazyLoad.load('admin/projectList_ctrl.js');
  8                     }
  9                 ]
 10             }
 11         })

在上述代码中,templateUrl是模板页面,projectList_ctrl.js中设置了controller。

同时,在ui-router中给出,利用resolve可以对contorller需要的数据进行预加载。这样就不用在controller中异步的去等待数据的载入。可以参考官方文档,或者AngularJS ui-router 用resolve、service预先加载数据的正确写法

但是,如果采用异步加载控制器的方式,就会提示错误:

Error: $injector:unpr Unknown Provider:

这样因为,在页面中,采用了ng-controller的方式进行绑定,所以就无法借助resolve方法进行数据预加载。

为了解决这种办法,可以采用如下方法:

  1  resolve: {
  2                 myData:function($http){
  3                     ... ...
  4                 },
  5                 deps: ['$ocLazyLoad','myData',
  6                     function ($ocLazyLoad,myData) {
  7                         app.constant('myData',myData);
  8                         return $ocLazyLoad.load('admin/projectList_ctrl.js');
  9                     }
 10                 ]
 11 
 12             },

也就是先让deps依赖myData,然后,在加载加载controller之前,手动的将数据注册为常量或者变量,在angluarjs中,常量变量也是Provider 。 这样在controller中就能通过加载依赖,获取到myData的值了。

展开阅读全文
加载中

作者的其它热门文章

打赏
0
0 收藏
分享
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部