Angular router resolve results in an unknown provider error

Question

I am trying to use Angular's routing to resolve the necessary objects for the controller scope. I have read a few tutorials on how to do this but I still get an Unknown Provider error. The issue seems to be with project being injected into ProjectDetailCtrl.

app.js

var myApp = angular.module('myApp', ['ngRoute']);

myApp.config( function ($interpolateProvider, $routeProvider) {
    $routeProvider
    ...
    .when('/project/:projectId', {
        templateUrl : 'partials/_project_detail.html',
        controller: 'ProjectDetailCtrl',
        resolve: {
            project: function ($route, MyService) {
                return MyService.get('projects/', $route.current.params.projectId).then(function(data) {
                    console.log('VERIFY DATA: ', data);
                    return data;
                });
            }
        }

controllers.js

.controller('ProjectDetailCtrl', function ($scope, project) {
    $scope.project = project;
}

Edit

services.js

.factory('MyService', function ($http, $q) {

var MyService = {
    ...
    get: function (items_url, objId) {
        var defer = $q.defer();
        $http({method: 'GET', 
            url: api_url + items_url + objId}).
            success(function (data, status, headers, config) {
                defer.resolve(data);
            }).error(function (data, status, headers, config) {
                defer.reject(status);
            });
        return defer.promise;
    },

Edit 2

The issue is apparently not with the Service method, as this also produces the error:

app.js

var myApp = angular.module('myApp', ['ngRoute']);

myApp.config( function ($interpolateProvider, $routeProvider) {
    $routeProvider
    ...
    .when('/project/:projectId', {
        templateUrl : 'partials/_project_detail.html',
        controller: 'ProjectDetailCtrl',
        resolve: {
            project: {title: 'foo'}
        }
     });
})

I can verify my resolve function is being returned properly, but Angular still complains that project is unidentified. What is this issue here? I have tried making my controllers into a module and passing that to the myApp module, but I still get the same Unidentified Provider issue for project.

Note: I am using Angular 1.2.9.

Edit 3: solution

So the issue was this line in my template:

<!-- WRONG: <div ng-controller="ProjectDetailCtrl">-->
<div>

  <h2 ng-show="project">Project: <strong>{{ project.title }}</strong></h2>

</div>

Apparently the ng-controller directive cannot be use with resolve.

Answer 1

You forgot to add ngRoute as a dependency for your module. Thats why $routeProvider and $route service are undefined.

Update:

See this example. Problem was in ng-controller directive