我一直在寻找并找到“解决方案”来解决这个问题，但我仍然无法让它正常工作。AngularJS：当html5mode（true）开启时，相对链接路径被破坏

的情景：

我建立一个角度（1.2版本）的网站与UI路由器和本地主机上的一个节点服务器上运行它。我试图使它与$ locationProvider具有“漂亮”url，并将html5（true）打开。点击时，我的网站可以正常工作，但当我尝试导航到相对链接路径或刷新页面中断的链接路径时。我还打算部署这个web应用到Heroku的完成时：

相对链接路径：

http://localhost:8000/locksmith-services

PAGE输出结果

Cannot GET /locksmith-services

步骤我已采取：

1）在我 “的index.html” <头>，我已经把我的基本URL：

<base href="/"></base>

2）在我的app.js文件（角），我把它写成如下：

// 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）在我的导航，我有我的HTML写为：

<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）我server.js文件（节点服务器）

var express = require('express'); 
var app = express(); 

app.use(express.static(__dirname + '/front')); 
var port = process.env.PORT || 8000; 
app.listen(port);

什么是最好的解决办法？在此先感谢您的帮助。

来源

2014-09-26 Oneezy

感谢@trehyu帮助我得到这个答案。

就像他写的，我需要在我的server.js文件中设置一些将用户重定向到“index.html”文件的设置。

因此，根据您的文件结构...

BEFORE（不工作）

var express = require('express'); 
var app = express(); 

app.use(express.static(__dirname + '/front')); 
var port = process.env.PORT || 8000; 
app.listen(port);

后（工作）

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);

我希望这可以帮助别人！

来源

2014-09-26 21:50:01 Oneezy

当HTML5mode设置为true时，您需要在服务器上设置一些自动将用户重定向到索引页的设置，以便AngularJS UI路由器可以从那里接管。

原因是，如果URL中没有散列（＃），它会将其作为文字URL并尝试在您直接刷新或粘贴url时导航到那里。

我不是很熟悉节点所以不知道你会怎么做，但没有对UI路由器GitHub的一个常见问题页面，应该可以帮助您开始：https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-your-server-to-work-with-html5mode

来源

2014-09-26 19:27:00 Trehyu

谢谢你的帮助！重新写我的server.js文件做了窍门。 – Oneezy 2014-09-26 21:44:45

AngularJS：当html5mode（true）开启时，相对链接路径被破坏

的情景：

步骤我已采取：

回答

相关问题