Issue while creating a controller in AngularJS

Question

I am new to AngularJS. I am working on login functionality using forms in html and angularjs. There are three files 1. index.html 2. app.js 3. LoginCntrl.js

I have included both the js files in .html file but the ng-controller is not working. It isn't taking values from controller and not even calling functions in the controller. The js files are being executed but I think there is something wrong in my html file.

Here is code for three files:

index.html

<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="../js/app.js"></script>
  <script src="../js/controllers/LoginCntrl.js"></script>
  <script src="../js/controllers/RegisterCntrl.js"></script>
  <script src="../js/services/AuthSrvc.js"></script>
  <link rel="stylesheet" href="../css/styles.css">
</head>

<body ng-app="agile">
  <div class="container-fluid">
    <nav class="navbar navbar-default">
      <div class="container-fluid">
        <div class="navbar-header">
          <a class="navbar-brand" href="/">AGILE</a>
        </div>
        <ul class="nav navbar-nav">
          <li><a href="#">Home</a></li>
          <li class="active"><a href="#">Signin</a></li>
          <li><a href="#">Signup</a></li>
        </ul>
      </div>
    </nav>
    <div class="row panel panel-default" ng-controller="LoginCntrl">

      <div class="panel-heading">
        <center><b>{{title}}</b></center>
      </div>
      <div class="panel-body login-tab">
        <form novalidate method="post" ng-submit="login(username,password)">
          <div class="form-group"><input type="text" placeholder="Username..." ng-model="username" value="" class="form-control uname" size="15"></div>
          <div class="form-group"><input type="password" placeholder="Password..." ng-model="password" value="" class="form-control pass" size="15"></div>
          <input type="submit" class="btn btn-primary btn-block" value="Login">
        </form>
      </div>
    </div>

  </div>
</body>

</html>

app.js

angular.module("agile",[]);
console.log('app initiated')

LoginCntrl.js

angular.module("agile",[]).controller("LoginCntrl",['$scope','$http','Auth','$location',function($http,Auth,$scope,$location){              
    $scope.title ="Signin";
    console.log($scope.title);
    $scope.login = function(username,password){
    Auth.login(username,password).then(
            function(user)
            {
                $scope.user=user;
                $location.path("/posts");
            },
            function(res)
            {
                $location.path("/")
            }
        )
    }   
}])

Also is important to keep the same order when you inject services and other stuff here ['$scope','$http','Auth','$location',function($http, Auth, $scope, $location) should be ['$scope','$http','Auth','$location',function($scope, $http, Auth, $location) — codtex
– codtex, Commented Aug 30, 2017 at 7:08

Mistalis · Accepted Answer · 2017-08-30 07:08:35Z

1

There are several errors in your code:

Firstly, when you use angular.module("agile",[]);, you create a module (note the []). So when creating a controller for this module, you do not need to create it again.

Change

angular.module("agile",[]).controller(...);

To

angular.module("agile").controller(...);

Secondly, you should keep the same order in your dependency injection on your controller creation:

.controller("LoginCntrl", ['$scope','$http','Auth','$location', 
                   function($scope,  $http,  Auth,  $location) {

answered Aug 30, 2017 at 7:08

Mistalis

18.3k14 gold badges78 silver badges97 bronze badges

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

2 Comments

vamsi krishna Over a year ago

Thank you...I changed the order and its working now.. :)

Mistalis Over a year ago

@vamsikrishna Glad I helped! Could you accept the answer by clicking the checkmark at the left, if it solved your issue? That's how Stack Overflow works. Thanks.

Immanuel Kirubaharan · Accepted Answer · 2017-08-30 07:22:30Z

Try like this below,

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

agile.controller("LoginCntrl",['$scope', '$http', 'Auth', '$location', function($scope, $http, Auth, $location){              
    $scope.title ="Signin";
    console.log($scope.title);
    $scope.login = function(username,password){
    Auth.login(username,password).then(
            function(user)
            {
                $scope.user=user;
                $location.path("/posts");
            },
            function(res)
            {
                $location.path("/")
            }
        )
    }   
}]);

agile.controller("PageController",['$scope', '$http', 'Auth', '$location', function($scope, $http, Auth, $location){    
    //Page controller content...
}]);

Collectives™ on Stack Overflow

Issue while creating a controller in AngularJS

index.html

app.js

LoginCntrl.js

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

index.html

app.js

LoginCntrl.js

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related