# Node.js: Node.js + express + EJS
[EJS](https://www.npmjs.com/package/ejs)是Embedded JavaScript的縮寫，是一種可以用JavaScript語法快速產生HTML樣板的樣板語言(template language)模組，同樣也需要用npm下載安裝。
---
因為EJS是用來產生HTML樣板的語法，所以所有 `.html` 檔案都會被 `.ejs` 檔案替換，以下示範如何在伺服器端渲染EJS檔案：
* `.ejs` 檔案都必須放在根目錄底下的 view資料夾。
* 伺服器檔案內，用 `res.render('index.ejs')` 代替 res.sendFile()。
* 拿到參數後，可如下以 `res.render('index.ejs', { product } )` 語法將取得的參數傳入EJS檔案
```plaintext
/* app.js */
const express = require('express');
const app = express();
const ejs = require('ejs');
// middleware
app.use(express.static('public'));
// routing
app.get('/', (req, res) => {
res.render('index.ejs');
})
app.get('/products/:product', (req, res) => {
const { product } = req.params;
res.render('product.ejs', {product})
})
app.listen(3000, () => {
console.log('The server is running on port 3000')
});
```
EJS檔案就和一般的HTML檔案沒什麼不同，唯一的差異在於，因為會用JavaScript拿取參數或寫一些程式碼，所以需要用到 `<% %>` 語法：
* 使用JavaScript語法：`<% /* JavaScript 一般語法*/ %>`
* 使用值會改變的JavaScript變數：`<%= /* JavaScript 變數*/ %>`
```plaintext
// /views/product.ejs
< !-- ... -->
Product
<%= product %>
```
或者比較複雜的迴圈語法可以這樣寫：
```plaintext
| name |
rating |
popularity |
<% languages.forEach(lang => { %>
| <%= lang.name %> |
<%= lang.rating %> |
<%= lang.popularity %> |
<% }); %>
```
---
最後再整理一下有關EJS檔案的使用方式：
1. 在根目錄底下的views資料夾放置 `.ejs` 檔案；
2. `.ejs` 檔案替代 `.html` 檔案；
3. 伺服器端的語法都跟平常使用express差不多，唯一要注意的是若要渲染EJS檔案，要用 `res.render()` 代替 `res.sendFile()`：
* 一般渲染： `res.render('index.ejs')`
* 傳參數渲染： `res.render('show.ejs', { username, account })`
4. EJS檔案內容的語法和平常HTML檔案的語法大同小異，唯一差別在於如何寫入JavaScript語法：
* `<% /* JavaScript 語法 */ %>`
* `<%= /* 值會改變的JavaScript變數 */ %>`
---
References
* [Embedded JavaScript templates @npm](https://www.npmjs.com/package/ejs)
* [2022網頁開發全攻略(HTML, CSS, JavaScript, React, SQL, Node, more)](https://www.udemy.com/course/html5-css3-z/learn/lecture/23929612#overview)