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>

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

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

Answer 2

我会建议在体内使用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代码中没有显示任何内容

2 个答案: