Angular ui-router get asynchronous data with resolve and promise/deferred - angularjs

Question

I've having a problem to get the resolve mechanism working in my application.
I separated the webservice call into an extra module and using deferred/promise to have callbacks.
Before showing the state "workflowdefinitions.detail", the app should load the workflow definition be using the workflowDefinitionId of the $stateParams and call the function "getWorkflowDefinition" of the workflowDefinitionService at the service module.
I tried out multiple things that I had read here, but can't get it working. How do I need to handle the returned promise to pass the return data to the workflowDefinition defined by resolve?
Can this work with my services or do I have to define the service in a different way?
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;
} ]);
Module for Services (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

This concept should be working. There is a plunker, which should be doing almost the same you've tried above. No changes, as is. (as is in the code above)
The only change - for example purposes - is the service method getWorkflowDefinition, which does delay because of $timeout service, but then returns the param passed
this.getWorkflowDefinition = function(param){
var deferred = $q.defer();
$timeout(function(){
deferred.resolve(param);
}, 750)
return deferred.promise;
};
So, your concept, design is working, check more here: plunker

Answer 2

Additionally you don't need the boiler plate for deferred/resolve everywhere.
This code
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;
can be simplified to
simple
return $http.get('http://localhost:8080/vms-atp-webapp/services/rest/workflows', config);
This is because the $http.get returns a promise which when fulfilled is internally resolved/rejected on success and error.