ui-route相比于angularjs的原生視圖路由更好地支持了路由嵌套，狀態轉移等等。隨著視圖不斷增加，打包的js體積也會越來越大，比如我在應用里面用到了wangeditor里面單獨依賴的jquery就300多k。異步加載各個組件就很有必要。在這里我就以ui-route為框架來進行異步加載說明。

首先看一下路由加載文件

angular.module('webtrn-sns').config(['$stateProvider', function ($stateProvider) {  $stateProvider.state({      name: 'home.message',      url: '/message',      abstract: true,      templateProvider: ['resources', function (resources) {        return resources.template      }],      controllerProvider: ['resources', (resources)=> {        return resources.controller      }],      onEnter: ['resources', (resources)=>resources.css.use()],      onExit: ['resources', (resources)=>resources.css.unuse()],      resolve: {        resources: ()=> {          return new Promise(            resolve => {              require([], () => {                resolve({                  css: require('./css/message_box.css'),                  template: require('./html/message_box.html'),                  controller: require('./js/message_box.js')                })              })            }          );        }      }    }  ).state({      name: 'home.message.add_message',      url: '/add_message?isReply&toUid&title',      params: {isReply: null, toUid: null, title: null},      templateProvider: ['resources', function (resources) {        return resources.template      }],      controllerProvider: ['resources', (resources)=> {        return resources.controller      }],      onEnter: ['resources', (resources)=>resources.css.use()],      onExit: ['resources', (resources)=>resources.css.unuse()],      resolve: {        resources: ()=> {          return new Promise(            resolve => {              require(['./js/message.js'], () => {                resolve({                  css: require('./css/add_message.css'),                  template: require('./html/add_message.html'),                  controller: require('./js/add_message.js')                })              })            }          );        }      }    }  )}])

這個是路由狀態的一個聲明文件，name,url,param字段的方式不變，關鍵是看resolve這個部分。根據ui-route的resolve文檔,resolve是為了給state或者controller進行自定義注入對象的。

下面是舉出文檔中關于resolve的例子：

$stateProvider.state('myState', {   resolve:{     // Example using function with simple return value.     // Since it's not a promise, it resolves immediately.     simpleObj: function(){      return {value: 'simple!'};     },     // Example using function with returned promise.     // This is the typical use case of resolve.     // You need to inject any services that you are     // using, e.g. $http in this example     promiseObj: function($http){      // $http returns a promise for the url data      return $http({method: 'GET', url: '/someUrl'});     },     // Another promise example. If you need to do some      // processing of the result, use .then, and your      // promise is chained in for free. This is another     // typical use case of resolve.     promiseObj2: function($http){      return $http({method: 'GET', url: '/someUrl'})        .then (function (data) {          return doSomeStuffFirst(data);        });     },         // Example using a service by name as string.     // This would look for a 'translations' service     // within the module and return it.     // Note: The service could return a promise and     // it would work just like the example above     translations: "translations",     // Example showing injection of service into     // resolve function. Service then returns a     // promise. Tip: Inject $stateParams to get     // access to url parameters.     translations2: function(translations, $stateParams){       // Assume that getLang is a service method       // that uses $http to fetch some translations.       // Also assume our url was "/:lang/home".       return translations.getLang($stateParams.lang);     },     // Example showing returning of custom made promise     greeting: function($q, $timeout){       var deferred = $q.defer();       $timeout(function() {         deferred.resolve('Hello!');       }, 1000);       return deferred.promise;     }   },   // The controller waits for every one of the above items to be   // completely resolved before instantiation. For example, the   // controller will not instantiate until promiseObj's promise has    // been resolved. Then those objects are injected into the controller   // and available for use.    controller: function($scope, simpleObj, promiseObj, promiseObj2, translations, translations2, greeting){     $scope.simple = simpleObj.value;     // You can be sure that promiseObj is ready to use!     $scope.items = promiseObj.data.items;     $scope.items = promiseObj2.items;     $scope.title = translations.getLang("english").title;     $scope.title = translations2.title;     $scope.greeting = greeting;   }  })