Node.js Tutorial: Sử dụng EJS làm Template Engine trong Express

ee155b25 f0d9 4890 b9b9 3d49a7951bec.png
Rate this post

Hãy cùng chúng tôi khám phá cách sử dụng EJS làm Template Engine trong Express để tạo ra những ứng dụng web đẹp mắt và linh hoạt. Trên hết, chúng tôi sẽ hướng dẫn bạn từng bước một, giúp bạn hiểu rõ về cách cài đặt và tích hợp EJS vào dự án của mình.

Tạo một project Express với express-generator

Để tiết kiệm thời gian và nhanh chóng tạo ra một project ExpressJS, chúng ta có thể sử dụng express-generator. Để cài đặt express-generator từ command line hoặc terminal, bạn chỉ cần gõ lệnh sau:

npm install -g express-generator

Nếu bạn đang sử dụng Linux, hãy đảm bảo thêm từ khóa “sudo” ở đầu dòng lệnh trên và sử dụng tham số “-g” để cài đặt toàn cục. Sau khi cài đặt xong, hãy di chuyển đến thư mục mà bạn muốn tạo project và chạy lệnh sau để khởi tạo project:

express

Cuối cùng, chúng ta cần cài đặt các module NodeJS cần thiết cho project bằng lệnh:

npm install

Tích hợp EJS làm Template Engine

Mặc định, khi chúng ta tạo project ExpressJS bằng express-generator, nó sẽ tự động sử dụng jade làm template engine. Tuy nhiên, để sử dụng EJS làm template engine thay cho jade, bạn cần mở file app.js và sửa dòng app.set('view engine', 'jade'); thành app.set('view engine', 'ejs');. Sau đó, bạn cần xóa các file .jade không cần thiết trong thư mục views. Nếu bạn muốn gỡ bỏ hoàn toàn jade khỏi project, hãy sử dụng lệnh:

npm uninstall jade -save

Tiếp theo, chúng ta cần tạo các file .ejs cần thiết trong thư mục views. Ví dụ, chúng ta có thể tạo file index.ejs với nội dung đơn giản như sau:

<h2>Hello Word</h2>

Bây giờ, hãy truy cập vào project của bạn tại địa chỉ http://localhost:3000 để kiểm tra kết quả.

Xây dựng partials common layout với EJS

Giống như các ứng dụng khác, chúng ta cũng có thể sử dụng EJS để xây dựng các layout dùng chung cho ứng dụng như header, footer, sidebar, và nhiều hơn nữa.

Ví dụ, ta có thể tạo các file header.ejs, footer.ejs, sidebar.ejs trong thư mục views như sau:

File header.ejs:

<nav class="navbar navbar-fixed-top navbar-inverse">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Framgia</a>
    </div>
    <div id="navbar" class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </div><!--/.nav-collapse -->
  </div><!--/.container -->
</nav><!--/.navbar -->

File footer.ejs:

<footer>
  <p>© 2016 Company, Inc.</p>
</footer>

File sidebar.ejs:

<div class="list-group">
  <a href="#" class="list-group-item active">Link</a>
  <a href="#" class="list-group-item">Link</a>
  <a href="#" class="list-group-item">Link</a>
  <a href="#" class="list-group-item">Link</a>
  <a href="#" class="list-group-item">Link</a>
  <a href="#" class="list-group-item">Link</a>
  <a href="#" class="list-group-item">Link</a>
  <a href="#" class="list-group-item">Link</a>
  <a href="#" class="list-group-item">Link</a>
  <a href="#" class="list-group-item">Link</a>
</div>

Sử dụng EJS partials common layout

Để sử dụng EJS partials, chúng ta sử dụng cú pháp <% include FILENAME%>. Ví dụ, sau khi đã tạo các file header.ejs, footer.ejs, sidebar.ejs như ở trên, hãy mở file index.ejs lên và sửa nội dung như sau:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>ExpressJS</title>
  <link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="http://getbootstrap.com/examples/offcanvas/offcanvas.css" rel="stylesheet">
</head>
<body>
  <% include header%>
  <div class="container">
    <div class="row row-offcanvas row-offcanvas-right">
      <div class="col-xs-12 col-sm-9">
        <p class="pull-right visible-xs">
          <button type="button" class="btn btn-primary btn-xs" data-toggle="offcanvas">Toggle nav</button>
        </p>
        <div class="jumbotron">
          <h1>Hello world!</h1>
          <p>This is an example to show the potential of an offcanvas layout pattern in Bootstrap. Try some responsive-range viewport sizes to see it in action.</p>
        </div>
      </div>
      <div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar">
        <% include sidebar%>
      </div>
    </div>
    <% include footer%>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
</body>
</html>

Ok, bây giờ hãy truy cập địa chỉ http://localhost:3000 và xem thành quả nhé:

Node.js Tutorial: Sử dụng EJS làm Template Engine trong Express

Passing data to views trong EJS

Bây giờ, hãy mở file /route/index.jsexpress-generator đã tự tạo ra và sửa nội dung như sau:

var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
  var links = [
    { href: 'http://recruit.framgia.vn/', text: 'Framgia Việt Nam Tuyển Dụng' },
    { href: 'https://www.facebook.com/FramgiaVietnam/', text: 'Framgia Việt Nam Facebook' },
    { href: 'https://viblo.asia/', text: 'Viblo by Framgia' },
    { href: '/', text: 'Text Link 1' },
    { href: '/', text: 'Text Link 2' },
    { href: '/', text: 'Text Link 3' },
    { href: '/', text: 'Text Link 4' },
  ];
  var headline = 'Framgia Viet Nam';
  var tagline = "IT là lĩnh vực công bình và không giới hạn, nơi mỗi cá nhân được chia sẻ cơ hội và nhìn nhận thông qua nỗ lực thực sự. Tận dụng những lợi thế của IT mang lại, chúng tôi không ngừng hoàn thiện, trở thành nền tảng cho sự phát triển dịch vụ toàn cầu.";

  res.render('index', { links: links, headline: headline, tagline: tagline });
});

module.exports = router;

Tiếp theo, mở file /views/index.ejs và sửa nội dung như sau:

<div class="jumbotron">
  <h1><%= headline %></h1>
  <p><%= tagline %></p>
</div>

Mở file /views/sidebar.ejs và sửa nội dung như sau:

<div class="list-group">
  <% links.forEach(function(link) { %>
    <a href="<%= link.href %>" class="list-group-item active"><%= link.text %></a>
  <% }); %>
</div>

Cuối cùng, hãy chạy ứng dụng của bạn và xem thành quả:

Node.js Tutorial: Sử dụng EJS làm Template Engine trong Express

Sử dụng EJS làm template engine trong Express rất đơn giản, phải không các bạn? Nếu bạn còn thắc mắc gì, hãy comment xuống bên dưới và chúng tôi sẽ cố gắng trả lời trong thời gian sớm nhất.

Tham khảo: