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(); }); }] } });