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

我想根据html5mode(true)中的角路由路由我的应用程序。下面是我的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时，它将url重定向到http://0.0.0.0:3000/user，这是正确的，但当我尝试重新加载时，它告诉我Cannot GET /user，我猜这是来自节点服务器的响应。我如何配置我的应用程序，使浏览器使用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;

你需要在你的服务器代码中为路由添加一个通用规则。

在设置服务器之前通过添加以下规则来更新代码:

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;

相关内容

最新更新

热门标签：