Angularjs Angular ui路由器通过解析和承诺/延迟获取异步数据

我在应用程序中使用解析机制时遇到问题

我将webservice调用分离为一个额外的模块，并使用deferred/promise进行回调

在显示状态“workflowdefinitions.detail”之前，应用程序应使用$stateParams的workflowDefinitionId加载工作流定义，并在服务模块中调用workflowDefinitionService的函数“getWorkflowDefinition”

我尝试了很多我在这里读到的东西，但都没能让它工作。我需要如何处理返回的承诺，以将返回数据传递给resolve定义的workflowDefinition

这是否适用于我的服务，或者我是否必须以不同的方式定义服务

app.js

var atpApp = angular.module('atpApp', [ 'ui.router', 'workflowServices', 'workflowControllers' ]);

    atpApp.config([ '$stateProvider', '$urlRouterProvider', '$locationProvider', function($stateProvider, $urlRouterProvider , $locationProvider) {

        $urlRouterProvider.otherwise('/workflowdefinitions');

        $stateProvider.state('workflowdefinitions', {
            url : '/workflowdefinitions',
            controller : 'WorkflowDefinitionListCtrl',
            templateUrl : 'partials/workflowdefinition-list.html'
        })

        .state('workflowdefinitions.detail', {
            url : '/:workflowDefinitionId',
            views : {
                '@' : {
                    templateUrl : 'partials/workflowdefinition-detail.html',
                    controller : 'WorkflowDefinitionDetailCtrl',
                    resolve: {
                        workflowDefinition: function($stateParams, workflowDefinitionService) {                 
                            return workflowDefinitionService.getWorkflowDefinition($stateParams.workflowDefinitionId);
                        }
                    }
                }
            }
        });
    } ]);

    atpApp.run([ '$rootScope', '$state', '$stateParams', function($rootScope, $state, $stateParams) {
        $rootScope.$state = $state;
        $rootScope.$stateParams = $stateParams;
    } ]);

var workflowServices = angular.module('workflowServices', []);

workflowServices.service('workflowDefinitionService', function($http, $q) {

    var config = {headers:  {
        'Accept': 'application/json'
        }
    };

    this.getWorkflowDefinitions = function(){
        var deferred = $q.defer();
        $http.get('http://localhost:8080/vms-atp-webapp/services/rest/workflows', config).
        success(function(data, status) {
            deferred.resolve(data);
        }).error(function(data, status) {
            deferred.reject(data);
        });

        return deferred.promise;
    };

    this.getWorkflowDefinition = function(workflowDefinitionId){
        var deferred = $q.defer();
        $http.get('http://localhost:8080/vms-atp-webapp/services/rest/workflows/'+workflowDefinitionId, config).
        success(function(data, status) {
            deferred.resolve(data);
        }).error(function(data, status) {
            deferred.reject(data);
        });
        return deferred.promise;
    };

    this.activateWorkflowDefinition = function(workflowDefinitionId){
        var deferred = $q.defer();
        $http.post('http://localhost:8080/vms-atp-webapp/services/rest/workflows/'+workflowDefinitionId+"/activate", config).
        success(function(data, status) {
            deferred.resolve(data);
        }).error(function(data, status) {
            deferred.reject(data);
        });
        return deferred.promise;
    };

    this.deactivateWorkflowDefinition = function(workflowDefinitionId){
        var deferred = $q.defer();
        $http.post('http://localhost:8080/vms-atp-webapp/services/rest/workflows/'+workflowDefinitionId+"/suspend", config).
        success(function(data, status) {
            deferred.resolve(data);
        }).error(function(data, status) {
            deferred.reject(data);
        });
        return deferred.promise;
    };
});

服务模块（workflowservices.js）

---

这个概念应该是可行的。有一个，它应该做的几乎和你在上面尝试过的一样。没有改变，就像现在一样。（如上述代码所示）

唯一的更改（例如）是服务方法

getWorkflowDefinition

，它确实由于

$timeout

服务而延迟，但随后返回传递的参数

this.getWorkflowDefinition = function(param){
    var deferred = $q.defer();
    $timeout(function(){
      deferred.resolve(param);
    }, 750) 
    return deferred.promise;
};

---

因此，您的概念、设计正在发挥作用，请在此查看更多信息：

此外，您不需要锅炉板来延迟/解决任何问题

此代码

var deferred = $q.defer();
$http.post( 'http://localhost:8080/vms-atp-webapp/services/rest/workflows/' + workflowDefinitionId +"/suspend", config).
success(function(data, status) {
   deferred.resolve(data);
}).error(function(data, status) {
   deferred.reject(data);
});
return deferred.promise;

可以简化为 简单的

---

这是因为$http.get返回了一个承诺，一旦成功或出现错误，$http.get将在内部解决/拒绝该承诺。

Nice，您确实花了很多时间将所有代码复制到plunker。竖起大拇指！！！当我从我的控制器中移除DI时，就像在你的示例控制器中一样，这些东西正在工作。如果我想使用DI，控制器会是什么样子？对不起，不确定。。。从控制器中删除DI是什么意思？在我的plunker（您的代码；）中，所有内容都与您的。。。控制器从角度控制器的依赖项注入器获取所有constrcutor参数。它正在工作，因为它是。。。只要查一下你的服务电话。。。因为我想说的是：你的概念是正确的！正如ui routerSorry的意图，我的错！它只在我使用not依赖数组注释和控制器的构造函数的简单函数时起作用。就像你在plunker上的例子一样！使用基于数组的构造函数时，workflowDefinition的注入失败。据我所知，建议使用基于数组的构造函数依赖项定义。当为依赖项使用数组时，WorkflowDefinitionDetailCtrl的构造函数是什么样子的？我希望我已经正确地描述了它，因为AngularJS术语对我来说是非常新的。我已经更新了plunker，即

wctrl.js

文件，并使用了基于数组的控制器初始化（我的首选）。这应该能回答所有问题。。祝你好运；）

return $http.get('http://localhost:8080/vms-atp-webapp/services/rest/workflows', config);