本文将为大家介绍如何使用 Angular2 Cli 构建一个完整的 MEAN Web 应用程序。MEAN 是一种流行的 Web 应用程序开发技术栈，它由 MongoDB、Express、Angular 和 Node.js 组成。使用 Angular2 Cli 可以帮助我们更加高效地构建 Web 应用程序，并且它提供了许多有用的功能，如自动化构建、测试、打包等。
环境准备
在开始之前，我们需要安装以下软件：
- Node.js：可以从官网下载并安装。
- MongoDB：可以从官网下载并安装。
安装完成后，我们可以使用以下命令检查它们是否已经正确安装：
node -v npm -v mongo --version
创建 Angular2 项目
首先，我们需要使用 Angular2 Cli 创建一个新的项目。打开终端，进入到你想要创建项目的目录，然后执行以下命令：
ng new mean-app
这将创建一个名为 mean-app 的新项目，并自动安装所有必需的依赖项。在项目创建完成后，进入到项目目录中：
cd mean-app
集成 Express 和 MongoDB
接下来，我们需要集成 Express 和 MongoDB。在项目根目录下，创建一个名为 server 的目录，并在其中创建一个名为 index.js 的文件。在 index.js 中，我们需要编写以下代码：
-- -------------------- ---- ------- ----- ------- - ------------------- ----- ---------- - ----------------------- ----- -------- - -------------------- ----- --- - ---------- ----- ---- - ---------------- -- ----- ------------------------------- --------- ---- ---- --------------------------- ------------------------------------------------------ - ---------------- ---- --- ----- ------ - ----------------- --------------- ----- ---- -- - ---------- -------- ------ ------- --- --- --------------- -------- ----------------- ------------------- ------- -- ---- ----------
这段代码使用 Express 创建了一个简单的 Web 服务器，并连接到了 MongoDB 数据库。它还定义了一个简单的路由，用于处理根路径的 GET 请求。
接下来，我们需要在 package.json 中添加一个新的脚本，用于启动我们的 Web 服务器。在 scripts 中添加以下代码：
"start:server": "node server/index.js"
现在可以使用以下命令启动我们的 Web 服务器了：
npm run start:server
创建 Angular2 组件
现在，我们需要创建一个 Angular2 组件，用于显示从服务器获取的数据。在项目根目录下，创建一个名为 src/app 的目录，并在其中创建一个名为 message 的目录。在 message 目录中，创建一个名为 message.component.ts 的文件，并编写以下代码：
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - ---------- - ---- -----------------------
------------
--------- --------------
--------- ------- ------- --------
--
------ ----- ---------------- ---------- ------ -
-------- -------
------------------- ----- ----------- --
---------- -
-------------------------------------- ---- -- -
------------ - -------------
---
-
-这段代码使用 HttpClient 发送 GET 请求，并获取服务器返回的消息。然后，它将消息显示在页面上。
接下来，我们需要在 app.module.ts 中引入 HttpClient，并将 MessageComponent 添加到 declarations 中：
-- -------------------- ---- -------
------ - ------------- - ---- ----------------------------
------ - -------- - ---- ----------------
------ - ---------------- - ---- -----------------------
------ - ------------ - ---- ------------------
------ - ---------------- - ---- ------------------------------
-----------
------------- -
-------------
----------------
--
-------- -
--------------
----------------
--
---------- ---
---------- --------------
--
------ ----- --------- - -运行应用程序
现在，我们已经完成了应用程序的开发。我们可以使用以下命令启动应用程序：
ng serve
这将启动一个开发服务器，并在浏览器中打开应用程序。现在，我们就可以看到从服务器获取的消息了。
总结
在本文中，我们学习了如何使用 Angular2 Cli 构建一个完整的 MEAN Web 应用程序。我们了解了如何集成 Express 和 MongoDB，并创建了一个 Angular2 组件，用于显示从服务器获取的数据。希望这篇文章能够帮助你更好地理解如何使用 Angular2 Cli 构建 Web 应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65bf6c58add4f0e0ff8fa757