angularjs – 需要在$stateProvider中执行resolve属性之前解析$http请求

我正在构建一个将在多个域上运行的角度应用程序.由于每个域上有不同的配置,我需要通过调用服务器来获取所有变量.该调用将返回包含不同rest url的 JSON对象.
我的问题是我需要在$stateProvider中的’resolve’步骤之前执行此调用,因为我已经有一个依赖于服务器配置对象的任务.

解决方法

应该在这里工作的是一个非常棒的功能$urlRouterProvider.deferIntercept();记录在这里：

$urlRouterProvider

The deferIntercept(defer)

disables (or enables) deferring location change interception.

If you wish to customize the behavior of syncing the URL (for example,if you wish to defer a transition but maintain the current URL),call this method at configuration time. Then,at run time,call $urlRouter.listen() after you have configured your own $locationChangeSuccess event handler.

api文档中的代码段：

var app = angular.module('app',['ui.router.router']);

app.config(function($urlRouterProvider) {

  // Prevent $urlRouter from automatically intercepting URL changes;
  // this allows you to configure custom behavior in between
  // location changes and route synchronization:
  $urlRouterProvider.deferIntercept();

}).run(function($rootScope,$urlRouter,UserService) {

  $rootScope.$on('$locationChangeSuccess',function(e) {
    // UserService is an example service for managing user state
    if (UserService.isLoggedIn()) return;

    // Prevent $urlRouter's default handler from firing
    e.preventDefault();

    UserService.handleLogin().then(function() {
      // Once the user has logged in,sync the current URL
      // to the router:
      $urlRouter.sync();
    });
  });

  // Configures $urlRouter's listener *after* your custom listener
  $urlRouter.listen();
});

而且,与此问题相关：

> AngularJS – UI-router – How to configure dynamic views

有working example – plunker

为了清楚说明,适合这个用例,让我们观察plunker的代码.

所以,首先我们可以看到.config()阶段.它确实可以访问提供商,但不能访问他们的服务(例如$http).还没有,服务本身将在以后提供……

app.config(function ($locationProvider,$urlRouterProvider,$stateProvider) 
{
    // this will put UI-Router into hibernation
    // waiting for explicit resurrection later
    // it will give us time to do anything we want... even in .run() phase
    $urlRouterProvider.deferIntercept();
    $urlRouterProvider.otherwise('/other');

    $locationProvider.html5Mode({enabled: false});
    $stateProviderRef = $stateProvider;
});

我们所做的是设置对提供者(可配置对象)的引用,以便稍后使用：$stateProviderRef.

最重要的是我们停止了UI-Router,并迫使他等待我们使用$urlRouterProvider.deferIntercept(); (见上文doc和引用)

有一个.run()阶段的摘录：

app.run(['$q','$rootScope','$http','$urlRouter',function ($q,$rootScope,$http,$urlRouter) 
  {

   // RUN phase can use services (conigured in config phase)
   // e.g. $http to load some data
    $http
      .get("myJson.json")
      .success(function(data)
      {

        // here we can use the loaded stuff to enhance our states
        angular.forEach(data,function (value,key) 
        { 
          var state = { ... }
          ...

          $stateProviderRef.state(value.name,state);
        });
        // Configures $urlRouter's listener *after* your custom listener

        // here comes resurrection of the UI-Router
        // these two important calls,will return the execution to the 
        // routing provider
        // and let the application to use just loaded stuff
        $urlRouter.sync();
        $urlRouter.listen();
      });
}]);

最重要的是,这个.run()只是执行ONCE.只有一次.我们要求.

我们还可以使用另一种技术：解析一个超级根状态的内部,这是所有状态层次结构根的父级.在这里查看所有细节：

Nested states or views for layout with leftbar in ui-router?