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

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

Radim Köhler · Accepted Answer · 2014-07-08 16:24:40Z

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

answered Jul 8, 2014 at 16:24

Radim Köhler

124k48 gold badges243 silver badges343 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Patrick Over a year ago

Nice, you've really took the time and copy all the code to plunker. Thumb up!!! The stuff is working, when I removed the DI from my controller like in your example controller. How would the controller look like if I would like to use DI?

Radim Köhler Over a year ago

Sory, not sure... what do you mean by removing DI from controller? In my plunker (your code;) is all as in your... the controller gets all constrcutor params from Dependency Injector of the angular. It is working as it is... just check your Service call... because what I tried to say: your concept is correct! as intended by ui-router

Patrick Over a year ago

Sorry, my fault! It only works when I'm using not dependency array annotation and a simple function for the constructor function of the controller. As you did in the example on plunker! The injection of the workflowDefinition fails when using the array based constructor. As I understood, it's recommended to use the array based definition of constructor dependencies. How would the constructor of WorkflowDefinitionDetailCtrl look like when using an array for the dependencies? I hope that I have described it correctly as the AngularJS terms are pretty new to me.

Radim Köhler Over a year ago

I've updated the plunker, the wctrl.js file and used array based init of controllers (my preferred). that should answer all.. good luck with Angular ;) plnkr.co/edit/JDk8LIdHm7NkwBUIKDTN?p=preview

bhantol · Accepted Answer · 2014-08-04 05:13:06Z

1

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.

answered Aug 4, 2014 at 5:13

bhantol

9,6368 gold badges48 silver badges85 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related