Seeking help with my Angular project as I am facing an issue with resolve and $resource. Despite spending a whole day on it, I couldn't find a solution. When using resolve to fetch data with $resource and ui-router, the service method never gets called even though the state loads fine. The state includes a ui-grid which appears empty. The project currently utilizes a json-server for data, but no http request is shown on the server. Below is some relevant code:
angular.module('carsApp', ['ui.router', 'ngResource', 'ui.bootstrap', 'ui.grid'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app.main.car', {
url: "",
abstract: true,
views: {
'grid': {
templateUrl: 'views/crid.html',
controller: 'GridController'
},
'cars': {
templateUrl: 'views/cars.html',
controller: 'CarController'
}
},
resolve: {
cars: ['gridFactory', function(gridFactory) {
return gridFactory.getCars();
}],
dealer: function() {
return {};
}
}
})
.state('app.main.car.all', {
url: "car/summary",
views: {
'summary': {
templateUrl: 'views/summary.html'
}
},
resolve: {
cars: ['gridFactory', function(gridFactory) {
return gridFactory.getCars();
}],
dealer: function() {
return {};
}
}
});
$urlRouterProvider.otherwise('/');
});Service:
.service('gridFactory', ['$resource', 'baseURL', function($resource, baseURL) {
this.getCars = function() {
return $resource(baseURL + "cars", null, {
'query': {
method: 'GET',
isArray: true,
}
});
}
}Controller:
.controller('GridController', ['$scope', '$stateParams', '$state', 'gridFactory', 'cars', 'dealer', function($scope, $stateParams, $state, gridFactory, cars, dealer) {
$scope.cars = cars;
$scope.dealer = dealer;
console.log('scope objects ' + JSON.stringify($scope.cars));
}Would appreciate any insights into what I might be missing. Thank you for your time!