#10 – Использование шаблонизатора

#10 – Использование шаблонизатора

В ходе урока мы рассмотрим использование шаблонизатора ejs для формирования HTML файлов. За счет EJS вы сможете передавать данные в HTML, обрабатывать их, создавать условия, циклы и прочие конструкции.

Видеоурок

Полезные ссылки:


Шаблонизаторы полезны и существуют во многих языках программирования. Их основная задача – передача данных из языка программирования в HTML-шаблон. Получив данные мы можем оперировать с ними как с обычными переменными: сравнивать, выводить на экран, добавлять к ним значения и так далее. Для Node JS существует шаблонизатор EJS, который выполняет задачу на отлично.


Для работы с ним выполните его подключения и установите пакет в проект. Для этого используйте команду npm install ejs


В главном файле укажите шаблонизатор что вы используете:

const express = require('express');
const app = express();
// Указываем шаблонизатор
app.set('view engine', 'ejs');

Все файлы-шаблоны должны храниться в папке views. Для отображения шаблонов на странице используйте метод render().

app.get('/', (req, res) => {
	// Вывод HTML-шаблона "index"
	res.render('index', {someInfo: "Данные для передачи"});
})

Для создания шаблона сделайте файл с расширением .ejs. В него поместите обычный HTML-код и в определенных местах используйте разметку шаблонизатора. Для использования специальной разметки помещайте код в блоках: <% %>. Более детально про различный вывод данных вы можете прочесть на официальном сайте EJS.


HTML и CSS

Для создания разметки и стилей необходимо понимать принципы написания HTML и CSS. Вы можете пройти полный курс по HTML и полный курс по CSS у нас на сайте. Также вы можете вкратце ознакомится с технологиями в наших больших видео уроках.


Изучение HTML за 45 минут:




Изучение CSS за 45 минут:



Материалы для курса

Чтобы скачивать материалы к видеокурсам необходимо оформить подписку на сайт

Онлайн редактор кода

Загрузка...

Задание к уроку

Необходимо оформить подписку на проект, чтобы получить доступ ко всем домашним заданиям

Большое задание по курсу

Вам необходимо оформить подписку на сайте, чтобы иметь доступ ко всем большим заданиям. В задание входит методика решения, а также готовый проект с ответом к заданию.
PS: подобные задания доступны при подписке от 1 месяца

Также стоит посмотреть

Создание приложения на React JS / Использование API
7 уроков
Изучение MongoDB / Работа с базой данных
8 уроков
Курс по React JS для начинающих
11 уроков
Уроки Angular для начинающих
7 уроков
Практика React JS / Разработка магазина (eCommerce)
9 уроков
Изучение стека MEAN: MongoDB, Express, Angular и Node JS
10 уроков
Комментарии
Добавить комментарий

Пока комментариев нет