MEAN

มาใช้ Angular 1 บน MEAN Stack กัน แบบไม่ใช้ Jade

เรื่องที่เกี่ยวข้อง - AngularJS, EJS, Jade, MEAN Stack

ปกติ MEAN Stack จะมีการนำ Angular มาใช้ในหน้าเว็บ (ฝั่ง Front-end) อยู่แล้ว เพียงแต่ตัว HTML Template Engine ในระบบ Express ที่ MEAN Stack กำหนดมาคือ Jade Template ซึ่งเวลาเขียนมันจะเป็นรูปแบบพิเศษๆ ไม่เหมือน HTML ทั่วไปดังนี้

doctype
html
   head
      title Nextflow Training: MEAN Stack
   body
      h1 Hello, World!

แน่นอนว่ามันทำให้การเขียน HTML ดูเรียบๆ สวยๆ สะอาดๆ แต่สำหรับคนที่ไม่คุ้นเคย อาจทำให้การทำงานในส่วนนี้เสียเวลาโดยใช่เหตุ

หลายๆ บริษัทที่พลไปช่วยโค้ชเรื่อง MEAN Stack ก็คิดแบบเดียวกัน แบบว่า “ขอ HTML แบบปกติมาใช้งานเถอะ พลีสสสส” เพราะพวกเราหลายๆ คนก็โอเคกับการเอา Angular มาใช้งานในไฟล์ HTML แบบปกติอยู่แล้ว

เลยขอมาเขียนแนะนำไว้ที่นี่นะ

1. สลับ Template Engine จาก Jade เป็น EJS

อย่างแรกเลย คือเราจะต้องสลับไปใช้ Template Engine อื่นที่ไม่ใช่ Jade เพราะ Syntax ของ Jade นั้นเป็นปัญหา เราเลยจะสลับไปใช้ EJS ซึ่งเป็นมิตรกับ HTML กว่ามาก

ว่าแล้วก็สั่งติดตั้ง ejs ลงในโปรเจค

npm install ejs

จากนั้นในไฟล์ app.js  ของโปรเจค Express ให้ลบส่วนที่ใช้ Jade engine ออก และใส่เป็น ejs แทนตามนี้

app.engine('html', require('ejs').renderFile);

app.set('view engine', 'html');

2. เรียกใช้งานไฟล์ HTML ด้วยคำสั่ง Render ตามปกติ

เมื่อเราสลับมาใช้ EJS เป็น engine แล้ว เราสามารถเรียกใช้ไฟล์ HTML เป็น template ได้ตามปกติเลย

router.get('/', function(req, res, next) {

   res.render('index'); // เรียกใช้ไฟล์ index.html ในโฟลเดอร์ที่กำหนดไว้ (ค่าเริ่มต้นคือ Views)

});

สรุป

ดังนั้นหากพวกเราไม่ถนัดในการนำ Jade มาใช้ใน Workflow ของโปรเจค MEAN Stack ก็ยังมีตัวเลือกเป็น EJS และ HandleBars ที่ยุ่งเกี่ยวกับ HTML น้อยกว่า Jade ให้เลือกใช้ครับ

อ้างอิง – Stack Overflow

เริ่มต้นยุค AI ด้วยคอร์สฟรี และพรีเมี่ยม กับพล

หากชอบสิ่งที่พลเล่า เรื่องที่พลสอน สามารถสนับสนุนพลโดยการเข้าเรียนคอร์สออนไลน์ของพลนะคร้าบ

  • เข้าใจง่าย ใช้ได้จริง ออกแบบการสอนอย่างเข้าใจโดยโค้ชพล
  • มีคอร์สสำหรับคนใช้งานทั่วไป จนถึงเรียนรู้เพื่อใช้งานในสายอาชีพขั้นสูง
  • ทุกคอร์สมีใบประกาศณียบัตรรับรองหลังเรียนจบ

เราใช้คุกกี้เพื่อพัฒนาประสิทธิภาพ และประสบการณ์ที่ดีในการใช้เว็บไซต์ของคุณ คุณสามารถศึกษารายละเอียดได้ที่ นโยบายความเป็นส่วนตัว และสามารถจัดการความเป็นส่วนตัวเองได้ของคุณได้เองโดยคลิกที่ ตั้งค่า

Privacy Preferences

คุณสามารถเลือกการตั้งค่าคุกกี้โดยเปิด/ปิด คุกกี้ในแต่ละประเภทได้ตามความต้องการ ยกเว้น คุกกี้ที่จำเป็น

Allow All
Manage Consent Preferences
  • Always Active

Save