Error: Unknown provider: employeesProvider <- employees

Question

I am having a heck of a time trying to figure out why I'm getting the Unknown provider error in Angular. I've checked every other question I could find on the subject and most suggest an error in dependency injection. However, it doesn't seem to me like I'm forgetting to inject anything. I've been trying to get the resolve property to work like this post by Misko. I'm able to console log out the employee data after it's resolved, but then I get the Unknown provider error, which prevents the data from being shown on the page.

Here is my router:

    "use strict";

    var app = angular.module('app',[
      'employeeServices'
    ]);

    app.config(appRouter);

    function appRouter ($routeProvider) {
      $routeProvider
        .when('/employees/:account_id', {
          controller: 'EmployeeCtrl',
          templateUrl: 'view/employee/view.html',
          resolve: employeeCtrl.resolve
        })

        .otherwise({ redirectTo: '/' });
    }

Here is my controller

    var employeeCtrl = app.controller('EmployeeCtrl', [
      '$scope',
      'employees',
      function ($scope, employees) {
        $scope.employee = employees;
        console.log($scope.employee);
      }
    ]);

    employeeCtrl.resolve = {
      employees: function (Employee, $q, $route) {
        var deferred = $q.defer();
        console.log("current params: ", $route.current.params.account_id);
        Employee.getOne({ id: $route.current.params.account_id }, function (successData) {
          deferred.resolve(successData);
        }, function (errorData) {
          deferred.reject(errorData);
        });
        return deferred.promise;
      }
    };

And my factory:

    angular.module('employeeServices', ['ngResource'])
      .factory('Employee', ['$resource', function ($resource) {
        return $resource('/employees/:id/json',
          {
            id: '@account_id'
          },
          {
            'save': {
              method: 'POST',
              isArray: false
            },
            'update': {
              method: 'PUT',
              params: {
                id: '@account_id'
              }
            },
            'remove': {
              method: 'DELETE',
              params: {
                id: '@account_id'
              }
            },
            'getOne': {
              method: 'GET',
              params: {
                id: '@account_id'
              },
              isArray: false
            },
            'query': {
              method: 'GET',
              params: {
                id: '@account_id'
              },
              isArray: true
            }
          }
        );
      }]);

Any suggestions would be so greatly appreciated!

Answer 1

So the problem was that I was setting up the EmployeeCtrl controller through ng-controller inside my partial's view, like so:

    <div class="viewPage" ng-controller="EmployeeCtrl">

When using resolve, however, the controller set up must be done through the router in order for it to be available at runtime. I removed the ng-controller="EmployeeCtrl...

    <div class="viewPage">

... and presto, like nothing ever happened.

I have to note that I received help from the kind, patient folks over on the AngularJS IRC channel...

Answer 2

Since you defined the factory called Employee, you should use the exact name to refer to this module when you inject it to the controller.

var employeeCtrl = app.controller('EmployeeCtrl', [
      '$scope',
      'employees',

Change to

var employeeCtrl = app.controller('EmployeeCtrl', [
      '$scope',
      'Employee',