AngularJS 1.4.0 The argument "MainController" is not a function, received undefined

Question

(function () { var app = angular.module("Sports", []); var MainController = function($scope, $http) { var onUser = function (response) { obj = JSON.parse(response); $scope.sport = angular.fromJson(obj); }; $http.get("/api/SportApi/Get").success(function (response) { obj = JSON.parse(response); $scope.sport = angular.fromJson(obj); }); }; app.controller("MainController", ["$scope", "$http", MainController]); }()); 

So this script does not work, getting an error, it cannot find the "main controller as a function", what is the problem?

EDIT: The cause of the error in this function:

  function consoleLog(type) { var console = $window.console || {}, logFn = console[type] || console.log || noop, hasApply = false; // Note: reading logFn.apply throws an error in IE11 in IE8 document mode. // The reason behind this is that console.log has type "object" in IE8... try { hasApply = !!logFn.apply; } catch (e) {} if (hasApply) { return function() { var args = []; forEach(arguments, function(arg) { args.push(formatError(arg)); }); return logFn.apply(console, args); //throws exception }; } 

Answer 1

Fixed: fiddle . Perhaps the problem is in the immediate function. Also fixed ng ng-app and response processing

HTML

 <div ng-app="Sports"> <div ng-controller="MainController"> <table class="table table-striped table-hover"> <thead>Sport</thead> <tr ng-repeat="x in sport"> {{sport}} </tr> </table> </div> </div> 

Js

 angular .module("Sports", []) .controller("MainController", ["$scope", "$http", function($scope, $http) { $http.get("https://www.googleapis.com/books/v1/volumes?q=isbn:0747532699") .success(function (response) { console.log(response); $scope.sport = response.items; }); }]); 

Update

Plunker version for AngularJS v1.3.x

Answer 2

Questions for the order: -

  app.controller("MainController", MainController); var MainController = function($scope, $http) { var onUser = function (response) { obj = JSON.parse(response); $scope.sport = angular.fromJson(obj); }; $http.get("/api/SportApi/Get").success(function (response) { obj = JSON.parse(response); $scope.sport = angular.fromJson(obj); }); }; MainController.$inject = ['$scope','$http']; 

Answer 3

Here is a working script, it's just basic, because I think you have problems finding your controller ... I hope this link helps you

 (function(){ var app = angular.module("sports",[]); app.controller("MainController", function($scope){ this.msg = 'Hello World'; }); })(); 

I assume that you are faced with a closure (brackets defining self-starting functions in JS.), Which I fixed.

And follow the definition structure proposed by Angular Docs.

Answer 4

For angularjs v1.4.x, the success and error methods are now deprecated

  // Simple GET request example : $http.get('/someUrl'). then(function(response) { // this callback will be called asynchronously // when the response is available }, function(response) { // called asynchronously if an error occurs // or server returns response with an error status. }); 

then() method is a replacement for the obsolete success() method

Github Link Link

API Link Link