我正在尝试将 HTML5 模式添加到我的 Angular 应用程序中以删除“#”符号。
问题是它根本行不通。我的整个 ng-view 将不会显示!这是我的代码:
var app = angular.module('app', [
'ngRoute',
... ]);
app.config(['$routeProvider, $locationProvider',
function($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider.
when('/', {
templateUrl: 'partials/main.html'
}).
when('/raw-communication', {
templateUrl: 'partials/raw-communication.html',
controller: 'RawCommunicationCtrl'
}).
otherwise({
redirectTo: "/404"
});
}
]);
我使用的网址是 localhost:8080。值得一提的是,当我删除 html5Mode 的代码时,一切正常。
当我的意思是它不起作用时,我的意思是整个 ng-view 指令上没有显示任何内容。例如,如果我有这个:
<!doctype html>
<html lang="en" ng-app="app">
<head>
<base href="/"/>
<meta charset="UTF-8">
<title>Stock App</title>
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-route/angular-route.min.js"></script>
<script src="js/app.js"></script>
...
</head>
<body>
<h1>Stock App</h1>
<div ng-view></div>
</body>
</html>
只会出现 h1 标签。要显示的内容是“partials/main.html”中的部分内容。
访问localhost:8080时URL没有变化,但访问localhost:8080/raw-trades时出现404错误。
我在控制台中出现以下错误:
未捕获的错误:[$injector:modulerr]http://errors.angularjs.org/1.3.13/ http://errors.angularjs.org/1.3.13/$injector/modulerr?p0=app&p1=Error%3A%20…Flocalhost%3A8080%2Fbower_components%2Fangular%2Fangular.min.js%3A38%3A135)
我的网络选项卡中没有发生其他 404 错误。
更新3:
这不是重复的,因为主页应该仍然可以工作。
UPDATE:
UPDATE:
我已经缩小了问题范围;以下作品:
app.config(['$routeProvider',
function($routeProvider) {
...
}
]);
但这并没有:
app.config(['$routeProvider, $locationProvider',
function($routeProvider, $locationProvider) {
...
}
]);
不管我是否实际使用$locationProvider
.
新更新
这本来就是
app.config(['$routeProvider', '$locationProvider',
NOT
app.config(['$routeProvider, $locationProvider',
真是浪费一个小时啊!