如何優先使用角度路由而不是節點路由，同時在角度中使用html5Mode（true）JS

我想根據html5mode(true)中的角度路由來路由我的應用程序。這是我的角碼代碼片段。如何優先使用角度路由而不是節點路由，同時在角度中使用html5Mode（true）JS

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

});

但是，當我打的網址，即在瀏覽器中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;

來源

2016-08-29 Rusty

使用localhost代替 – Aravind

與本地主機 – Rusty

更新的答案相同的結果，包括你的代碼的NodeJS。你在使用Express框架嗎？ – gdyrrahitis

您需要在您的服務器代碼中添加用於路由的catch-all規則。設置好你的服務器之前將這一規則

更新代碼：

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;

來源

2016-08-29 10:50:43 gdyrrahitis

謝謝。有效。 :) – Rusty

如何優先使用角度路由而不是節點路由，同時在角度中使用html5Mode（true）JS

回答

相關問題