AngularJS $http undefined

Question

I get TypeError: Cannot call method 'get' of undefined when running this module:

angular.module('EventList', [])

.config([ '$routeProvider', function config($routeProvider){
    $routeProvider.when(Urls.EVENT_LIST_PAGE, {
        templateUrl: 'app/EventList/event-list.html',
        controller: 'EventListCtrl'
      });
 }])


.controller('EventListCtrl', ['$scope', '$http', function EventListController($scope, $location, $http) {
  $scope.events = [];
  $http.get('http://localhost:8000/event').
    success(function (data, status) {
      $scope.events = data;
      for (var i = 0; i < $scope.events.length; i++) {
        $scope.events[i].event_url = ('#' + Urls.EVENT_PAGE + '/' + $scope.events[i]._id);
      }
    }).
    error(function (data, status) {
      $scope.data = data || "Request failed";
    }
  );

}]);

What am I doing wrong here and how can I fix it?

Answer 1

When using the bracket notation the dependency list before the function needs to match the services being injected into the function.

You have an extra $location service in your EventsListController function so change this:

.controller('EventListCtrl', ['$scope', '$http', function EventListController($scope, $location, $http) {
// controller code goes here
}]);

to this:

.controller('EventListCtrl', ['$scope', '$http', function EventListController($scope, $http) {
// controller code goes here
}]);

The key change being: function EventListController($scope, $http) instead of function EventListController($scope, $location, $http)