AngularJS:当html5mode(true)打开时,相对链接路径断开



我一直在搜索,找到了这个问题的"解决方案",但我仍然无法正常工作。

场景:

我正在用UI路由器构建一个Angular(1.2版)网站,并在localhost上的Node服务器上运行它。我正试图通过$locationProvider和打开html5(true)使其具有"漂亮"的url。我的网站在点击时运行良好,但当我尝试导航到相对链接路径或刷新链接路径时,页面会中断。我还打算在完成后将此网络应用程序部署到Heroku:

相对链接路径:

http://localhost:8000/locksmith-services

页面输出结果

Cannot GET /locksmith-services


我采取的步骤:

1.)在我的"index.html"<head>,我已经将我的基本url设置为:

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

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.)在我的导航中,我的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);

什么是最好的解决方案?提前感谢您的帮助。

感谢@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(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);

我希望这能帮助其他人!

当HTML5mode设置为true时,您需要在服务器上进行一些设置,自动将用户重定向到索引页面,这样AngularJS UI路由器就可以接管它。

原因是,如果URL中没有hash(#),它会将其作为文字URL,并在您直接刷新或粘贴URL时尝试导航到那里。

我对Node不是很熟悉,所以不确定你会怎么做,但UI Router GitHub上有一个常见问题页面,应该可以帮助你入门:https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-配置您的服务器到使用html 5模式的工作

最新更新