I am facing an issue while trying to implement the resolve feature in my ui-router state provider. Here is how I have configured it:
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);
})
}
}
}
}
})
...
}
When clicking on the expositions link, the resolve function is not triggered and the navigation does not happen.
I also attempted to set it up using a factory (resources service) like this:
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 shown below:
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
//}
},
...
});
}
]);
})();
Even with this setup, the resolve function is not being invoked. What could be the issue?
Appreciate any help provided!