AngularJS ui-router not resolve service call

Question

I'm trying to use resolve feature in my ui-router state provider. I've configured it as follows:

app.config(['$stateProvider', '$urlRouterProvider', '$locationProvider', function ($stateProvider, $urlRouterProvider, $locationProvider) {
...
$stateProvider.state('expositions', {
        url: '/Expositions',
        views: {
            "container": {
                templateUrl: '/views/expositions.html', 
                resolve: {
                    expositions: function ($http) {
                        return $http.get('/api/site/expositions').then(
                            function (response) {
                                console.log("DATA", response.data);
                                return response.data;
                            },
                            function (error) {
                                console.log("ERROR", error);
                            })
                    }
                }
            }
        }
    })
...
}

In this case when I click on expositions link the resolve is not called and the navigation is not performed: nothing happens.

I've also tried to configure this with a factory (a resources service) as follows:

app.config(['$stateProvider', '$urlRouterProvider', '$locationProvider', function ($stateProvider, $urlRouterProvider, $locationProvider) {
...
$stateProvider.state('expositions', {
        url: '/Expositions',
        views: {
            "container": {
                templateUrl: '/views/expositions.html', 
                resolve: {
                    expositions: function (Resources) {
                        console.log("DATA", Resources);
                        return Resources.expositions();
                    }
                }
            }
        }
    })
...
}

The resource service is defined in a separate file as follows:

resourcesService.js

(function () {
    'use strict';

    angular
        .module('site')
        .factory('Resources', ['$resource',
            function ($resource) {
                return $resource('/api/site/:action/:id', {}, {

                    ...

                    expositions: {
                        method: 'GET',
                        params: { action: "expositions" },
                        isArray: true
                        //transformResponse: function (data) {
                        //    return angular.fromJson(data).list
                        //}
                    },

                    ...
                });
            }
        ]);
})();

Also in this case nothing happens and the resolve function is not called.

What am I missing?

Thanks all in advance!

H Varma · Accepted Answer · 2016-11-11 10:44:27Z

1

Try giving this

expositions: ['$http',function ($http) {

Something like this

resolve: {
                expositions: ['$http',function ($http) {
                    return $http.get('/api/site/expositions').then(
                        function (response) {
                            console.log("DATA", response.data);
                            return response.data;
                        }],
                        function (error) {
                            console.log("ERROR", error);
                        })
                }

Let me know if this worked

answered Nov 11, 2016 at 10:44

H Varma

7505 gold badges14 silver badges30 bronze badges

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

Collectives™ on Stack Overflow

AngularJS ui-router not resolve service call

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related