Javascript $routeParams硬刷新无法在服务器上工作(需要基本标记)
这是我的.htaccess文件:Javascript $routeParams硬刷新无法在服务器上工作(需要基本标记),javascript,angularjs,.htaccess,Javascript,Angularjs,.htaccess,这是我的.htaccess文件: RewriteEngine on RewriteCond %{REQUEST_FILENAME} -s [OR] RewriteCond %{REQUEST_FILENAME} -l [OR] RewriteCond %{REQUEST_FILENAME} -d RewriteRule ^.*$ - [NC,L] RewriteRule ^(.*) /index.html [NC,L] 这里是app.js var app = angular.module('
RewriteEngine on
RewriteCond %{REQUEST_FILENAME} -s [OR]
RewriteCond %{REQUEST_FILENAME} -l [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^.*$ - [NC,L]
RewriteRule ^(.*) /index.html [NC,L]
这里是app.js
var app = angular.module('router', ['ngRoute']);
app.controller('main', function($scope, $location, $routeParams){
$scope.test = 'testing';
$scope.theID = $routeParams.theID;
});
// Routing Configuration
app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider
.when('/about', {
templateUrl: 'views/about.html'
})
.when('/paramtest/:theID', {
templateUrl: 'views/aboutID.html',
controller: 'main'
})
.otherwise({
templateUrl: 'views/home.html'
});
$locationProvider.html5Mode(true);
}]);
这里是aboutID.html
ID: {{theID}}
当我转到http://example.com/about
它工作得很好,即使我执行cmd+r刷新,它仍然可以很好地加载页面
如果我点击应用程序中的链接并转到http://example.com/paramtest/1234
它工作正常
问题是如果我尝试直接转到http://example.com/paramtest/1234
或进行硬刷新http://example.com/paramtest/1234
角度路由不再工作,所有变量都是这样输出的{{var}
我还有
标签
--附加文件--
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Contractors</title>
<link href='http://fonts.googleapis.com/css?family=Quicksand:400,300,700' rel='stylesheet' type='text/css'>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css" rel="stylesheet" type="text/css">
<link href="styles/datepicker.css" rel="stylesheet" type="text/css">
<link href="style.css" rel="stylesheet" type="text/css">
<link href="styles/classic.date.css" rel="stylesheet" type="text/css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.0.1/dropzone.css" rel="stylesheet" type="text/css">
<link href="js/ng-sortable.min.css" rel="stylesheet" type="text/css">
<link href="js/jquery.fancybox.css" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="https://cdn.firebase.com/js/client/2.2.2/firebase.js"></script>
<script src="https://cdn.firebase.com/libs/angularfire/1.0.0/angularfire.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular-route.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular-animate.js"></script>
<script type="text/javascript" src="js/angular-datepicker.js"></script>
<script type="text/javascript" src="app.js"></script>
<base href="/">
</head>
<body ng-app="bidder" ng-controller="main" flow-drag-enter="style={border: '5px solid green'}">
<div class="header" ng-controller="main">
<div class="logo">
<a href="/"><img src="images/logo.png"></a>
</div>
</div>
<!-- MAIN CONTENT -->
<div ng-view ng-controller="main" class="view-animate" ng-if="firebaseUser"></div>
<div class="profileSection" ng-if="firebaseUser" ng-controller="main">
<div class="profileTopLeft">
<img src="thumb.php?w=30&h=30&src=uploads/{{user.profilePicture || noPicture.png}}" ng-if="user.profilePicture" class="profilePicTop">
<i class="fa fa-user" ng-if="!user.profilePicture"></i>
<b>{{user.Name}}</b> <small>{{user.Email}}</small>
</div>
<div class="profileTopRight">
<a href="profile"><i class="fa fa-th-list"></i> My Profile</a>
<a href ng-click="logoutUser()"><i class="fa fa-sign-out"></i> Logout</a>
</div>
</div>
<!-- REGISTRATION -->
<div ng-if="!firebaseUser" ng-controller="main">
<loginregister></loginregister>
</div>
<div class="clear" style="height: 100px;"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/jquery.fancybox.js"></script>
<script type="text/javascript" src="js/jquery.expander.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.0.1/dropzone.js"></script>
</body>
</html>
普通url类似于
http://example.com/about/
工作正常,但任何参数页都无法进行硬刷新,它要么返回404,要么返回index.html,但不包含任何javascript。如果有人遇到与此类似的问题,请确保
在index.html文件的顶部,标题的正下方
这就是我最终解决问题的原因。好的。在index.html中,我看到有多个嵌套的html元素具有相同的控制器。如果已将
ng controller=“main”
应用于
标记,则无需再次将其添加到其嵌套元素(body标记的子元素)中。由于单个控制器的嵌套范围,它可能会导致您面临的问题
只需将控制器单独添加到body标记,或添加包含该body包含的所有内容的父div,然后将控制器分配给该父div,并从其他位置删除冗余控制器。会引发哪些错误?你有
标签吗?你有404错误吗?你能分享index.html代码吗?我会把
标签放在
标签后面。也许这就是为什么您会遇到问题,将绝对/相对路径与您的资源混合在一起(think base未应用于之前的资源)@JustinIurman就是这样!这就解决了问题。
// PAGE SETUP
app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider
.when('/about', {
templateUrl: 'views/about.html'
})
.when('/findcontractor', {
templateUrl: 'views/findcontractor.html'
})
.when('/editjob/:jobID', {
templateUrl: 'views/editjob.html'
})
.when('/viewcandidates/:jobID/:validate', {
templateUrl: 'views/viewcandidates.html'
})
.when('/messenger/:creatorID/:jobID/:candidateID', {
templateUrl: 'views/messenger.html'
})
.when('/profile', {
templateUrl: 'views/profile.html'
})
.when('/findwork', {
templateUrl: 'views/findwork.html'
})
.otherwise({
templateUrl: 'views/home.html'
});
$locationProvider.html5Mode(true);
}]);