AngularJS errors - "controller is not defined" or "not a function got undefined"

Question

I am creating an AngularJS controller with an ng-app, but it is not working properly .

In the Chrome console I get either the error angular ctrl is not defined or not a function got undefined.

ng-app:

var localizationModule = angular.module("localizationModule",[]);

Controller.js

 localizationModule.controller('localizationCtrl', ['$scope',
function ($scope) {
$scope.local = {
   ProjectSingular: '',
    ProjectPlural: '',
    ServiceObjectSingular: '',
    ServiceObjectPlural: '',
    ServicePictureSingular: '',
    ServicePicturePlural: '',
}

$scope.Save = function (local) {
    console.log(local);
}
}])

html

<form ng-app="localizationModule" ng-controller="localizationCtrl">
<div class="panel panel-info">
    <div class="panel-heading">
        <strong>Localization Setting</strong>
    </div>
    <div class="panel-body">

        <div class="row">
        </div>
        <div class="row">
            <div class="col-lg-12">
                <div class="table-responsive">
                    <table class="table table-striped table-hover table-bordered">
                        <tr>
                            <th>Elements</th>
                            <th>Singular</th>
                            <th>Plural</th>
                        </tr>
                        <tr>
                            <td>Project</td>
                            <td><input type="text" required ng-model="local.ProjectSingular" class="form-control" /></td>
                            <td><input type="text" required ng-model="local.ProjectPlural" class="form-control" /></td>
                        </tr>
                        <tr>
                            <td>Service Object</td>
                            <td><input type="text" required ng-model="local.ServiceObjectSingular" class="form-control" /></td>
                            <td><input type="text" required ng-model="local.ServiceObjectPlural" class="form-control" /></td>
                        </tr>
                        <tr>
                            <td>Service Picture</td>
                            <td><input type="text" required ng-model="local.ServicePictureSingular" class="form-control" /></td>
                            <td><input type="text" required ng-model="local.ServicePicturePlural" class="form-control" /></td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <div class="panel-heading">
        <input type="submit" class="btn btn-success pull-right" value="Save" />
        <div class="clearfix"></div>
    </div>
</div>
</form>

Chrome Console

Error: [ng:areq] http://errors.angularjs.org/1.2.17/ng/areq?p0=localizationCtrl&p1=not%20a%20function%2C%20got%20undefined at Error (native) at http://localhost:1914/Scripts/angular.min.js:6:450 at Cb (http://localhost:1914/Scripts/angular.min.js:19:130) at Sa (http://localhost:1914/Scripts/angular.min.js:19:217) at http://localhost:1914/Scripts/angular.min.js:66:451 at http://localhost:1914/Scripts/angular.min.js:53:250 at q (http://localhost:1914/Scripts/angular.min.js:7:386) at N (http://localhost:1914/Scripts/angular.min.js:53:115) at g (http://localhost:1914/Scripts/angular.min.js:47:82) at http://localhost:1914/Scripts/angular.min.js:46:256

two things : check if you have written script tag for loading the file, and try to move controller on child div.. — harishr
– harishr, Commented Nov 21, 2014 at 4:44
I found nothing wrong. I tested with angular v1.2.1 and all runs ok. So something wrong with angular version or script load error? — creeper
– creeper, Commented Nov 21, 2014 at 4:56

BomberMan · Accepted Answer · 2014-11-21 07:52:48Z

0

Works fine with the script inlined: jsFiddle, so the timing of script loading is suspicious, as commented above.

(btw. the closing </form> looks missing :)

edited Nov 21, 2014 at 7:52

BomberMan

1,0943 gold badges13 silver badges33 bronze badges

answered Nov 21, 2014 at 5:16

ntabee

4363 silver badges5 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Amit Agarwal Over a year ago

i forgot to write here

Rad · Accepted Answer · 2017-08-23 06:33:05Z

0

I have noticed a minor bug in angular. Do you have the declaration of the module in the same file as the controller? Id try to declare the module in every controller file but without the dependency injection array.

angular.module("localizationModule").controller('localizationCtrl', ['$scope',
function ($scope) {
$scope.local = {
   ProjectSingular: '',
    ProjectPlural: '',
    ServiceObjectSingular: '',
    ServiceObjectPlural: '',
    ServicePictureSingular: '',
    ServicePicturePlural: '',
}

$scope.Save = function (local) {
    console.log(local);
}
}])

Bes sure to wrap the file as an ioife too.

(function(){

//---code--

})();

answered Aug 23, 2017 at 6:33

Rad

671 silver badge7 bronze badges

Collectives™ on Stack Overflow

AngularJS errors - "controller is not defined" or "not a function got undefined"

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related