我正在尝试在应用程序中使用 Angular 的路由机制，但是在单击应该导致路由的元素时，我得到了一个无法获取 viewName，其中 viewName 是任何 View 。
这是我的 app.js 脚本文件:
var app = angular.module('actsapp', ['ngRoute']);
//Define Routing for app
app.config(['$routeProvider',
function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/student_list.html',
controller: 'StudentListController'
})
.when('/Students', {
templateUrl: 'views/student_list.html',
controller: 'StudentListController'
})
.when('/RegisterStudent', {
templateUrl: 'views/register_student.html',
controller: 'StudentRegistrationController'
});
}]);
app.controller('StudentListController', function($scope) {
$scope.message = 'This is student list screen';
});
app.controller('StudentRegistrationController', function($scope) {
$scope.message = 'This is student registration screen';
});
这是我的 index.html:
<!DOCTYPE html>
<html ng-app="actsapp">
<head>
<title></title>
<link href="style/style.css" rel="stylesheet" />
<link href="style/bootstrap.css" rel="stylesheet" />
<script src="scripts/jquery-1.js"></script>
<script src="scripts/angular/angular.js"></script>
<script src="scripts/angular/angular-route.js"></script>
<script src="scripts/angular/app.js"></script>
</head>
<body>
<div class="header">
<div class="heading_wrap">
<h1>Student Registration Form</h1>
</div>
</div>
<div class="nav-wrap">
<ul class="nav nav-acts-pills nav-stacked ">
<li class="active">
<a href="/Students">Student List</a>
</li>
<li>
<a href="/RegisterStudent">Add Student</a>
</li>
<li>
<a>Add Students (By School)</a>
</li>
</ul>
</div>
<div ng-view="" class="content-wrap" style="float:left;">
</div>
</body>
</html>
我们非常欢迎任何有关如何解决此问题的建议。我的工作基于最新版本的 ngRoute 文档。谢谢。
最佳答案
您需要添加如下所示的 # 来处理路由:
<li class="active">
<a href="#/Students">Student List</a> // add #
</li>
<li>
<a href="#/RegisterStudent">Add Student</a> // add #
</li>
在 .js 文件中，templateUrl 应该是这样的:/views/student_list.html。
但是，如果您需要不带#的路由，则需要添加$locationProvider.html5Mode(true);。检查示例 here了解如何避免使用 #。另请参阅 this .演示说:
app.config(['$routeProvider',
function($routeProvider,$locationProvider) {
$routeProvider
.when('/', {
templateUrl: '/views/student_list.html', // urls should be like this
controller: 'StudentListController'
})
.when('/Students', {
templateUrl: '/views/student_list.html', // urls should be like this
controller: 'StudentListController'
})
.when('/RegisterStudent', {
templateUrl: '/views/register_student.html', // urls should be like this
controller: 'StudentRegistrationController'
});
$locationProvider.html5Mode(true);
}]); ]
在 View 中:
<li class="active">
<a href="/Students">Student List</a>
</li>
<li>
<a href="/RegisterStudent">Add Student</a>
</li>
关于angularjs - Angular ngRoute 无法获取 View ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26420471/