在当今现代化 Web 应用中，前端和后端的分离已经成为了一种趋势。而 Angular 和 Express 作为当前最流行的前端和后端框架，被广泛应用于全栈 Web 应用的开发中。
本文将详细介绍如何利用 Angular 和 Express 构建全栈 Web 应用，同时提供相关的示例代码，帮助读者更好地理解和掌握这种开发方式。
什么是 Angular？
Angular 是由 Google 开发的一款流行的前端框架，它使用 TypeScript 编写，采用组件化的架构，支持单页应用和响应式开发。
使用 Angular 可以帮助前端开发者快速构建复杂的 Web 应用，同时提供了丰富的插件和库，方便进行组件化、路由控制和状态管理等任务。
如下是一个简单的 Angular 组件示例：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- --------------
--------- -
-----
--------- --------------
------ ------------------ ------------------ ---- -------
------
-
--
------ ----- ------------------- -
---- - ----------
-该组件通过 @Component 装饰器将一个类转换为 Angular 组件，并使用模板 template 定义了该组件的 UI 和行为。
什么是 Express？
Express 是一个流行的 Node.js 服务器框架，它提供了简单易用的 API，方便开发者构建 Web 应用、创建 API 和处理 HTTP 请求等任务。
使用 Express 可以帮助后端开发者快速构建并管理 Web 应用，同时提供了各种中间件和插件，方便进行路由控制、请求处理和数据库操作等任务。
如下是一个简单的 Express 应用示例：
-- -------------------- ---- ------- ----- ------- - ------------------- ----- --- - ---------- ------------ -------- ----- ---- - --------------- ----------- --- ---------------- -------- -- - -------------------- ------ -- --------- -- ---- ------- ---
该应用通过 express 模块创建一个 Express 应用实例，并使用 app.get 方法定义了处理根路径 '/' 的路由函数，并使用 app.listen 方法启动了 Express 服务器。
如何构建全栈 Web 应用？
在开始构建全栈 Web 应用之前，需要了解前后端分离的概念和实现，即前端负责 UI 和交互，后端负责业务逻辑和数据处理。
使用 Angular 和 Express 搭建全栈 Web 应用有两种方式：
- 使用 Angular CLI 和 Express generator 生成模板代码，再根据需求进行定制。
- 手动搭建 Angular 和 Express 项目，编写自己的代码。
下面将分别介绍这两种方式的具体步骤和示例代码。
使用 Angular CLI 和 Express generator
Angular CLI 和 Express generator 是两款流行的 Web 应用生成器，提供了创建 Web 应用所需的基本模板和工具，可以便捷地搭建一个全栈 Web 应用。
步骤
安装 Angular CLI 和 Express generator。
npm install -g @angular/cli npm install -g express-generator
使用 Angular CLI 创建一个 Angular 应用，并使用 @angular/cli 工具集成 Express。
ng new my-app --skip-install cd my-app ng add @ng-toolkit/universal
使用 Express generator 创建一个 Express 应用，并将其集成到 Angular 应用中。
express --view=pug server cd server npm install
将 Angular 应用和 Express 应用整合到一起。
在 Angular 应用中安装依赖。
npm install --save-dev nodemon concurrently
在 Angular 应用的 package.json 文件中添加以下脚本：
"server": "nodemon server/bin/www", "start": "concurrently \"ng serve\" \"npm run server\""
将 Express 应用代码放入 Angular 应用的 server 目录中。
启动应用。
npm start
示例代码
Angular 应用
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ---------- - ---- -----------------------
------------
--------- -----------
--------- -
--------- ---------------
---------- ---- ------- ---------------
-
--
------ ----- ------------ -
----- - ----------
------------------- ----- ----------- --
---------- -
-------------------------------------------- ---- -- -
------------ - -------------
---
-
-Express 应用
-- -------------------- ---- ------- ----- ------- - ------------------- ----- ---- - ---------------- ----- ------------ - ------------------------- ----- ------ - ------------------ ----- ----------- - --------------------------- ----- ----------- - --------------------------- ----- --- - ---------- ----------------------- ------------------------ ---------------------------- --------- ----- ---- ------------------------ ------------------------------------------- ------------ ------------ ------------- ----------------- ------------- --------------------- ----- ---- -- - ---------- -------- ------ ---- --------- --- --- -------------- - ----
手动搭建 Angular 和 Express 项目
如果对 Angular CLI 和 Express generator 不熟悉，或者需要自定义更多的配置，可以通过手动搭建 Angular 和 Express 项目来完成。
步骤
创建 Angular 应用。
ng new my-app --skip-install cd my-app npm install
创建 Express 应用。
mkdir server cd server npm init -y npm install express nodemon
编写前端代码和后端代码，然后将前后端整合在一起。
启动应用。
npm run start
示例代码
前端代码
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ---------- - ---- -----------------------
------------
--------- -----------
--------- -
--------- ---------------
---------- ---- ------- ---------------
-
--
------ ----- ------------ -
----- - ----------
------------------- ----- ----------- --
---------- -
-------------------------------------------- ---- -- -
------------ - -------------
---
-
-后端代码
-- -------------------- ---- ------- ----- ------- - ------------------- ----- --- - ---------- --------------------------------------- --------------------- ----- ---- -- - ---------- -------- ------ ---- --------- --- --- ---------------- -- -- - -------------------- ------ -- --------- -- ---- ------- ---
总结
使用 Angular 和 Express 构建全栈 Web 应用是现代化 Web 开发中一种非常流行和实用的方式，通过将前端和后端整合到一起，可以更加高效和可靠地构建复杂的 Web 应用。
本文介绍了两种构建全栈 Web 应用的方式，通过 Angular CLI 和 Express generator 或手动搭建 Angular 和 Express 项目，帮助读者更好地理解和掌握这种开发方式。同时，也提供了相应的示例代码供读者参考。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64ec777bf6b2d6eab36c4a03