1

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

索引.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');
}
};
});

登录.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>

4

2 回答 2

0

您应该在 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>

主控制器.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因为您在提交时没有传递任何内容。

登录.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>

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

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

于 2018-01-18T16:08:59.817 回答
0

我会建议在 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>
于 2018-01-18T16:10:42.670 回答