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

【问题标题】：How to give priority to angular routing instead of node routing while using html5Mode(true) in angular JS在角度 JS 中使用 html5Mode(true) 时如何优先考虑角度路由而不是节点路由
【发布时间】：2016-08-29 10:38:45
【问题描述】：

我想根据html5mode(true) 中的角度路由来路由我的应用程序。这是我的角码 sn-p。

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 时，它会将 url 重定向到 http://0.0.0.0:3000/user 这是正确的，但是当我尝试重新加载时它告诉我 Cannot GET /user 我猜这是来自 Node 服务器的响应。如何配置我的应用程序以便浏览器使用http://0.0.0.0:3000 或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;

【问题讨论】：

改用本地主机
与 localhost 的结果相同
更新答案并包含您的 NodeJS 代码。你在使用 Express 框架吗？
@gdyrrahitis 添加。是的，Express 框架。
您的文件夹结构？你把所有文件都放在 app 文件夹里了吗？

标签： angularjs node.js url-routing angular-routing html5mode

【解决方案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;

【讨论】：