var express = require("express")
var app = express();
//注冊ejs模板為html頁。簡單的講，就是原來以.ejs為后綴的模板頁，現在的后綴名可以//是.html了
app.engine('.html', require('ejs').__express);
//設置視圖模板的默認后綴名為.html,避免了每次res.Render("xx.html")的尷尬
app.set('view engine', 'html');
//設置模板文件文件夾,__dirname為全局變量,表示網站根目錄
app.set('views', __dirname + '/views');
app.use(express.static(__dirname + '/public'));
var users = [
{name: 'tobi', email: 'tobi@learnboost.com'},
{name: 'loki', email: 'loki@learnboost.com'},
{name: 'jane', email: 'jane@learnboost.com'}
];
app.get('/', function(req, res) {
//向頁面模板傳遞參數，可以傳遞字符串和對象，注意格式
res.render('users', {
users: users,
title: "EJS example",
header: "Some users"
});
});
if (!module.parent) {
app.listen(3000);
console.log('Express app started on port 3000');
}
//user.html
<% include header.html %>
<h1>Users</h1>
<ul id="users">
<% users.forEach(function(user){ %>
<li><%= user.name %> <<%= user.email %>></li>
<% }) %>
</ul>
<hr/>
<script>
avalon.define("test", function(vm){
vm.users = <%- JSON.stringify(users) %>
})
</script>
<ul ms-each-el="users" ms-controller="test">
<li>{{el.name}} <{{el.email}}></li>
</ul>
<% include footer.html %>
//header.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> <%= title %> </title>
<script src="avalon.js"></script>
<style type="text/css">
body {
padding: 50px;
font: 13px Helvetica, Arial, sans-serif;
}
</style>
</head>
<body>
//footer.html
</body>
</html>
1、上面是express使用模版的一個基本例子
app.set("view engine","ejs"); 這句將模版引擎設置為 ejs （http://github.com/visionmedia/ejs）
ejs可通過 npm install ejs 來進行安裝
2、在app.get中。
res.render('users', { users: users, title: "EJS example", header: "Some users" }); 會執行2個步驟。
會讀取 ./views/index.ejs文件的內容，然后將其中的title變量替換為EJS example,例如<%=title%>會變為EJS example。假設返回的內容為content1
接着，會讀取./views/layout.ejs，並將其中的body變量替換為content1，例如<%=body%>會變為content1的內容。
3、在2中，如果不願意使用默認的layout.ejs，可自行指定。例如：
res.render("index",{"title":"test","layout":"main"});
或
res.render("index",{"title":"test","layout":"main.ejs"});
4、如果不願意使用layout，則可以設置layout為false，例如:
res.render("index",{"layout":false});
5、如果不想每個請求都單獨設置一次。可以使用全局設置：
app.set("view options",{
"layout":false
});
6、ejs 里，默認的閉合標記是 <% .. %>，我們也可以定義自己的標簽。例如：
app.set("view options",{
"open":"{{",
"close":"}}"
});
7、 每個模版引擎的用法都有所異同，總體的使用方法都是上面這樣的。
以下是目前常用的模版引擎：
Template Engines
Below are a few template engines commonly used with Express:
Haml haml implementation
Jade haml.js successor
EJS Embedded JavaScript
CoffeeKup CoffeeScript based templating
jQuery Templates for node
8、在web應用中，經常會需要重復顯示某個內容，例如：用戶評論功能，需要重復顯示出每一條用戶的評論，這個時候，我們可以通過循環來實現。但是也可以使用【局部模版】（partial）來實現。例如：
首先我們建一個局部的模版 ./views/comment.ejs：
<div class="comment_item"> <div class="comment_user"><%=comment.user%></div> : <div class="comment_content"><%=comment.content%></div> </div>注意：這里是comment.xxxx
然后在./views/index.ejs中，通過partial調用comment
this is <%=title%>! <br/> <%- partial("comment",comments)%>注意：這里是 partial("comment.ejs", comments); <-- 單詞要用復數。
最后是在router中，調用index.ejs。
var app=require("express").createServer(); app.set("view engine","ejs"); app.get("/",function(req,res){ res.render("index",{"title":"test","layout":false,"comments":[ {"user":"gainover","content":"test1"}, {"user":"zongzi","content":"test2"}, {"user":"maomao","content":"test3"} ]}); }); app.listen(3000);注意：代碼里的 comments 和 index.ejs的 comments變量名稱一致，而partial所調用的comment.ejs中，則采用 comment 的單數形式。
查看源代碼：效果圖如下：
在列表顯示時，我們通常會遇到的場景是，對第一個元素或者最后一個元素加以特殊顯示。在partial中，我們可以通過express內置的變量來判斷當前對象是否是第一個元素或者最后一個元素，例如:
<div class="comment_item<%if(firstInCollection){%> firtitem <%}%>"> <div class="comment_user"><%=comment.user%></div> : <div class="comment_content"><%=comment.content%></div> </div>這樣第一條評論的 class 里就會多一個firstitem。
類似的內置變量還有：
firstInCollection 如果是數組的第一個元素，則為true
indexInCollection 當前元素在數組里的索引
lastInCollection 如果是數組的最后一個元素，則為true
collectionLength 數組的長度最后是partial調用模版時的路徑查找問題：
partial("edit") 會查找同目錄下的edit.ejs文件。
partial("../message") 會查找上一級目錄的message.ejs文件。
partial("users") 會查找 users.ejs文件，如果不存在users.ejs, 則會查找 /users/index.ejs文件。
<%= users %>會對內容進行轉義，想不轉義，可以用<%- users %>。