CODEWITHSUNDEEP
javascripthtmlangularjsangularjs-controller
vamsi krishna
vamsi krishna

Reputation: 13

Issue while creating a controller in AngularJS

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("/")
            }
        )
    }   
}])

Upvotes: 0

Views: 55

Answers (2)

Immanuel Kirubaharan
Immanuel Kirubaharan

Reputation: 1094

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...
}]);

Upvotes: 0

Mistalis
Mistalis

Reputation: 18279

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) {

Upvotes: 1

Related Questions