AngularJS UI的路由器：preLOAD $ HTTP应用程序加载数据之前 [英] AngularJS UI-Router: preload $http data before app loads

问题描述

我需要从已经与UI路由器插件工作AngularJS专家的帮助。可以提供一些上$ P $工作ploading一个$ HTTP数据请求plunker例如应用程序运行之前？

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:

<一个href=\"http://stackoverflow.com/questions/13308178/angularjs-how-to-load-json-feed-before-app-load\">AngularJS:如何应用负荷加载前JSON提要？

<一个href=\"http://stackoverflow.com/questions/11972026/delaying-angularjs-route-change-until-model-loaded-to-$p$pvent-flicker/11972028#11972028\">Delaying AngularJS路线改变，直到模型加载到prevent闪烁

我不到一个星期到angularJS少，所以任何帮助将大大AP preciated。

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

推荐答案

从<一个href=\"https://github.com/angular-ui/ui-router/wiki#resolve\">https://github.com/angular-ui/ui-router/wiki#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.

如果这些依赖关系都承诺，他们将被解析并转换为数值的之前控制器被实例化和$ 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.

的决心属性是一个映射对象。该地图对象包含键/值对：

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

• 键 - {string}里：一个依赖的名字被注入到控制器


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

  例子：

  在决心每个对象下面必须通过来解决（deferred.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的路由器：preLOAD $ HTTP应用程序加载数据之前的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！