ExpressJS - 返回不同結果的GET方法

Question

故事：
我使用2個GET方法創建了一個ExpressJS應用程序。第一個用於渲染index.html，另一個用於返回JSON模擬數據。

問題：
打開URL上的瀏覽器，將（果然）返回一個JSON虛擬數據，應用程序不斷渲染我的index.html。

依賴關係：
「角度」： 「^ 1.5.8」
「角動畫」： 「^ 1.5.8」
「角詠歎調」： 「^ 1.5.8」
「angular-material」：「^ 1.1.3」
「angular-messages」：「^ 1.5.8」
「angular-sanitize」：「^ 1.5.8」
「angular-ui-router」： 「^ 0.4.2」
「ejs」：「^ 2.5.6」
「express」：「^ 4.15.2」

代碼：

app.js

var express = require("express"); 
var app = express(); 
var port = 3000; 

app.engine(".html", require("ejs").__express); 
app.set("views", __dirname + "/views"); 
app.set("view engine", "html"); 
app.use(express.static(__dirname)); 

app.get("*", function(request, response) { 
     response.render("index"); 
}); 

app.get(「/get-mock-data」, function(request, response) { 
    var mockData = { 
     「name」 : 「Michael Ardan」, 
     「gender」 : 「M」, 
     「birthday」 : 「2017-01-01」, 
     「other_details」 : 「chubby」 
    }; 
    response.send(mockData); 
}); 

app.listen(port, function() { 
     console.log("Listening on port " + port); 
}); 

我的棱角，app.js

angular.module(「TestApp」 , [ 
    "ui.router", 
    "ngMaterial" 
]) 

.config(function($locationProvider){ 
    $locationProvider.html5Mode(true); 
}) 

.config(function($stateProvider, $urlRouterProvider){ 

    var homeState = { 
     "name" : "home", 
     "url" : "/home", 
     "templateUrl" : "views/home.html" 
    }; 

    var aboutState = { 
     "name" : "about", 
     "url" : "/about", 
     "templateUrl" : "views/about.html" 
     「controller」 : 「AboutController」 
    }; 

    $urlRouterProvider.otherwise("/home"); 
    $stateProvider.state(homeState); 
    $stateProvider.state(aboutState); 
}); 

其他詳情：
- 我試圖改變

app.get("*", function(request, response) { 
     response.render("index"); 
}); 

到

app.get("/", function(request, response) { 
     response.render("index"); 
}); 

，而這個工作對我來說，我不能在瀏覽器訪問http://localhost:3000/about直接。相反，服務器繼續返回「無法獲取/約」。我必須從http://localhost:3000訪問該頁面並從那裏單擊關於。

Answer 1

Express將呈現符合您的「查詢」第一個路由。您將模擬數據放在之前的默認/全部收集路線。切換順序，一切都會正常工作。

這樣做：

app.get(「/get-mock-data」, function(request, response) { 
    var mockData = { 
     「name」 : 「Michael Ardan」, 
     「gender」 : 「M」, 
     「birthday」 : 「2017-01-01」, 
     「other_details」 : 「chubby」 
    }; 
    response.send(mockData); 
}); 

app.get("*", function(request, response) { 
     response.render("index"); 
}); 

Answer 2

實際上，我沒有足夠的知識直接解釋它，但您的GET請求應該發送到index.html，而不是Express應用程序。一切都是關於Html5Mode的。

有相同的情況下，也解決你的問題：How to use AngularJS routes with Express (Node.js) when a new page is requested?