AngularJS: TypeError: Cannot read property 'get' of undefined

Question

I am trying to use a service inside my angular controller, however I am getting the error in the TypeError: Cannot read property 'get' of undefined.

This is how my app.js script look like:

angular
    .module('ToDoApp', ['ngAnimate', 'todoService'])
    .controller('ToDoController', ['$scope', function($scope, $http, Todo) {

        Todo.get()
            .success(function(data) {
                $scope.tasks = data;
            });
        // ...
     }]);

It doesn't know about the get propery. This is how Todo looks like:

angular.module('todoService', [])
    .factory('Todo', function($http) {
        return {
            get: function() {
                return $http.get('/todos');
            },
            // ...
        }
    });

And I'm loading the scripts in this order:

<script src="{{ asset('/scripts/services/todoService.js') }}"></script>
<script src="{{ asset('/scripts/app.js') }}"></script>

The error sounds to me like the controller isn't getting the service object correctly, like this dependency is missing. But I already loaded the dependency with the module.

What am I missing?

Answer 1

Deleted my previous comment, figured out what you had wrong. You're using the array notation to fix minification, but you're only listing $scope, you need to list the others as well, meaning you need to add the $http and the ToDo:

angular
    .module('ToDoApp', ['ngAnimate', 'todoService'])
    .controller('ToDoController', ['$scope', '$http', 'ToDo', function($scope, $http, Todo) {

        Todo.get()
            .success(function(data) {
                $scope.tasks = data;
            });
        // ...
     }]);