javascript - angularJS 1.4.0 Argument 'MainController' is not a function, got undefined - Stack Overflow

admin管理员组

文章数量:1025217

 (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 yeah, this script is not working, getting the error it can not find the "main controller as function" whats the problem?

EDIT: the error cause is 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
    };
  }

 (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 yeah, this script is not working, getting the error it can not find the "main controller as function" whats the problem?

EDIT: the error cause is 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
    };
  }

• javascript
• angularjs
• model-view-controller

Share Improve this question Follow edited Feb 2, 2015 at 9:49 Almin Islamovic asked Feb 2, 2015 at 9:22 Almin IslamovicAlmin Islamovic 27811 gold badge55 silver badges1313 bronze badges 8

• if you do a console.log(MainController); just before the last line, what do you get? – satchcoder Commented Feb 2, 2015 at 9:32
• If you ask this kind of question - you should not use beta version of the framework. Stay with stable one. – lujcon Commented Feb 2, 2015 at 9:50
• Could you provide a jsfiddle or something ? – Bongo Commented Feb 2, 2015 at 9:52
• @satchcoder if i do that, i get the function until the last line, – Almin Islamovic Commented Feb 2, 2015 at 9:53
• @lujcon Tried it.. doesn't work either.. – Almin Islamovic Commented Feb 2, 2015 at 9:53

 |  Show 3 more ments

4 Answers 4

Sorted by: Reset to default 3

Fixed you fiddle. Possibly, problem is in immediate function. Also fixed 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./books/v1/volumes?q=isbn:0747532699")
            .success(function (response) {
                console.log(response);
                $scope.sport = response.items;
            });
    }]);

Update

Plunker version for AngularJS v1.3.x

Order matters :-

 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'];

Here is Working Fiddle, Its just a basic because I guess you have problem with finding your controller... I hope it helps you link

(function(){
    var app = angular.module("sports",[]);

    app.controller("MainController", function($scope){

    this.msg = 'Hello World';
    });
})();

I guess you have have messed up with closure (Brackets defining self invoking functions in JS. ), which I have corrected.

And do follow definition structure proposed by Angular Docs.

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 the replacement for deprecated method success()

Github Reference link

API Reference link

 (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 yeah, this script is not working, getting the error it can not find the "main controller as function" whats the problem?

EDIT: the error cause is 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
    };
  }

 (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 yeah, this script is not working, getting the error it can not find the "main controller as function" whats the problem?

EDIT: the error cause is 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
    };
  }

• javascript
• angularjs
• model-view-controller

Share Improve this question Follow edited Feb 2, 2015 at 9:49 Almin Islamovic asked Feb 2, 2015 at 9:22 Almin IslamovicAlmin Islamovic 27811 gold badge55 silver badges1313 bronze badges 8

• if you do a console.log(MainController); just before the last line, what do you get? – satchcoder Commented Feb 2, 2015 at 9:32
• If you ask this kind of question - you should not use beta version of the framework. Stay with stable one. – lujcon Commented Feb 2, 2015 at 9:50
• Could you provide a jsfiddle or something ? – Bongo Commented Feb 2, 2015 at 9:52
• @satchcoder if i do that, i get the function until the last line, – Almin Islamovic Commented Feb 2, 2015 at 9:53
• @lujcon Tried it.. doesn't work either.. – Almin Islamovic Commented Feb 2, 2015 at 9:53

 |  Show 3 more ments

4 Answers 4

Sorted by: Reset to default 3

Fixed you fiddle. Possibly, problem is in immediate function. Also fixed 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./books/v1/volumes?q=isbn:0747532699")
            .success(function (response) {
                console.log(response);
                $scope.sport = response.items;
            });
    }]);

Update

Plunker version for AngularJS v1.3.x

Order matters :-

 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'];

Here is Working Fiddle, Its just a basic because I guess you have problem with finding your controller... I hope it helps you link

(function(){
    var app = angular.module("sports",[]);

    app.controller("MainController", function($scope){

    this.msg = 'Hello World';
    });
})();

I guess you have have messed up with closure (Brackets defining self invoking functions in JS. ), which I have corrected.

And do follow definition structure proposed by Angular Docs.

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 the replacement for deprecated method success()

Github Reference link

API Reference link

本文标签：