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:

我正在使用UI路由器构建一个Angular(版本1.2)网站,并在localhost上的节点服务器上运行它。我试图让它与$ locationProvider一起使用“漂亮”的url并打开html5(true)。单击它时我的网站工作正常,但当我尝试导航到相对链接路径或刷新链接路径时页面中断。我还打算在完成后将此webapp部署到Heroku:

RELATIVE LINK PATH:

相对链接路径:

http://localhost:8000/locksmith-services

PAGE OUTPUT RESULT

PAGE输出结果

Cannot GET /locksmith-services

Steps I've taken:

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

1.)在我的“index.html”中,我将基本网址设置为:

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

2.) In my app.js file (for Angular), I have it written as follows:

2.)在我的app.js文件中(对于Angular),我写了如下:

// 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:

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.) My server.js file (node server)

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

What would be the best solution? Thanks in advance for your help.

什么是最好的解决方案?在此先感谢您的帮助。

2 个解决方案

#1

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

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

Like he wrote, I needed something setup on my server.js file that redirects the user to my "index.html" file.

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

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!

我希望这可以帮助别人!

#2

When HTML5mode is set to true, you need something setup on your server that automatically redirects the user to your index page, so that the AngularJS UI Router can take over from there.

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

The reason for this is that without the hash (#) in the URL, it takes it as a literal URL and tries to navigate there when you refresh or paste the url directly.

这样做的原因是,如果没有URL中的哈希(#),它会将其作为文字URL,并在您直接刷新或粘贴网址时尝试在那里导航。

I'm not very familiar with Node so not sure how you would do that, but there is a FAQ page on the UI Router GitHub that should help you get started: https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-your-server-to-work-with-html5mode

我不是很熟悉Node所以不确定你会怎么做,但是在UI路由器GitHub上有一个FAQ页面可以帮助你入门:https://github.com/angular-ui/ui-router /维基/常问,问题#如何以进行配置,您的服务器到工作与 - html5mode

#1