问题描述
我一直在寻找并找到了解决此问题的解决方案",但我仍然无法使其正常工作.
场景:
我正在使用 UI 路由器构建一个 Angular(1.2 版)网站,并在本地主机上的 Node 服务器上运行它.我试图通过 $locationProvider 并打开 html5(true) 使其具有漂亮"的 url.我的网站在单击时工作正常,但是当我尝试导航到相对链接路径或刷新链接路径时,页面会中断.我还打算在完成后将此 Web 应用部署到 Heroku:
相对链接路径:
http://localhost:8000/locksmith-services
页面输出结果
无法获取/locksmith-services
我采取的步骤:
1.) 在我的index.html"中head >,我已将我的基本网址设置为:
2.) 在我的 app.js 文件(用于 Angular)中,我将它写成如下:
//应用程序启动有角的.module('应用程序', ['ui.router','ngAnimate','角度旋转木马']).config(['$urlRouterProvider', '$stateProvider', '$locationProvider', function($urlRouterProvider, $stateProvider, $locationProvider) {$urlRouterProvider.otherwise("/");$stateProvider.state('家', {网址:'/',templateUrl: 'pages/home.html',控制器:'homeCtrl'}).state('服务', {url: '/locksmith-services',templateUrl: 'pages/locksmith-services.html',控制器:'servicesCtrl'}).state('位置', {url: '/locksmith-locations',templateUrl: 'pages/locksmith-locations.html'}).state('付款', {url: '/locksmith-payment',templateUrl: 'pages/locksmith-payment.html'})//使用 HTML5 历史 API$locationProvider.html5Mode(true);}])
3.) 在我的导航中,我的 html 写成:
<a ui-sref="home"><img src="images/logo.png" class="logo" alt="奥斯汀德克萨斯锁匠"/></a><nav class="行导航"><a class="mobile33" ui-sref="services" ui-sref-active="active" class="active">服务</a><a class="mobile33" ui-sref="locations" ui-sref-active="active">Locations</a><a class="mobile33" ui-sref="payment" ui-sref-active="active">Payment</a></nav>
4.) 我的 server.js 文件(节点服务器)
var express = require('express');var app = express();app.use(express.static(__dirname + '/front'));var port = process.env.PORT ||8000;app.listen(端口);
最好的解决方案是什么?预先感谢您的帮助.
感谢 @trehyu 帮助我找到这个答案.
就像他写的那样,我需要在我的 server.js 文件上设置一些东西,将用户重定向到我的index.html"文件.
所以取决于你的文件结构...
之前(不工作)
var express = require('express');var app = express();app.use(express.static(__dirname + '/front'));var port = process.env.PORT ||8000;app.listen(端口);
之后(工作)
var express = require('express');var app = express();app.use('/js', express.static(__dirname + '/front/js'));app.use('/build', express.static(__dirname + '/../build'));app.use('/css', express.static(__dirname + '/front/css'));app.use('/images', express.static(__dirname + '/front/images'));app.use('/pages', express.static(__dirname + '/front/pages'));app.all('/*', function(req, res, next) {//其他文件只需发送 index.html 即可支持 HTML5Moderes.sendFile('/front/index.html', { root: __dirname });});var port = process.env.PORT ||8000;app.listen(端口);
我希望这对其他人有帮助!
I've been searching and I've found "solutions" to this problem, yet I still can't get this to work right.
The Scenario:
I'm building an Angular (version 1.2) website with the UI Router and running it on a Node server on localhost. I'm trying to make it have "pretty" url's with the $locationProvider and by turning html5(true) on. My website works fine when clicking through it, but when I try to navigate to a relative link path or refresh the link path the page breaks. I also intend to deploy this webapp to Heroku when completed:
RELATIVE LINK PATH:
http://localhost:8000/locksmith-services
PAGE OUTPUT RESULT
Cannot GET /locksmith-services
Steps I've taken:
1.) In my "index.html" < head >, I've set my base url to:
<base href="/"></base>
2.) In my app.js file (for Angular), I have it written as follows:
// App Starts
angular
.module('app', [
'ui.router',
'ngAnimate',
'angular-carousel'
])
.config(['$urlRouterProvider', '$stateProvider', '$locationProvider', function($urlRouterProvider, $stateProvider, $locationProvider) {
$urlRouterProvider.otherwise("/");
$stateProvider
.state('home', {
url: '/',
templateUrl: 'pages/home.html',
controller: 'homeCtrl'
})
.state('services', {
url: '/locksmith-services',
templateUrl: 'pages/locksmith-services.html',
controller: 'servicesCtrl'
})
.state('locations', {
url: '/locksmith-locations',
templateUrl: 'pages/locksmith-locations.html'
})
.state('payment', {
url: '/locksmith-payment',
templateUrl: 'pages/locksmith-payment.html'
})
// use the HTML5 History API
$locationProvider.html5Mode(true);
}])
3.) In my navigation, I have my html written as:
<div class="wrapper">
<a ui-sref="home">
<img src="images/logo.png" class="logo" alt="Austin Texas Locksmith" />
</a>
</div>
<nav class="row navigation">
<a class="mobile33" ui-sref="services" ui-sref-active="active" class="active">Services</a>
<a class="mobile33" ui-sref="locations" ui-sref-active="active">Locations</a>
<a class="mobile33" ui-sref="payment" ui-sref-active="active">Payment</a>
</nav>
4.) My server.js file (node server)
var express = require('express');
var app = express();
app.use(express.static(__dirname + '/front'));
var port = process.env.PORT || 8000;
app.listen(port);
What would be the best solution? Thanks in advance for your help.
Thanks to @trehyu for helping me get to this answer.
Like he wrote, I needed something setup on my server.js file that redirects the user to my "index.html" file.
So depending on your file structure...
BEFORE (not working)
var express = require('express');
var app = express();
app.use(express.static(__dirname + '/front'));
var port = process.env.PORT || 8000;
app.listen(port);
AFTER (working)
var express = require('express');
var app = express();
app.use('/js', express.static(__dirname + '/front/js'));
app.use('/build', express.static(__dirname + '/../build'));
app.use('/css', express.static(__dirname + '/front/css'));
app.use('/images', express.static(__dirname + '/front/images'));
app.use('/pages', express.static(__dirname + '/front/pages'));
app.all('/*', function(req, res, next) {
// Just send the index.html for other files to support HTML5Mode
res.sendFile('/front/index.html', { root: __dirname });
});
var port = process.env.PORT || 8000;
app.listen(port);
I hope this helps someone else!
这篇关于AngularJS:当 html5mode(true) 开启时,相对链接路径被破坏的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!