AngularJS 路由到 Express 服务器的路径

Question

我是 AngularJS、Node 和 Express 的初学者。
我什至连最基本的路由都无法使用 $http.get 或 $http.post。
我在网上找到的每个示例都忽略了文件名、Angular 控制器路径和服务器中的路由路径之间的关系。他们只显示代码而不显示路径和文件名。

这是我的 html 文件：“/programs/static/example.html”：

<!DOCTYPE html>
<html ng-app="exampleApp">
<head>

</head>
<body>
    <div ng-controller="exampleController">
        <input type="submit" value="Click me" ng-click="request()">
    </div> 
    <script src="http://code.angularjs.org/1.6.9/angular.min.js"></script>
    <script src="/js/example-controller.js"></script>
</body>
</html>

这是我的 Angular 控制器：“/programs/static/js/example-controller.js”

var exampleApp = angular.module('exampleApp', []);

exampleApp.controller('exampleController', function($scope) {

    $scope.request = function() {
        data="test";
        $http.post("/" , data);
    };

});

这是我的 NodeJS 服务器：“/programs/node-server.js”

var express = require("express");

var app = express();
app.use('/', express.static('./static'));

app.post('/example.html/', function(req, res){
    console.log("request received.");
});


app.listen(80);

问题是我的服务器的控制台没有显示“收到请求”。这是我构建的一个示例应用程序，只是为了将其发布到 Stack Overflow。在我的真实应用中，我尝试了尽可能多的不同路线。我可以让我的节点服务器中的 app.get() 使用简单的 URL（不是 $http 方法）工作。但从我的测试中很明显，我的 Angular 控制器没有发送任何请求，或者服务器没有接收到它们。

Answer 1

您的 POST 端点的名称中不应包含文件扩展名。 "example.html" 的任何帖子都将尝试返回一个名为 example.html 的实际 html 文件，如果您的 \static 文件夹中有任何此类文件名。您的 API 端点应该有明确的唯一名称，没有文件扩展名：

app.post('/test', function(req, res){
  console.log("request received.");
});

当使用$http.post 并将"/" 作为参数传递时，发布到的实际URL 将与您当前的URL 相关。发布到服务器时，您应该始终使用绝对 URL（除非您知道自己在做什么）。您还应该实现.then 和.catch 方法。这些将帮助您调试问题：

$http.post("http://localhost:8080/test", data).then(function(response) {
  console.log(response);  //this will log a success
}).catch(function(error) {
  console.log(error);  //this will log the error
});

您也忘记在控制器中注入$http 提供程序：

exampleApp.controller('exampleController', function($scope, $http) {
  ...
});