AngularJS路由对接Express服务器：新手$http请求路由问题求助

我完全懂你这种摸不着头脑的感觉——初学者最头疼的就是网上示例只甩代码不说文件放哪儿，路径对应关系全靠猜！我来给你把整个项目的结构、每个文件的位置和代码都讲得明明白白，保证你能跑通基础的$http.get/post请求。

第一步：先理清项目目录结构 #

先给你一个标准的小项目结构，你照着摆文件就行：

你的项目文件夹/
├── server.js          # Express服务器的主文件（放在项目根目录）
└── programs/
    └── static/
        ├── example.html   # 你现有的HTML文件（路径不变）
        └── app.js         # 专门放AngularJS模块和控制器的文件

第二步：配置Express服务器（server.js） #

这个文件是后端的核心，要做两件事：托管你的静态文件（HTML、JS），还有写$http要调用的路由。把下面的代码复制进去：

const express = require('express');
const app = express();
const port = 3000;

// 关键：告诉Express你的静态文件（HTML、JS）都在programs/static目录下
app.use(express.static('programs/static'));

// 配置解析POST请求的参数（必须加，不然收不到前端发的POST数据）
app.use(express.urlencoded({ extended: true }));
app.use(express.json());

// 示例1：$http.get要调用的路由
app.get('/api/get-data', (req, res) => {
  // 这里可以写从数据库拿数据的逻辑，先返回测试数据
  res.json({ message: '这是GET请求返回的数据！', data: [1,2,3] });
});

// 示例2：$http.post要调用的路由
app.post('/api/submit-data', (req, res) => {
  // 拿到前端发过来的数据
  const submittedData = req.body;
  console.log('收到前端数据：', submittedData);
  // 返回响应
  res.json({ success: true, received: submittedData });
});

// 启动服务器
app.listen(port, () => {
  console.log(`服务器跑在http://localhost:${port}`);
});

第三步：写AngularJS的控制器逻辑（app.js） #

这个文件要和你的example.html放在同一个static目录下，专门处理前端的Angular逻辑：

// 定义Angular模块，和HTML里的ng-app="exampleApp"对应
var exampleApp = angular.module('exampleApp', []);

// 定义控制器，和HTML里的ng-controller对应
exampleApp.controller('ExampleController', ['$scope', '$http', function($scope, $http) {
  // 测试$http.get请求
  $scope.sendGetRequest = function() {
    $http.get('/api/get-data')
      .then(function(response) {
        // 请求成功，把数据绑定到页面
        $scope.getResponse = response.data;
      })
      .catch(function(error) {
        console.error('GET请求失败：', error);
      });
  };

  // 测试$http.post请求
  $scope.sendPostRequest = function() {
    // 要发送的数据
    const postData = { username: '测试用户', content: '这是POST测试数据' };
    
    $http.post('/api/submit-data', postData)
      .then(function(response) {
        $scope.postResponse = response.data;
      })
      .catch(function(error) {
        console.error('POST请求失败：', error);
      });
  };
}]);

第四步：修改你的example.html文件 #

把你的HTML补全，要引入AngularJS和刚才写的app.js，还要加触发请求的按钮和显示结果的区域：

<!DOCTYPE html>
<html ng-app="exampleApp">
<head>
  <!-- 引入AngularJS的CDN（不用下载本地文件，方便测试） -->
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
  <!-- 引入我们写的app.js（和HTML同目录，所以直接写文件名） -->
  <script src="app.js"></script>
</head>
<body ng-controller="ExampleController">
  <h2>测试AngularJS $http请求</h2>
  
  <!-- 触发GET请求的按钮 -->
  <button ng-click="sendGetRequest()">发送GET请求</button>
  <div ng-if="getResponse">
    <h3>GET请求返回结果：</h3>
    <p>消息：{{ getResponse.message }}</p>
    <p>数据：{{ getResponse.data }}</p>
  </div>

  <hr>

  <!-- 触发POST请求的按钮 -->
  <button ng-click="sendPostRequest()">发送POST请求</button>
  <div ng-if="postResponse">
    <h3>POST请求返回结果：</h3>
    <p>是否成功：{{ postResponse.success }}</p>
    <p>收到的数据：{{ postResponse.received }}</p>
  </div>
</body>
</html>

关键关联点一定要搞懂！ #

我给你把各个部分的对应关系掰碎了说：

• 静态文件路径：Express通过express.static('programs/static')，把这个目录设为静态资源根目录，所以你访问http://localhost:3000/example.html时，Express会自动去programs/static下找这个文件，app.js同理。
• Angular与HTML的关联：HTML里的ng-app="exampleApp"对应app.js里定义的angular.module('exampleApp', [])；ng-controller="ExampleController"对应app.js里的控制器。
• $http请求与服务器路由的关联：Angular里的$http.get('/api/get-data')，这个/api/get-data就是server.js里app.get('/api/get-data', ...)的路由路径——Express会拦截所有以/api开头的请求，交给对应的路由处理，而不是当成静态文件去找。
• 绝对路径vs相对路径：别写死http://localhost:3000/api/xxx，用相对路径/api/xxx就行，这样不管服务器跑在哪个端口或者域名下，都能正常请求。

测试步骤 #

1. 打开终端，进入你的项目根目录，先初始化npm：npm init -y
2. 安装Express：npm install express
3. 启动服务器：node server.js
4. 打开浏览器，访问http://localhost:3000/example.html，点击按钮就能看到请求结果啦！

内容的提问来源于stack exchange，提问作者Deersfeet