Argument 'cotroller' is not a function, got undefined

Question

This is my HTML file

<head>
    <meta charset="UTF-8"/>
    <title>CBIR</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="../js/angular.js"></script>
    <script src="../js/AngularCotroller.js"></script>
    <script src="../js/ApiCallService.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js" type="text/javascript"></script>
</head>
<body>
<div ng-app="App">
    <div ng-controller="AppController">
         <div class="form-group row">
            <button id="btnGetKey" class="btn btn-default" ng-click="btnGetKey()">Get Key</button>
            <p> {{message}}</p>
        </div>


        <br>
    </div>
  </div>
</div>
</body>
</script>

This is AngularController.js file

var angularmodule = angular.module('App', []);

angularmodule.controller('AppController', function ($scope, $http, ApiCall)      {
//Intital message value
$scope.message = "Don't Give up";
$scope.btnGetkey = function () {

    var result = ApiCall.GetKeyFromServer().success(function (data) {
        var data = $.parseJSON(JSON.parse(data));
        $scope.message = data;
        $scope.message = "123123123";
    });
};


});

This is ApiServiceCall file

angularmodule.service('ApiCall', ['$http', function ($http) 
{
var result;

// This is used for calling get methods from web api
this.GetKeyFromServer = function () {
    result = $http.get('http://localhost:8090/CBIR/checkReturn').success(function (data, status) {
        result = (data);
    }).error(function () {
        alert("Something went wrong");
    });
    return result;
};

}]);

When i load the index file Error: [ng:areq] Argument 'AppController' is not a function, got undefined http://errors.angularjs.org/1.2.16/ng/areq?p0=AppController&p1=not%20a%20function%2C%20got%20undefined i get this error. Please help

my first guess would be that you cant instantiate the controller, because it uses your ApiCall service, and that is wrongly registered. Try App.service('ApiCall'... instead. Let me know whether that works. — Slytherin

Shomz Shomz · Accepted Answer · 2016-03-24T09:48:46

You alias one parameter, but the actual function uses three:

['$scope', function ($scope, $http, ApiCall)

You need either to specify all of them, like this:

['$scope', '$http', 'ApiCall', function ($scope, $http, ApiCall)

or if you're not going to minimize your code, just use:

function ($scope, $http, ApiCall)

As @Slytherin suggested, the other error you have is in your service file:

you have a typo: AnguarModule != angular.module
and even if it wasn't a typo, you're reinstantiating your module, instead of referencing it (the difference being the second parameter - see the docs)

Argument 'cotroller' is not a function, got undefined

1 Answers