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

Question

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

我已将两个 js 文件都包含在 .html 文件中，但 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 中创建控制器时出现问题

Issue while creating a controller in AngularJS

html

javascript

angularjs

angularjs-controller

index.html

app.js

LoginCntrl.js