前言

随着前端技术的不断发展，现在的 WEB 应用变得复杂而庞大，单纯使用 HTML、CSS 和 JavaScript 已经不再能够满足我们的需求，我们需要更加高效的方式来进行项目开发。在这篇文章中，我将会用 Express.js 和 AngularJS 来创建一个完整的 WEB 应用，旨在帮助大家更好地理解构建现代 WEB 应用的方法。

步骤

1. 安装 Node.js 和 NPM

首先必须安装 Node.js 和 NPM，这是运行 Express.js 和 AngularJS 所必须的。

可以在 Node.js 官网上下载并安装最新版的 Node.js 和 NPM，安装完成之后，可以在命令行中输入下面的命令来验证 Node.js 和 NPM 已经安装成功。

---- --
--- --

2. 创建项目

在项目文件夹中，可以通过使用 Express 应用生成器来创建一个基本的 Express.js 应用。在命令行中输入以下命令即可创建一个名为 myApp 的 Express.js 项目。

--- ------- ----------------- --
------- -----
-- -----
--- -------

以上命令将会安装 Express 应用生成器，创建 myApp 项目，并安装所需的依赖。

3. 安装和引入 AngularJS

在这一步，我们将会在 Express.js 项目中安装和引入 AngularJS。

在项目目录中安装 AngularJS：

--- ------- ------- ------

然后，在我们的 index.html 文件中添加 AngularJS 库的引用：

--------- -----
------
  ------
    ---------- ----- ----------
    ----- ---------------- ----------------------------- --
    ------- -------------------------------------------------------------------------------------
  -------
  ------
    ---
  -------
-------

上面我们在 <head> 标签中添加了 AngularJS 库的引用，<script> 里面是 AngularJS 的 CDN 地址。

4. 创建 AngularJS 控制器和视图

在这个步骤中，我们将会使用 AngularJS 创建一个控制器和视图。这个控制器将会被用于将数据传递到我们的视图中。

在 public 目录下创建一个 app.js 文件，用于定义控制器和视图。

----------------------- ---
--------------------- ---------------- -
  -------------- - ------- --------
---

上面的代码定义了一个名为 myCtrl 的控制器，并将 message 传递给视图。

接下来，我们在 index.html 文件中添加了 ng-app 和 ng-controller 标签：

--------- -----
----- ---------------
  ------
    ---------- ----- ----------
    ----- ---------------- ----------------------------- --
    ------- -------------------------------------------------------------------------------------
  -------
  ----- -----------------------
    ----- ------- ------
  -------
-------

上面的代码中，我们定义了一个 ng-app 属性，将它与我们的 AngularJS 应用关联起来。同时，我们还定义了 ng-controller 属性，并将控制器命名为 myCtrl。

最后，我们在 body 标签中添加了一个 p 标签，里面显示了我们在控制器中定义的 message。

5. 运行应用

在我们完成了以上几个步骤之后，我们可以运行我们的应用了。

在命令行中，输入以下命令以启动 Express.js 服务器：

--- -----

然后打开一个浏览器窗口，访问 http://localhost:3000/ ，我们将会看到一个显示了我们在控制器中定义的信息的页面。

结论

本文主要介绍了使用 Express.js 和 AngularJS 创建完整的 WEB 应用的步骤。我们通过安装 Node.js 和 NPM，使用 Express 应用生成器创建 Express.js 项目，安装和引入 AngularJS 库，创建 AngularJS 控制器和视图，最后运行我们的应用。希望通过本文的学习，大家能够更好地掌握如何构建现代 WEB 应用的方法。

示例代码

完整的代码已经上传到了我的 GitHub 仓库中，欢迎大家提出问题和改进意见。

https://github.com/john-doe/expressjs-angularjs

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/67297ddb2e7021665e24aba6