好的，我有一个简单的网络应用程序，我正在尝试使用路由提供商进行更新，当单击页面上的 li 列表时，它工作正常，但是当我刷新页面时，它只给我一个 404，看起来它正在尝试访问url 而不是转到 root 并传入模板... 为什么？
'use strict';
angular.module('newSiteApp')
.controller('MainCtrl', function ($scope, $location) {
$scope.menu =
[ {name: 'Main', url: 'main.html'}
, { name: 'contact', url: 'contact.html'}
, { name: 'Projects', url: 'projects.html'} ];
$scope.ajaxpage = function ajaxload(){
$scope.getmenuitem = this.menuitem.url;
var path = $location.path();
$location.url('pages/'+this.menuitem.name);
}
})
.config(function ($routeProvider, $locationProvider) {
console.log($routeProvider);
$routeProvider.when('/', {
templateUrl: '/views/main.html',
controller: BookCntl,
resolve: {
delay: function($q, $timeout) {
var delay = $q.defer();
$timeout(delay.resolve, 1000);
return delay.promise;
}
}
});
$routeProvider.when('/pages/Main', {
templateUrl: '/views/main.html',
controller: BookCntl,
resolve: {
delay: function($q, $timeout) {
var delay = $q.defer();
$timeout(delay.resolve, 1000);
return delay.promise;
}
}
});
$routeProvider.when('/pages/contact', {
templateUrl: '/views/contact.html',
controller: BookCntl,
resolve: {
delay: function($q, $timeout) {
var delay = $q.defer();
$timeout(delay.resolve, 1000);
return delay.promise;
}
}
});
$routeProvider.when('/pages/Projects', {
templateUrl: '/views/projects.html',
controller: BookCntl,
resolve: {
// I will cause a 1 second delay
delay: function($q, $timeout) {
var delay = $q.defer();
$timeout(delay.resolve, 1000);
return delay.promise;
}
}
});
// configure html5 to get links working on jsfiddle
$locationProvider.html5Mode(true);
});
function BookCntl($scope, $routeParams) {
$scope.name = "BookCntl";
$scope.params = $routeParams;
}
html:
`<body ng-app="newSiteApp" ng-controller="MainCtrl">
<div class="header">
<ul>
<li ng-repeat="menuitem in menu" ng-click="ajaxpage()">{{menuitem.name}}</li>
</ul>
</div>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<!-- Add your site or application content here -->
<div class="slide-animate-container" >
<!-- <div class="slide-animate" ng-init="getmenuitem = page" ng-include="getmenuitem"></div>-->
</div>
<div ng-view></div>
<!--[if lt IE 9]>
<script src="bower_components/es5-shim/es5-shim.js"></script>
<script src="bower_components/json3/lib/json3.min.js"></script>
<![endif]-->
<!-- build:js scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<!-- endbower -->
<!-- endbuild -->
<!-- build:js({.tmp,app}) scripts/scripts.js -->
<script src="scripts/app.js"></script>
<script src="scripts/controllers/main.js"></script>
<!-- endbuild -->
</body>`
最佳答案
由于您使用的是 $locationProvider.html5Mode(true); ，您引用的 URL 可能会被解释为“https://mysite/myrouting/page1”浏览器作为服务器请求。如果您将 # 添加到网址，页面将不会像这样“刷新”https://mysite/#/myrouting/page1
关于javascript - $routeProvider 和 angularJS？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21561356/