AngularJS UI-Router：在应用程序加载前预加载$ http数据

Question

我需要使用ui-router插件的AngularJS专家的帮助。有些人可以提供一个在应用程序运行之前预加载$ http数据请求的plunker示例吗？

我做了一些研究，但最近我来的，都是这两个栈溢出：

AngularJS: How to load json feed before app load?

Delaying AngularJS route change until model loaded to prevent flicker

我不到一个星期到angularJS，所以任何帮助将不胜感激。

Answer 1

从https://github.com/angular-ui/ui-router/wiki#resolve

您可以使用resolve向用户提供的内容或数据控制器是自定义的状态。 resolve是应该注入控制器的依赖关系的可选映射。

如果这些依赖关系中的任何一个都是promise，它们将被解析并转换为值，然后控制器被实例化并激发$ routeChangeSuccess事件。

resolve属性是一个地图对象。地图对象包含以下键/值对：

• key - {string}：要注入控制器的依赖项的名称。
• 厂 - {字符串|功能}：
  • 如果字符串，那么它是一个服务的别名。
  • 否则，如果函数，那么它被注入并返回值被视为依赖。如果结果是承诺，则在控制器实例化并将其值注入到控制器之前解决。

实例：

每个在resolve对象下面必须解决（经由deferred.resolve()如果它们是一个承诺）之前，所述控制器被实例化。注意每个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". 
      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.items; 
     $scope.items = promiseObj2.items; 

     $scope.title = translations.getLang("english").title; 
     $scope.title = translations2.title; 

     $scope.greeting = greeting; 
    } 
})