Error: ng:areq Bad Argument: Argument 'registerController' is not a function, got undefined

Question

I am new to angular.I tried incuding a new controller for node.js api integration into my login page.But I was getting the above error.I have seen the related questions but was not able to solve my problem.Any help would be appreciated. Thanks in advance.

registerCtrl.js

 /*jslint node: true */
   /*jslint white: true */
  (function() {
 'use strict';

 angular.module('registerCtrl', [])  

 .controller('registerController', function($scope, $http, $templateCache) {

  var register = this;
  var method = 'POST';
  var inserturl = 'http://localhost:8080/v1/auth/login';// URL where the Node.js server is running
  $scope.codeStatus = "";
  $scope.save = function() {
    // Preparing the Json Data from the Angular Model to send in the Server. 
    var formData = {
      'email' : this.email,
      'password' : this.password
    };

    this.password = '';
    this.email = '';

    var jdata = 'mydata='+JSON.stringify(formData); // The data is to be string.

    $http({ // Accessing the Angular $http Service to send data via REST Communication to Node Server.
            method: method,
            url: inserturl,
            data:  jdata ,
            headers: {'Content-Type': 'application/x-www-form-urlencoded'},
            cache: $templateCache
        }).
        success(function(response) {
        console.log("success"); // Getting Success Response in Callback
                $scope.codeStatus = response.data;
        console.log($scope.codeStatus);

        }).
        error(function(response) {
        console.log("error"); // Getting Error Response in Callback
                $scope.codeStatus = response || "Request failed";
        console.log($scope.codeStatus);
        });
        return false;
  };    

});
}());

register.html

<div ng-controller="registerController as register">
<div class="container">    
    <div id="loginbox" ng-show="signin-value"  style="margin-top:50px;" class="mainbox col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2">                    
        <div class="panel panel-info" >
                <div class="panel-heading">
                    <div class="panel-title">Sign In</div>
                    <div style="float:right; font-size: 80%; position: relative; top:-10px"><a href="#">Forgot password?</a></div>
                </div>     

                <div style="padding-top:30px" class="panel-body" >

                    <div style="display:none" id="login-alert" class="alert alert-danger col-sm-12"></div>

                    <form id="loginform" class="form-horizontal" role="form" ng-submit="save()">

                        <div style="margin-bottom: 25px" class="input-group">
                                    <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
                                    <input id="login-username" type="text" class="form-control" name="username" ng-model="email" value="" placeholder="email">                                        
                                </div>

                        <div style="margin-bottom: 25px" class="input-group">
                                    <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
                                    <input id="login-password" type="password" class="form-control" ng-model="password" name="password" placeholder="password">
                                </div>

                        <div class="input-group">
                                  <div class="checkbox">
                                    <label>
                                      <input id="login-remember" type="checkbox" name="remember" value="1"> Remember me
                                    </label>
                                  </div>
                                </div>


                            <div style="margin-top:10px" class="form-group">
                                <!-- Button -->

                                <div class="col-sm-12 controls">
                                  <a id="btn-login" href="#" class="btn btn-success">Login  </a>

                                </div>
                            </div>


                            <div class="form-group">
                                <div class="col-md-12 control">
                                    <div style="border-top: 1px solid#888; padding-top:15px; font-size:85%" >
                                        Don't have an account! 
                                    <a href="#" ng-click="login-value= false;signup-value=true;">
                                        Sign Up Here
                                    </a>
                                    </div>
                                </div>
                            </div>    
                        </form>     
                    </div>                     
                </div>  
    </div>

I have also added js file in index.html as

    <script src="app/controllers/registerCtrl.js"></script>

You should have an element in your HTML file with ng-app="...". What does that look like? — Phil
Ok, so where is your app module defined and does it add registerCtrl as a dependency? Ie, something like angular.module('app', ['registerCtrl']) — Phil

Tarun Dugar Tarun Dugar · Accepted Answer · 2015-12-04T03:15:16

your registerController function hasn't been injected into an application controller:

registerCtrl.controller('registerController', registerController)

Also, in your template you have to use ng-app to declare where your application starts and your controllers need to be nested within, like this:

<div ng-app="registerCtrl">
    <div ng-controller="registerController">

One more thing, why have you named your application registerCtrl? It isn't a controller is it?

Lastly, your round brackets at the end are incorrectly ordered. Change to:

)();

from

());

Error: ng:areq Bad Argument: Argument 'registerController' is not a function, got undefined

2 Answers