前端工程化已经成为了当前前端开发中必不可少的一环，而MEAN Stack 这种全栈JavaScript 开发方案受到了越来越多开发者的关注和使用。这篇文章将会为你介绍如何使用MEAN Stack 来构建单页应用。
什么是MEAN Stack？
MEAN Stack 全称为MongoDB、Express、AngularJS 和Node.js，是一种基于JavaScript 的全栈开发解决方案。其中，MongoDB 用于存储数据，Express 作为Web 应用框架，AngularJS 用于前端构建，Node.js 用于服务器端开发。
如何搭建MEAN Stack环境
MongoDB
首先需要安装MongoDB 数据库，安装方法可以参考官方文档。安装完毕后需要创建一个数据库，这里我们以users 数据库为例：
--- -----
Node.js
安装Node.js 非常简单，在https://nodejs.org/en/ 上下载相应的版本，然后点击安装即可。
然后我们需要添加npm 包管理工具：
---- ------- ------- ---
Express
使用Express 来构建Web 应用非常方便，首先需要在我们的工程目录下安装Express：
--- ------- -------
然后在app.js 文件中引入：
----- ------- - ------------------- ----- --- - ----------
AngularJS
AngularJS 是一个开源的JavaScript MVC 框架，可以帮助我们快速地构建单页应用。
首先需要下载 AngularJS：
--- ------- -------
然后在 index.html 文件中引入：
------- ---------------------- ------------------------------------------------
开始构建单页应用
构建一个简单的MEAN Stack 应用
接下来我们将通过一个简单的示例来演示如何使用MEAN Stack 构建一个单页应用。首先我们需要使用Express 来搭建一个Web 服务器，这里我们使用Mongoose 来连接MongoDB 数据库。
在 app.js 文件中添加以下代码：
----- ------- - -------------------
----- ---------- - -----------------------
----- -------- - --------------------
----- --- - ----------
-- --------- ---
--------------------------------------------- ----------------- -------
-- --------
----- ---------- - --- -----------------
----- -------
---- ------
---
----- ---- - ---------------------- ------------
-- ---------- ---
---------------------------------------- ---------
---------------------------
-- ------
----------------- ----- ---- -- -
--------------- ------ -- -
-- ----- ----- ----
----------------
---
---
-- -----
------------------ ----- ---- -- -
----- ---- - --- ------
----- --------------
---- ------------
---
--------------- -- -
-- ----- ----- ----
------------------ -------
---
---
-- ----
---------------- -- -- -
------------------- ------- -- ------------------------
---在浏览器中打开 http://localhost:3000/users 即可看到数据列表。
现在我们已经成功地使用MEAN Stack 来构建了一个简单的单页应用。
使用AngularJS 来渲染数据
如果使用jQuery 来渲染数据，代码将会比较啰嗦。因此我们决定使用AngularJS 来完成页面渲染。
首先我们需要在index.html 文件中定义一个ng-app 属性并引入我们的JavaScript 文件。
--------- -----
----- --------- ---------------
------
----- ----------------
----------- ----- ------------
-------
------
---- -------------------------
----- -------------------------
------ ----------- ------------------------
------ ----------- -----------------------
------ ------------- ---------- ------
-------
----
--- --------------- -- -------------------- - -----------------
-----
------
------- ---------------------- ------------------------------------------------
------- ---------------------- --------------------------
-------
-------在 app.js 文件中，我们需要创建一个AngularJS 的module 和一个controller：
----- --- - ----------------------- ----
-------------------------- ---------- -------- -------- -------- ------ -
--------------------------------- ---------- -
------------ - --------------
---
-------------- - ---
----------------- - -------- -- -
-------
------- -------
---- ---------
----- --------------
---------------- ---------- -
-- ----------------------- -
--------------------------------- ---------- -
------------ - --------------
---
-------------- - ---
-
---
--
----在浏览器中打开http://localhost:3000/ 即可看到一个简单的列表和添加用户的表单。
总结
通过使用MEAN Stack 来构建单页应用，我们得以使用JavaScript 来完成整个项目的开发。而且，MEAN Stack 能够为开发者提供一整套的解决方案，包括安全、扩展性等等。希望这篇文章能够帮你更好的理解和应用MEAN Stack。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/664e9131d3423812e4ee8d29