MEAN 全棧開發系列文章，這里只是授課的部分課件，目的是為了便于學生在課外參考。
什么是模板引擎
模板引擎（Tempalte Engine）是一個將頁面模板和要顯示的數據結合起來生成HTML頁面的工具。在談到MVC設計模式時，常常這么理解：Express中的路由控制器方法相當于MVC中的控制器（Controller），而模板引擎就相當于MVC中的視圖（View）。
模板引擎的功能是將頁面模板和要顯示的數據結合起來生成HTML頁面，它既可以運行在服務器端，又可以運行在客戶端。大多時候，它都是在服務器端直接被解析為HTML的，解析完成后，再傳輸到客戶端，因此客戶端甚至無法判斷頁面是不是由模板引擎生成的。當然，模板引擎也可以運行在客戶端，這里所說的客戶端是指瀏覽器。考慮到瀏覽器的兼容性問題，還是由服務器端運行模板引擎為好。
模板引擎工作原理，如圖所示：
簡單說來，HTML = Template + Data。值得一提的是，這里的Data是JSON對象，不能使用JSON字符串，單純的JSON字符串是渲染不出來的。
在MVC設計模式中，模板引擎放在了服務器端。當控制器得到用戶的請求后，從模型（Model）獲取到數據，再調用模板引擎。模板引擎以數據和頁面模板為輸入，生成HTML頁面，然后返回控制器，由控制器交回給客戶端。
模板引擎的種類有很多，我們這里單說 EJS.
EJS 模板引擎
EJS是Embedded JavaScript的縮寫，這個詞描述得通俗易懂：通過嵌入具有JavaScript特色的功能來進行HTML模板的渲染。也可以說，EJS是一個基于JavaScript的模板庫，用來從JSON數據中生成HTML字符串。
EJS比較通俗易懂，從代碼展示效果來看，它仍然是HTML結構，但同時又具有額外的功能，可以有效地復用已有的代碼塊。如果有一個現有的HTML項目，所需要做的全部工作就是用.ejs擴展名重新命名文件，然后，就可以使用EJS的特殊功能了。
有過Java開發經驗的人，初看EJS模板引擎并不陌生，一方面它的語法與Java中的VELOCITY相似，另一位方面完全把視圖解耦出來，性能也比較出色。
EJS：本身中規中矩，從編碼風格來看，EJS文件酷似HTML文件。不管是Node.js、Java還是.Net開發者，對EJS都比較熟悉。
從我經歷的項目來看，還是推薦使用EJS。原因是，那些已經具有ASP/JSP開發經驗的人，已經很習慣EJS的操作了。選擇主流的框架，有這方面技能的人多，便于產品的后期維護。
本書所講解的基于MEAN全棧的實例，所選用的模板引擎都是EJS。
從前面的示例中可以看出，EJS是一個通用的模板引擎，并不是說只有Node.js才可以用EJS，其他的前端框架也可以用EJS。在MEAN全棧框架中，如何使用EJS模板引擎呢？這里分兩種情況。
（1）在一個已有的Express工程中，引入EJS模板引擎。這種應用場景是，項目之前用的其他的模板引擎，現在想改為EJS，這就要安裝EJS。可以通過npm指令安裝：
npm install pjs
（2）還有一種場景是新創建一個Express工程時，引入EJS模板引擎。我們知道，如果不加限定條件，默認創建的Express工程使用的是Jade模板引擎，如果想使用EJS，只需在創建Express工程時，加上ejs限定條件就可以了。創建命令為：
express --view=ejs project name
例如，創建一個基于EJS模板引擎的Express工程，只需要簡單的幾步。
創建工程Express工程
在終端窗口進入到指定的工程目錄，執行命令：
express --view=ejs modem
終端窗口的執行過程(省略)
經過簡單的兩行命令，一個基于EJS模板引擎的Express工程就創建成功了。
啟動應用
仍然是在工程所在路徑下，在終端窗口執行命令：
npm start
這時候，在瀏覽器地址欄中輸入 “http://localhost:3000/”
這里呈現的Express頁面就是index.html，它是由視圖（index.ejs）和路由控制器（index.js）相互作用的結果。
視圖（View）文件：index.ejs的代碼如下。
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
<h1><%= title %></h1>
<p>Welcome to <%= title %></p>
</body>
</html>
路由（route）index.js文件代碼如下。
var express = require('express');
var router = express.Router();
/* GET home page. */
router.get('/', function(req, res, next)
{
res.render('index', { title: 'Express' });
});
module.exports = router;
路由器所渲染的文件，正是index.ejs。
所傳入的JSON對象，正是{title: 'Express'}。
res.render('index', { title: 'Express' });
不錯，EJS模板引擎確實是起作用了，因為它已經渲染出了一個HTML頁面。那么，這個EJS模板引擎是在哪里做的設置的呢？
EJS模板引擎的觸發
我們所創建的這個基于EJS模板引擎的Express工程，絕非是一個簡單的Hello World，它把視圖、路由、模板引擎有效地融合在了一起。在整個應用中，其關鍵作用的是工程中的app.js
文件，代碼如下。
var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var app = express();
//view engine setup
//設置模板引擎
app.set('views', path.join(__dirname, 'views'));**
app.set('view engine', 'ejs');**
app.set('views', path.join(__dirname, 'views'));
用來設置視圖所存放的目錄。這些.ejs文件，只有放在工程的views目錄下，才能被正常訪問。
app.set('view engine', 'pjs');
參考書： 《 全棧開發之道：MongoDB+Express+AngularJS+Node.js 》
更多全棧技術，請關注微信公眾號： “全棧工程師的早讀課”，每天早8:00 準時推送技術文章。
