介绍
ng-cli-express 是一款基于 Angular CLI 和 Express 的快速开发脚手架。它可以帮助我们快速搭建基于 Angular 和 Node.js 的全栈应用程序。在本篇教程中，我们将会使用 ng-cli-express 来创建一个简单的全栈应用，并介绍 ng-cli-express 的基本用法。
准备工作
我们需要安装 Node.js 和 Angular CLI 以及 ng-cli-express。
安装 Node.js
我们可以在 Node.js 官网上去下载 Node.js 安装包，安装完成后，我们可以通过命令 node -v 和 npm -v 来检查 Node.js 和 npm 的版本是否正确。
安装 Angular CLI
我们可以通过 npm 来安装 Angular CLI：
npm install -g @angular/cli
安装完成后，可以通过以下命令来检查 Angular CLI 是否正确安装：
ng --version
安装 ng-cli-express
我们可以通过 npm 来安装 ng-cli-express：
npm install -g ng-cli-express
安装完成后，可以通过以下命令来检查 ng-cli-express 是否正确安装：
ngx --version
创建并启动项目
我们现在可以通过 ng-cli-express 快速创建一个新项目：
ngx new myapp
这个命令会创建一个名为 myapp 的新项目。接下来，我们进入到项目目录并启动项目：
cd myapp ng serve
这个命令会启动项目，并监听本地的 4200 端口。现在，我们可以在浏览器中打开 http://localhost:4200 来查看项目。
添加后端 API
现在我们已经有了一个前端应用程序，接下来我们要添加一个后端 API，来提供数据支持。我们可以使用 ng-cli-express 来快速添加后端 API。
ngx generate api user
这个命令会在项目中创建一个名为 user 的 API，并配置好 Express 应用程序。现在我们可以在 src/api/user/user.router.ts 文件中添加 API 路由，例如：
-- -------------------- ---- ------- ------ - -- ------- ---- ---------- ----- ------- -------------- - ----------------- --------------- ----- ---------------- ---- ----------------- -- - ---------------- --------- --- ------ ------- -------
这个路由会在访问 /api/user 路径时返回字符串 Hello, World!。
调用后端 API
我们现在可以在我们的前端应用程序中调用后端 API。在 app.component.ts 文件中，我们可以使用 Angular 的 HttpClient 模块来调用后端 API：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ---------- - ---- -----------------------
------------
--------- -----------
--------- -
------ ----- -------
-- ------- --
-
--
------ ----- ------------ -
----- - --- -----
------- - ---
------------------- ----- ----------- -
------------------------------------------- -- -
------------ - -----
---
-
-这段代码会在应用程序初始化时调用 /api/user 路径，并将返回的消息渲染到应用程序中。
总结
在本教程中，我们介绍了如何使用 ng-cli-express 来搭建一个基于 Angular 和 Express 的全栈应用程序。我们介绍了如何创建和启动项目，并向项目中添加后端 API。最后，我们还演示了如何在前端应用程序中调用后端 API。希望这篇教程能够帮助你更好的了解 ng-cli-express，并且能够在未来的开发中使用它。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056c7881e8991b448e5f73