我正在尝试使用 html5Mode 从 SPA 中的 url 中删除 #。我在 angularjs v 1.3.14 中使用 $locationProvider 时遇到错误。 我不知道为什么会发生这种情况。我在下面提到了代码和我的控制台错误。
前端:
<!doctype html>
<html ng-app="app">
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-cookies.min.js"></script>
<script src="app/controller.js"></script>
</head>
<body ng-controller="sample-controller" class="container">
<div ng-view></div>
</body>
</html>
我的 Controller :
var app=angular.module('app',['ngRoute','ngCookies']);
app.config(['$routeProvider','$locationProvider','$httpProvider',function($routeProvider, $locationProvider, $httpProvider){
$routeProvider
.when('/', {
templateUrl : "/angular-practice/route/family.html",
controller : "sample-controller"
})
.when('/login', {
templateUrl : "/angular-practice/route/login.html",
controller : "sample-controller"
})
.when('/oops', {
templateUrl : "/angular-practice/route/oops.html",
controller : "sample-controller"
})
.otherwise({ redirectTo: '/oops',controller : "sample-controller" });
//$httpProvider.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
$httpProvider.defaults.timeout = 5000;
$locationProvider.html5Mode(true);
}]);
控制台错误
Error: [$location:nobase] http://errors.angularjs.org/1.3.14/$location/nobase
M/<@https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:6:417
Me/this.$get<@https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:98:414
最佳答案
您需要添加:
<base href="/">
在主 html 文件的 head 部分。这是因为 Angular 要求您在设置“$locationProvider.html5Mode(true);”时指定 url 基数。您可以在此处的文档中阅读相关内容:https://docs.angularjs.org/guide/ $位置。
您的 html 文件应该如下所示才能工作:
<!doctype html>
<html ng-app="app">
<head>
<meta charset="utf-8">
<base href="/">
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"> </script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-cookies.min.js"></script>
<script src="app/controller.js"></script>
</head>
<body ng-controller="sample-controller" class="container">
<div ng-view></div>
</body>
</html>
关于javascript - 我们应该在 Angular js 版本 1.3.14 中使用 $locationProvider 吗，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31375981/