如何在angular JS中使用html5Mode(true)时优先考虑angular路由而不是节点路由

Question

我想根据 html5mode(true) 中的 angular 路由来路由我的应用程序。这是我的 angular 代码片段。

index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>MyApp</title>
        <base href="/">
        <!-- Import Angular -->
        <script type="text/javascript" src="bower_components/angular/angular.min.js"></script>
        <!-- Import Angular Route -->
        <script type="text/javascript" src="bower_components/angular-route/angular-route.min.js"></script>
        <!-- Import Local JS Files -->
        <script type="text/javascript" src="app/app.routes.js"></script>
        <script type="text/javascript" src="app/userController.js"></script>
        <script type="text/javascript" src="app/app.js"></script>
    </head>
    <body>
        <ng-view ng-app="myApp"></ng-view>
    </body>
</html>

app.js

var app = angular.module('myApp', ['appRoute'])

app.routes.js

angular.module('appRoute', ['ngRoute', 'userController'])

.config(function($routeProvider, $locationProvider) {
    $locationProvider.html5Mode({
        enabled: true
    });
    $routeProvider
    .when('/user', {
        templateUrl: 'app/user.html',
        controller: 'UserController',
        controllerAs: 'user'
    }).otherwise({
        redirectTo: '/user'
    });
});

userController.js

angular.module('userController', [])
.controller('UserController', function() {

});

但是当我点击 url 即 http://0.0.0.0:3000 in my browser, it redirects the url to http://0.0.0.0:3000/user which is correct but when I try to reload it tells me Cannot GET /user which I guess is a response from Node server. How can I configure my application so that browser uses http://0.0.0.0:3000 or http://0.0.0.0:3000/user。

更新：NodeJS 服务器代码。

// grab all we need
var path = require('path');
var express = require('express');
var app = express();

// setup public folder
app.use(express.static(path.join(__dirname, 'public')));
app.set('views', __dirname + 'public');

// set up the server
var server = app.listen(3000, 'localhost', function() {
    console.log('Server connected at ' + this.address().address + ':' + this.address().port);
});

// export exposed variable
module.exports = app;

Answer 1

您需要在服务器代码中为路由添加一个包罗万象的规则。

通过在设置服务器之前添加此规则来更新代码：

app.all('/*', function (req, res, next) {
    // Just send the index.html for other files to support HTML5Mode. Assuming your index.html is at application root
    res.sendFile('index.html', { root: __dirname });
});

这将捕获所有其他请求（与根不同）并将它们重定向回 index.html 以支持 HTML5 模式。

基本上，您的服务器代码应如下所示：

// grab all we need
var path = require('path');
var express = require('express');
var app = express();

// setup public folder
app.use(express.static(path.join(__dirname, 'public')));
app.set('views', __dirname + 'public');

/* CATCH-ALL RULE HERE */
app.all('/*', function (req, res, next) {
    // Just send the index.html for other files to support HTML5Mode
    res.sendFile('index.html', { root: __dirname });
});

// set up the server
var server = app.listen(3000, 'localhost', function() {
    console.log('Server connected at ' + this.address().address + ':' + this.address().port);
});

// export exposed variable
module.exports = app;

如何在angular JS中使用html5Mode(true)时优先考虑angular路由而不是节点路由

How to give priority to angular routing instead of node routing while using html5Mode(true) in angular JS

url-routing

node.js

angularjs

angular-routing

html5mode