Angular ocLazyLoad 与ui-router的配合使用

1.resolve

state(配置路由时)的resolve参数：

resolve：object，将会被注入controller去执行的函数，<string,function>形式。

基于uiRouter的resolve是在加载controller和template以前所执行的一系列操做，它帮助咱们初始化咱们所要前往的那一个视图。只有be solved(操做完成)，controller才会被实例化。所以，咱们能够在resolve步骤里面加载咱们所须要的controller。

$stateProvider.state('index', { url: "/", // root route views: { "lazyLoadView": { controller: 'AppCtrl', // This view will use AppCtrl loaded below in the resolve templateUrl: 'partials/main.html' } }, resolve: { // Any property in resolve should return a promise and is executed before the view is loaded loadMyCtrl: ['$ocLazyLoad', function($ocLazyLoad) { // you can lazy load files for an existing module return $ocLazyLoad.load('js/AppCtrl.js'); }] } });

resolve中加载AppCtrl.js,可是请求都是异步的，返回的顺序不是按照顺序来的。在loadMyCtrl中须要调用AppCtrl里面的getBookById()方法。这个时候虽然在load里面已经加载AppCtl.js，可是在loadMyctl中是没法使用get()方法，
因此在loadMyctl对象中，因此必须从新加载AppCtl.js。这个时候就须要$injector中的get()方法。

$stateProvider.state('index', { url: "/", resolve: { loadMyCtl: ['$ocLazyLoad', '$injector', function($ocLazyLoad, $injector) { return $ocLazyLoad.load('js/ServiceTest.js').then(function() { var $serviceTest = $injector.get("$serviceTest"); $serviceTest.get(); }); }] } });