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?
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;
});
// ...
}]);