AngularJS UI-Router:在应用加载之前预加载 $http 数据 [英] AngularJS UI-Router: preload $http data before app loads

问题描述

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

I need help from AngularJS experts that have worked with ui-router plugin. Can some provide a plunker example that works on preloading a $http data request before the app runs?

我做了一些研究，但最接近的是这两个堆栈溢出:

I did some research, but closest I came are these two stack overflows:

AngularJS:如何在应用加载前加载 json 提要?

将 AngularJS 路由更改延迟到加载模型以防止闪烁

我使用 angularJS 还不到一周，因此我们将不胜感激.

I am less than a week into angularJS, so any help will be greatly appreciated.

推荐答案

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

您可以使用 resolve 为您的控制器提供针对状态自定义的内容或数据.resolve 是一个可选的依赖关系映射，应该被注入到控制器中.

You can use resolve to provide your controller with content or data that is custom to the state. resolve is an optional map of dependencies which should be injected into the controller.

如果这些依赖项中的任何一个是 promise，它们将在控制器被实例化和 $routeChangeSuccess 事件被触发之前被解析并转换为一个值.

If any of these dependencies are promises, they will be resolved and converted to a value before the controller is instantiated and the $routeChangeSuccess event is fired.

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

The resolve property is a map object. The map object contains key/value pairs of:

• key – {string}:要注入控制器的依赖项的名称.
• 工厂 - {string|function}:
  • 如果是字符串，则它是服务的别名.
  • 否则如果是函数，则将其注入并将返回值视为依赖项.如果结果是承诺，则在控制器实例化之前解决，并将其值注入控制器.

  示例:

  下面resolve 中的每个对象都必须在控制器被实例化之前被解析(通过deferred.resolve() 如果它们是一个promise).注意每个 resolve 对象是如何作为参数注入控制器的.

  Each of the objects in resolve below must be resolved (via deferred.resolve() if they are a promise) before the controller is instantiated. Notice how each resolve object is injected as a parameter into the controller.

  $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;
      }
  })
  

  这篇关于AngularJS UI-Router:在应用加载之前预加载 $http 数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！