$q.reject and $state.resolve not working as expected - angularjs

Question

I have this function:
// Gets our sport
get: function (slug, kit) {
// If we have no slug, exit the function
if (!slug)
return $q.reject('No slug supplied.');
// Try to get our sport
return moltin.categories.get(slug).then(function (response) {
// If we have a kit
if (kit) {
// Assign our sport to our kit
kit.team.sport = response.slug;
}
// Return our response
return response;
});
}
As you can see I am using $q.reject() if my required parameter is not set.
The problem is, in a $state resolve method, if I invoke the function like this:
resolve: {
sport: ['$stateParams', 'kit', 'SimpleDesignerSharedSportService', function ($stateParmas, kit, sharedSport) {
// Get our slug
var slug = $stateParmas.sport || kit.team.sport;
// Get our sport
return sharedSport.get(slug, kit);
}]
}
my view will not be shown (it is just blank). But if I change my resolve to this:
resolve: {
sport: ['$stateParams', 'kit', 'SimpleDesignerSharedSportService', function ($stateParmas, kit, sharedSport) {
// Get our slug
var slug = $stateParmas.sport || kit.team.sport;
// Get our sport
return sharedSport.get(slug, kit).then(function (response) {
return response;
}, function (error) {
return null;
});
}],
pageTitle: ['PageHead', function (service) {
service.setTitle('Kudos Sports - Create your kit');
}]
}
it works. I don't want to have to specify a success and fail method. Is there anyway I can get around it?

Answer 1

Resolves expect a promise so that it can resolve it before loading the page. There are a few issues in your code that I will help you identify and solve, however I strongly suggest you take this short course on Udacity and brush up on your understanding of promises.
Firstly, we need to refactor your get method to return a promise once your data is resolved.
// Gets our sport
get: function (slug, kit) {
var deferred = $q.defer();
// If we have no slug, exit the function
if (!slug)
deferred.reject('No slug supplied.');
// Try to get our sport
moltin.categories.get(slug).then(function (response) {
// If we have a kit
if (kit) {
// Assign our sport to our kit
kit.team.sport = response.slug;
}
// Return our response
deferred.resolve(response);
});
return deferred.promise;
}
As you can see, you can't just return the data in the promise. You have to create another promise and return that once there is data.
The next step is to consume this function within a resolve. You seems to have used $stateParmas instead of $stateParams so we correct that as well. Also, it is bad practice to name your services differently in different places. Keeping consistent with naming conventions makes debugging much easier.
resolve: {
sport: ['$stateParams', 'kit', 'SimpleDesignerSharedSportService', function ($stateParams, kit, SimpleDesignerSharedSportService) {
// Get our slug
var slug = $stateParams.sport || kit.team.sport;
// Get our sport
return SimpleDesignerSharedSportService.get(slug, kit);
}]
}
Now the get method returns a promise that only resolves once there is a response from fetching the categories and you once again have control of the data flow.