Express中弃用Pug模板引擎，改用Angular整合HTML方案咨询

嘿，我太懂你这种不想碰Pug的心情了——纯HTML写起来才叫顺手！其实完全不用视图引擎，Express本身就能轻松托管静态文件，再搭配Angular做前端交互，完美符合你的需求。下面我一步步给你拆解，还附了一个带CSS样式的表单示例，保证你一看就会。

首先，我们要让Express知道去哪里找你的HTML、CSS和JS文件。这一步很简单，用express.static中间件就能搞定：

1. 新建一个项目文件夹，初始化npm：

mkdir express-angular-demo
cd express-angular-demo
npm init -y
npm install express

2. 创建app.js文件，配置静态资源托管：

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

// 把public文件夹设为静态资源目录，所有HTML/CSS/JS都放这里
app.use(express.static('public'));

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

3. 新建public文件夹，结构如下：

public/
├── index.html       # 主页面
├── styles.css       # 样式文件
└── app/
    └── app.js       # Angular逻辑代码

如果你刚接触Angular，不用急着用复杂的CLI工具，先通过CDN快速上手。我们直接在HTML里引入Angular，然后写一个带交互的表单。

1. 编写index.html #

这里包含了Angular的CDN链接、样式引用，还有表单模板：

<!DOCTYPE html>
<html lang="zh-CN" ng-app="userFormApp">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Express + Angular 表单示例</title>
  <link rel="stylesheet" href="styles.css">
  <!-- 引入Angular CDN -->
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
  <script src="app/app.js"></script>
</head>
<body>
  <div ng-controller="FormController">
    <div class="form-wrapper">
      <h2>用户信息提交</h2>
      <form ng-submit="handleSubmit()" novalidate>
        <div class="form-group">
          <label>姓名</label>
          <input type="text" ng-model="user.name" required>
        </div>
        <div class="form-group">
          <label>邮箱</label>
          <input type="email" ng-model="user.email" required>
        </div>
        <div class="form-group">
          <label>年龄</label>
          <input type="number" ng-model="user.age" min="18" max="100">
        </div>
        <button type="submit" class="submit-btn">提交表单</button>
      </form>

      <!-- 提交结果展示 -->
      <div class="result-card" ng-if="submittedData">
        <h3>提交成功！你的信息是：</h3>
        <p>姓名：{{submittedData.name}}</p>
        <p>邮箱：{{submittedData.email}}</p>
        <p>年龄：{{submittedData.age || '未填写'}}</p>
      </div>
    </div>
  </div>
</body>
</html>

2. 编写styles.css #

给表单加一点美观的样式：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Arial', sans-serif;
}

body {
  background-color: #f5f7fa;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.form-wrapper {
  background-color: white;
  padding: 2.5rem;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  width: 100%;
  max-width: 450px;
}

h2 {
  text-align: center;
  color: #333;
  margin-bottom: 2rem;
}

.form-group {
  margin-bottom: 1.5rem;
}

label {
  display: block;
  margin-bottom: 0.5rem;
  color: #555;
  font-weight: 500;
}

input {
  width: 100%;
  padding: 0.9rem;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 1rem;
}

input:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.submit-btn {
  width: 100%;
  padding: 1rem;
  background-color: #2563eb;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.3s;
}

.submit-btn:hover {
  background-color: #1d4ed8;
}

.result-card {
  margin-top: 2rem;
  padding: 1.5rem;
  background-color: #eff6ff;
  border-radius: 6px;
}

.result-card h3 {
  color: #1d4ed8;
  margin-bottom: 1rem;
}

.result-card p {
  color: #374151;
  margin-bottom: 0.5rem;
}

3. 编写Angular逻辑app/app.js #

这里写表单的交互逻辑，比如提交处理和数据绑定：

// 定义Angular模块
angular.module('userFormApp', [])
// 定义控制器
.controller('FormController', function($scope) {
  // 初始化用户数据
  $scope.user = {};
  $scope.submittedData = null;

  // 表单提交处理
  $scope.handleSubmit = function() {
    // 简单验证：如果姓名和邮箱都填了
    if ($scope.user.name && $scope.user.email) {
      // 复制数据到结果变量
      $scope.submittedData = angular.copy($scope.user);
      // 清空表单
      $scope.user = {};
    } else {
      alert('请填写姓名和邮箱！');
    }
  };
});

现在启动Express服务器：

node app.js

打开浏览器访问http://localhost:3000，就能看到带样式的表单，填写信息提交后会展示结果啦！

如果需要把表单数据提交到Express后端，我们可以加一个POST接口：

1. 在app.js里添加接口（记得先解析JSON请求体）：

// 解析JSON格式的请求体
app.use(express.json());

// 处理表单提交的POST请求
app.post('/api/submit-user', (req, res) => {
  const userData = req.body;
  // 这里可以把数据存数据库、做验证等操作
  console.log('收到用户数据：', userData);
  // 返回成功响应
  res.status(200).json({
    message: '数据提交成功',
    data: userData
  });
});

2. 修改Angular控制器，用$http发送请求：

.controller('FormController', function($scope, $http) {
  $scope.user = {};
  $scope.submittedData = null;

  $scope.handleSubmit = function() {
    if ($scope.user.name && $scope.user.email) {
      // 发送POST请求到Express接口
      $http.post('/api/submit-user', $scope.user)
        .then(function(response) {
          $scope.submittedData = response.data.data;
          $scope.user = {};
          alert('提交成功！');
        })
        .catch(function(error) {
          console.error('提交失败：', error);
          alert('提交出错了，请重试');
        });
    } else {
      alert('请填写姓名和邮箱！');
    }
  };
});

• Angular官方快速入门：从基础概念到简单应用，一步步带你上手，是最权威的入门资料
• Express官方静态资源文档：把静态文件托管的细节讲得很清楚，必看的基础内容
• 全栈实战教程：找一些平台上的"Express + Angular 全栈开发"系列，跟着做完整项目，能快速掌握前后端配合的技巧

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