我想使用 AngularJS 路由。我使用 AngularJS-seed-master 作为启动,默认情况下路由有效。然而,在我启用 html5mode 后它就停止工作了。下面是路由工作时的html代码;
<ul class="menu">
<li><a href="#/view1">view1</a></li>
<li><a href="#/view2">view2</a></li>
</ul>
<div ng-view></div>
<script src="lib/angular/angular.min.js"></script>
<script src="lib/angular/angular-route.min.js"></script>
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
<script src="js/filters.js"></script>
<script src="js/directives.js"></script>
路由工作时的 Javscript app.js 代码;
angular.module('myApp', [
'ngRoute',
'myApp.filters',
'myApp.services',
'myApp.directives',
'myApp.controllers'
]).
config(['$routeProvider', function($routeProvider)
{
//configuration for $routeProvider
$routeProvider.when('/view1', {templateUrl: 'partials/partial1.html', controller: 'MyCtrl1'});
$routeProvider.when('/view2', {templateUrl: 'partials/partial2.html', controller: 'MyCtrl2'});
$routeProvider.otherwise({redirectTo: '/view1'});
}])
然后,我通过将其添加到 app.js 来启用 html5mode
.config(['$locationProvider', function($locationProvider)
{
$locationProvider.html5Mode(true);
}])
此时 AngularJS 路由停止工作。我做错了什么?启用 html5Mode 后如何使 AngularJS 路由正常工作?
最佳答案
您要做的就是在“app.js”中将“html5mode”设置为 true:
config(['$locationProvider', '$routeProvider', function($locationProvider, $routeProvider) {
$locationProvider.html5Mode(true).hashPrefix('!');
$routeProvider.otherwise({redirectTo: '/view2'});
}]);
在index.html标题下添加:
<head>
<base href="/" />
<meta name="fragment" content="!">
</head>
并更改链接:
<body>
<ul class="menu">
<li><a href="/#!/view1">view1</a></li>
<li><a href="/#!/view2">view2</a></li>
</ul>
</body>
这就是主 URL: http://localhost:8000
将重定向到: http://localhost:8000/view1
并且链接将显示性感地址。
关于javascript - 为什么启用 html5mode 后 AngularJS 路由会被破坏?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23319424/