Question

我是AngularJS的新手。我正在使用html和angularjs中的表单来处理登录功能。有三个文件 index.html 2. app.js 3. LoginCntrl.js

我在.html文件中包含了两个js文件，但ng-controller无法正常工作。它不是从控制器获取值，甚至不调用控制器中的函数。 js文件正在执行，但我认为我的html文件有问题。

以下是三个文件的代码：

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

Answer 1

您的代码中存在多个错误：

首先，当您使用angular.module("agile",[]);时，创建模块（请注意[]）。因此，在为此模块创建控制器时，您无需再次创建它。

更改

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

到

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

其次，您应该在控制器创建的dependency injection中保持相同的顺序：

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

Answer 2

请尝试以下方式，

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

在AngularJS中创建控制器时出现问题

的index.html

app.js

LoginCntrl.js

2 个答案: