angularjs - Angular ui-router 通过解析和 promise /延迟获取异步数据

Question

我在让解析机制在我的应用程序中运行时遇到问题。

我将 Web 服务调用分离到一个额外的模块中，并使用 deferred/promise 来进行回调。

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

我尝试了我在这里读过的多种内容，但无法使其正常工作。我需要如何处理返回的promise以将返回数据传递给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;
    } ]);

服务模块 (workflowSevices.js)

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

Answer 1

这个概念应该可行。有一个plunker ，它的作用应该与您上面尝试过的几乎相同。没有任何改变，照原样。 (如上面的代码所示)

唯一的变化 - 例如目的 - 是服务方法 getWorkflowDefinition，它会因为 $timeout 服务而延迟，但随后返回传递的参数

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

所以，您的概念、设计正在发挥作用，请在此处查看更多信息:plunker