AngularJS:启用html5mode(true)时，相对链接路径断开 [英] AngularJS: Relative link paths are broken when html5mode(true) is on

问题描述

我一直在搜索，并且找到了该问题的解决方案" ，但仍然无法正常工作.

I've been searching and I've found "solutions" to this problem, yet I still can't get this to work right.

我正在使用UI路由器构建Angular(1.2版)网站，并在本地主机上的Node服务器上运行它.我试图通过$ locationProvider并通过打开html5(true)使其具有漂亮的" URL.单击该网站时，我的网站运行良好，但是当我尝试导航到相对链接路径或刷新链接路径时，页面会中断.我还打算在完成后将此Webapp部署到Heroku:

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:

相对链接路径:

http://localhost:8000/locksmith-services

页面输出结果

Cannot GET /locksmith-services

1.)在我的"index.html"中< head>，我将基本网址设置为:

1.) In my "index.html" < head >, I've set my base url to:

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

2.).在我的app.js文件(用于Angular)中，其编写如下:

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.).在导航中，我的html编写为:

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.)我的server.js文件(节点服务器)

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.

推荐答案

感谢@trehyu帮助我获得了这个答案.

Thanks to @trehyu for helping me get to this answer.

就像他写的一样，我需要在server.js文件中进行一些设置，以将用户重定向到我的"index.html"文件.

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...

之前(不起作用)

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

我希望这对其他人有帮助！

I hope this helps someone else!

这篇关于AngularJS:启用html5mode(true)时，相对链接路径断开的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！