基于 JavaScript 的現代 Web 應用全棧開發工具：MEAN

MEAN = MongoDB + Express + AngularJS + NodeJS，它是基于 JavaScript 的現代 Web 應用全棧開發工具。

原文地址:http://code.tutsplus.com/tutorials/introduction-to-the-mean-stack--cms-19918

Web應用的開發涉及到很多相關的技術和工具，比如數據庫操作、服務器管理、前端數據的顯示等等。開始一個新項目的時候就需要花費一些時間在這些工具和項目目錄的創建上。這個時候我就需要框架或者工具組合來加速開發。

什么是MEAN

“MEAM是基于javascript現代web應用全棧開發工具。”

這是MEAM的作者對它下的定義。可以看出MEAN是瞄準給前后端的Javascript工程師使用的，這個工具集主要包括下面幾個部分

• MongoDB
• Express
• AngularJS
• NodeJS

MEAN這套工具匯聚了當前廣大碼農喜聞樂見的Javascript開發工具，為輕松構建復雜web應用打下了基礎

安裝

兩種安裝方式

1. 使用mean.io的安裝包
2. 使用Yeoman的生成器

1 安裝包

這種安裝方式非常簡單。到mean.io，下載安裝包的zip文件。

或者用git下載MEAN，在命令行輸入 git clone https://github.com/linnovate/mean.git

2. Yeoman方式

很多開發者都為MEAN開發了Yeo的生成器，使用yeoman的生成器就下面兩步。先安裝生成器

npm install -g generator-meanstack

然后生成項目

yo meanstack

上面的例子是假設你已經安裝mean的生成器和yeoman。想看看還有什么其他的MEAN的生成器，可以來這里，過濾下關鍵字“MEAN”,就會看到一大批。如果不知道如何安裝Yeoman，看這里

Addy Osmani寫了一篇關于MEAN和它的生成器的博客。強烈推薦，看了之后就知道如何安裝和使用MEAN的生成器了。

為了教程演示的目的，本文采用Git clone的方式來安裝演示。

安裝收尾

在命令行進入到安裝(克隆)好MEAN的目錄(譯者注：記得先安裝下所需要node模塊，npm install)，然后執行grunt命令(我想你一定已經安裝過grunt-cli了吧)。grunt會啟動一個監聽3000端口的Web服務器，瀏覽器里面看看http://localhost:3000。

MEAN帶了什么

MEAN默認是一個blog應用引擎，支持多種認證的方式：非死book、GitHub、推ter、Google已經郵件+密碼的方式。

估計你已將迫不及待的想看代碼了。MEAN的目錄結構看起來是這樣的：

服務器端

服務器端相關的文件夾和文件

• app目錄,主要包括MVC三大部分
• config目錄，包括應用的配置信息，控制服務器的行為
• server.js 應用入口

我們一個一個來看

server.js

應用的入口，如果你不想用grunt來啟動服務的話，可以直接用node server.js

server.js的主要功能

• 加載配置信息. 主要是應用本身的配置，認證和數據庫連接的配置加載。
• 加載模型. 遍歷models目錄下(包括子目錄)中模型定義文件，并且加載。
• 加載證書
• 初始化Express應用
• 配置Express應用
• 配置Express路由信息
• 在指定端口啟動服務

config目錄

配置文件都在這目錄中。在env目錄主要包括開發環境、生產環境已經測試模式的配置的信息。

其他的配置文件是對應用本身的配置，比如express的配置，登陸證書的配置等。

app目錄

app都是服務器端的代碼。為MVC創建的models，view和controllers三個目錄，還有為了路由創建的文件夾。

項目創建時，就有articles users和index三個控制器，models目錄下的articles users兩個模型文件

默認創建的視圖是如下結構

includes目錄包web應用頁面的頁眉頁腳。layout目錄是頁面的布局文件，這個布局文件應會用到view目錄下index.html。

users目錄包含注冊登陸的頁面代碼。

在views根目錄，除了index.html還有404和500的頁面。

客戶端

客戶端的文件都在public目錄下，css和img目錄分別包含項目的樣式文件和圖片文件。

特別要注意下js目錄，里面包含了AngularJS代碼，如初始化，指令，過濾器(目前都是空的)，還有默人blog應用創建的控制器和服務。views目錄下是為blog應用中articles創建，編輯，查看的頁面。

lib目錄中是AngularJS庫的代碼。

測試

test目錄包含了項目的測試代碼，服務器端的代碼采用Mocha測試框架，客戶端代碼采用Karma

所需工具

使用MEAN時，開發者需要安裝好npm，bower，和grunt。

還有jshint也需要安裝。通過grunt的配合就能監視代碼，每次代碼改動就會重新自動構建。

預告

隨后還會有第二個教程來演示如何在MEAN上創建一個應用，包括如何配置MEAN以適應于不同的應用場景。

譯者贈送一視頻。

如果等不及tuts的第二篇教程，可以看看這個是視頻http://tagtree.tv/mean-stack-episode1(不過需國內或許不能訪問和推ter賬號。)和對應的代碼https://github.com/hendrikswan/tagtree-mean

來自：http://stormslowly.github.io/stack/2014/03/10/Introduction-to-the-MEAN-Stack.html