Question

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

的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() {

});

但是当我在浏览器中点击网址Component Style时，它会将网址重定向到http://0.0.0.0:3000，这是正确的，但是当我尝试重新加载它时告诉我Cannot GET /user我猜是节点服务器的响应。如何配置我的应用程序，以便浏览器使用http://0.0.0.0:3000/user或http://0.0.0.0:3000。

更新：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 });
});

这将捕获所有其他请求（与root不同）并将它们重定向回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;

如何在角度JS中使用html5Mode（true）时优先考虑角度路由而不是节点路由

1 个答案: