无法在AngularJS的HTML5模式下切换视图
[英]Cannot switch view in HTML5 mode in AngularJS
问题描述
我正在玩这段代码 ，以使其能够与HTML5链接一起使用。 我无法以某种方式使其工作：视图未解析为URL。 另外，我不清楚是否需要在视图名称前加上“ /”。 如果我这样做，则浏览器URL链接显示“ file：/// addStudent”，没有任何基数，反之，如果没有，则看到带有基数的URL。 应该是那样吗？ 无论如何，我都会看到错误消息： “找不到此网页” 。 我在这里做错了什么？ 谢谢！
testAngularJS.htm
<html>
<head>
<title>Angular JS Views</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.min.js"></script>
<base href="file:///home/myusername/projects/parser_ui/">
</head>
<body>
<h2>AngularJS Sample Application</h2>
<div ng-app="mainApp">
<p><a href="addStudent">Add Student</a></p>
<p><a href="viewStudents">View Students</a></p>
<div ng-view></div>
<script type="text/ng-template" id="addStudent.htm">
<h2> Add Student </h2>
{{message}}
</script>
<script type="text/ng-template" id="viewStudents.htm">
<h2> View Students </h2>
{{message}}
</script>
</div>
<script>
var mainApp = angular.module("mainApp", ['ngRoute']);
mainApp.config["$locationProvider", "$routeProvider", function($routeProvider, $locationProvider) {
// use the HTML5 History API
$locationProvider.html5Mode(true);
$routeProvider.
when('/addStudent', {
templateUrl: 'addStudent.htm',
controller: 'AddStudentController'
}).
when('/viewStudents', {
templateUrl: 'viewStudents.htm',
controller: 'ViewStudentsController'
}).
otherwise({
redirectTo: 'addStudent'
});
}];
mainApp.controller('AddStudentController', function($scope) {
$scope.message = "This page will be used to display add student form";
});
mainApp.controller('ViewStudentsController', function($scope) {
$scope.message = "This page will be used to display all the students";
});
</script>
</body>
</html>
2 个解决方案
解决方案1
0 2015-07-08 23:58:44
在Plunkr中运行，但不在此处本地运行：
<!DOCTYPE html> <html> <head> <title>Angular JS Views</title> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.min.js"></script> <base href="/"> </head> <body> <h2>AngularJS Sample Application</h2> <div ng-app="mainApp"> <p><a href="/addStudent">Add Student</a></p> <p><a href="/viewStudents">View Students</a></p> <div ng-view></div> <script type="text/ng-template" id="addStudent.htm"> <h2> Add Student </h2> {{message}} </script> <script type="text/ng-template" id="viewStudents.htm"> <h2> View Students </h2> {{message}} </script> </div> <script> var mainApp = angular.module("mainApp", ['ngRoute']); mainApp.config(["$locationProvider", "$routeProvider", function($locationProvider, $routeProvider) { // use the HTML5 History API $locationProvider.html5Mode(true); $routeProvider. when('/addStudent', { templateUrl: 'addStudent.htm', controller: 'AddStudentController' }). when('/viewStudents', { templateUrl: 'viewStudents.htm', controller: 'ViewStudentsController' }). otherwise({ redirectTo: '/addStudent' }); }]); mainApp.controller('AddStudentController', function($scope) { $scope.message = "This page will be used to display add student form"; }); mainApp.controller('ViewStudentsController', function($scope) { $scope.message = "This page will be used to display all the students"; }); </script> </body> </html>
解决方案2
0 2015-07-10 00:11:01
好的，我终于可以使它工作了。 所以这是需要做的：
- 必须在服务器上运行，而不是在本地文件（file：///）上运行 。 我在上面的评论中使用了Phil建议的Express的nodejs。
在这一行中（以下），我删除了括号，因为使用file：///会给我一个错误。 我这样做是由于对SO提出了其他建议。 但是，括号必须在该位置，否则它将不适用于服务器。
mainApp.config["$locationProvider", "$routeProvider", function($routeProvider, $locationProvider) {
...应该：
mainApp.config(["$locationProvider", "$routeProvider", function($routeProvider, $locationProvider) {
- 由于AngularJS是SPA框架，因此您可能还会发现需要配置服务器以将所有URL传递给Angular，以便将所有/解释为视图，而不是文件夹/文件。
例如，在nodejs中，我添加了以下内容：
app.use('/*', function(req, res){
res.sendFile(path.resolve(__dirname + '/public/angular/views/index.html'));
});
话虽如此，当我评论以上内容时，它仍然可以正常工作，我不确定为什么。
使用 HTML5 和 CSS 切换暗模式
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.