Resolve is rendering a blank page

1

I am attempting to use Resolve in my application. However, with my current code it is rendering a blank page. What is wrong with my approach?

My route:

.state('tab.recipe', {
    url: '/recipes/:recipeId',
    views: {
        'recipes-tab': {
            templateUrl: 'js/modules/recipes/partials/recipe.html',

            controller: 'RecipeController',

            resolve: {

                recipe : ['RecipesService', '$stateParams', '$q', function(RecipesService, $stateParams, $q) {
                    var defer = $q.defer();

                    RecipesService.getRecipe(0).success(function(data) {

                        defer.resolve(data);

                    });

                    return defer.promise;
                }]
            }

        }
    }

})

And the service

RecipesModule.service('RecipesService', ['$rootScope', '$http',
    function($rootScope, $http) {

		var recipes = [
			{ id : 0, title : 'A burger', image : 'img/1.png'}
		];

    	this.getRecipe = function(id) {
    		return recipes[id];
    	}

    }
]);
2

Your resolve is using .success. However, your service is returning a value instead of a promise. If your service doesn’t return promises, you can just do this:

'recipes-tab': {
            templateUrl: 'js/modules/recipes/partials/recipe.html',

            controller: 'RecipeController',

            resolve: {

                recipe : ['RecipesService', '$stateParams', function(RecipesService, $stateParams) {

                    return RecipesService.getRecipe(0);
                    
                }]
            }

        }
    }