- 首页
- 前端开发
- $routeParams 硬刷新在服务器上不起作用(需要基本标签)
$routeParams 硬刷新在服务器上不起作用(需要基本标签)
[英] $routeParams Hard Refresh not working on server (base tag needed)
本文介绍了$routeParams 硬刷新在服务器上不起作用(需要基本标签)的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
这是我的 .htaccess 文件:
RewriteEngine onRewriteCond %{REQUEST_FILENAME} -s [OR]RewriteCond %{REQUEST_FILENAME} -l [OR]RewriteCond %{REQUEST_FILENAME} -d重写规则 ^.*$ - [NC,L]重写规则 ^(.*)/index.html [NC,L]
这里是 app.js
var app = angular.module('router', ['ngRoute']);app.controller('main', function($scope, $location, $routeParams){$scope.test = '测试';$scope.theID = $routeParams.theID;});//路由配置app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {$routeProvider.when('/关于', {templateUrl: 'views/about.html'}).when('/paramtest/:theID', {templateUrl: 'views/aboutID.html',控制器:'主要'}).除此以外({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}}
我也有 <base href="/"> 标签.
-- 附加文件 --
index.html
<头><meta charset="utf-8"><title>承包商</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="/"><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 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 class="profileTopRight"><a href="profile"><i class="fa fa-th-list"></i>我的个人资料<a href ng-click="logoutUser()"><i class="fa fa-sign-out"></i>注销
<!-- 注册--><div ng-if="!firebaseUser" ng-controller="main"><loginregister></loginregister>
<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></html>
来自 app.js 的路由段
//页面设置app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {$routeProvider.when('/关于', {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('/个人资料', {templateUrl: 'views/profile.html'}).when('/findwork', {templateUrl: 'views/findwork.html'}).除此以外({templateUrl: 'views/home.html'});$locationProvider.html5Mode(true);}]);
像 http://example.com/about/ 这样的普通 url 工作得很好，但是任何参数页面都不能在硬刷新时工作，它要么返回 404 要么返回 index.html，没有任何 javascript包括在内.
解决方案
如果有人遇到与此类似的问题，请确保将您的
在 index.html 文件的顶部，标题正下方.
这就是最终为我解决的问题.
Here is my .htaccess file:
RewriteEngine on
RewriteCond %{REQUEST_FILENAME} -s [OR]
RewriteCond %{REQUEST_FILENAME} -l [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^.*$ - [NC,L]
RewriteRule ^(.*) /index.html [NC,L]
Here is 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);
}]);
Here is aboutID.html
ID: {{theID}}
When I go to http://example.com/about it works great, even if I do a cmd+r refresh it still loads the page fine.
If I click on a link from within the app and go to http://example.com/paramtest/1234 it works fine.
The problem is if I try going directly to http://example.com/paramtest/1234 or doing a hard refresh http://example.com/paramtest/1234 angular routing no longer works and all of the variables are outputted like this {{var}}
I also have the <base href="/"> tag in place.
-- ADDITONAL FILES --
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>
Routing segment from app.js
// 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);
}]);
Normal url's like http://example.com/about/ work perfectly, but any parameter pages don't work on a hard refresh, it either returns 404 or index.html without any javascript included.
解决方案
If anyone runs into a similar problem to this one, make sure that you put your
<base href="/">
At the top of your index.html file, directly underneath the title.
That's what eventually solved it for me.
这篇关于$routeParams 硬刷新在服务器上不起作用(需要基本标签)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
