为什么 ng-view 在我的 angularjs 代码中不显示任何内容

Question

我是 AngularJS 的新手，我尝试创建一个示例登录页面，并尝试在成功登录后路由到其他页面，但 ng-view 中没有显示任何内容，而且我的代码没有错误。可能是什么问题？

index.html

<html>
<head>
<script 
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-
route.js"></script>
<script src="maincontroller.js"></script>    
</head>
<body>
<div ng-view>
</div>
</body>
</html>

控制器

var app = angular.module('myapp', ['ngRoute']);
app.config(function($routeProvider) {
$routeProvider
     .when('/', {
        templateUrl: 'login.html',
        controller: 'maincontroller'
    })
    .when('/dashboard', {
        templateUrl: 'dashboard.html'
    })
    .otherwise('/', {
        templateUrl: '/'
    })
    });
 app.controller('maincontroller', function($scope, $location) {
 $scope.submit = function($scope) {
 var username = $scope.username;
 var password = $scope.password;
if ($scope.username == 'ashok' && $scope.password == 'ashok') {
        $location.path('/dashboard');
    } else {
        windows.alert('wrong stuff');
}
};
});

login.html

<div ng-controller="maincontrol">


<form action="/" name="formgroup">
    <label>Username:<input type="text" id="username" ng-model="username"/></label><br>
    <label>Password:<input type="password" id="password" ng-model="password"/></label><br>
    <button type="button" ng-click="submit()">Login</button>
</form>

Answer 1

您应该在 HTML 中提及 ng-app 以使其成为 Angular 应用程序。

<html ng-app='myapp'>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js">
  </script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-
route.js"></script>
  <script src="script.js"></script>
</head>

<body>
  <div ng-view>
  </div>
</body>

</html>

Maincontroller.js

var app = angular.module('myapp', ['ngRoute']);
app.config(function($routeProvider) {
  $routeProvider
    .when('/', {
      templateUrl: 'login.html',
      controller: 'maincontroller'
    })
    .when('/dashboard', {
      templateUrl: 'dashboard.html'
    })
    .otherwise('/', {
      templateUrl: '/'
    })
});
app.controller('maincontroller', function($scope, $location) {
  $scope.submit = function() {
    var username = $scope.username;
    var password = $scope.password;
    if ($scope.username == 'ashok' && $scope.password == 'ashok') {
      $location.path('/dashboard');
    } else {
      windows.alert('wrong stuff');
    }
  };
});

$scope 已经注入到控制器中，您将其作为参数传递给提交函数，即 undefined 因为您在提交时没有传递任何内容。

Login.html

<form action="/" name="formgroup">
    <label>Username:<input type="text" id="username" ng-model="username"/></label><br>
    <label>Password:<input type="password" id="password" ng-model="password"/></label><br>
    <button type="button" ng-click="submit()">Login</button>
</form>

由于您在路由中注入控制器，因此您不必在 login.html 中使用 ng-controller。它使控制器再次执行。

检查这个 Plunker：https://plnkr.co/edit/8jPJ7WOa3ixjqeRU8bpg?p=preview

Answer 2

我会推荐在 body 中使用 ng-app。

<html>
<head>
<script 
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-
route.js"></script>
<script src="maincontroller.js"></script>    
</head>
<body ng-app="myapp">
<div ng-view>
</div>
</body>
</html>

还有登录页面中的用户 maincontroller

<div ng-controller="maincontroller">


    <form action="/" name="formgroup">
        <label>Username:<input type="text" id="username" ng-model="username"/></label><br>
        <label>Password:<input type="password" id="password" ng-model="password"/></label><br>
        <button type="button" ng-click="submit()">Login</button>
    </form>
</div>

为什么 ng-view 在我的 angularjs 代码中不显示任何内容

why ng-view doesn't display anything in my angularjs code

login-page

angularjs

ng-view

angularjs-ng-route