Как создать лучшие шаблоны Angular с помощью Pug

Как разработчик, я ценю структуру приложений Angular и множество опций, доступных в Angular CLI для их настройки. Компоненты предоставляют удивительные средства для структурирования представлений, облегчения повторного использования кода, интерполяции, привязки данных и другой бизнес-логики для представлений.

Angular CLI поддерживает несколько встроенных опций препроцессора CSS для стилизации компонентов, таких как Sass/SCSS, LESS и Stylus. Однако, когда дело доходит до шаблонов, доступны только два варианта: HTML и SVG. И это несмотря на то, что существует множество более эффективных вариантов, таких как Pug, Slim, HAML и другие.

В этой статье я расскажу, как вы — как разработчик Angular — можете использовать Pug для более эффективного написания лучших шаблонов. Вы узнаете, как установить Pug в свои приложения Angular и перевести существующие приложения, использующие HTML, на использование Pug.

Pug (ранее известный как Jade) — шаблонизатор. Это означает, что это инструмент, который создает документы из шаблонов, которые объединяют определенные данные. В этом случае Pug используется для написания шаблонов, которые компилируются в функции, которые принимают данные и отображают HTML-документы.

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

Хотя HTML повсеместно используется многими и адекватно работает в шаблонах, он не является СУХИМ, и его может быть довольно сложно читать, писать и поддерживать, особенно с большими шаблонами компонентов. Вот тут-то и появляется Pug. С Pug ваши шаблоны становятся проще для написания и чтения, и вы можете расширить функциональность своего шаблона в качестве дополнительного бонуса . В оставшейся части этой статьи я расскажу вам, как использовать Pug в ваших шаблонах компонентов Angular.

Почему вы должны использовать мопса

HTML принципиально повторяющийся. Для большинства элементов у вас должен быть открывающий и закрывающий тег, который не является DRY. Вам нужно не только больше писать на HTML, но и больше читать. В Pug нет открывающих и закрывающих угловых скобок и закрывающих тегов. Поэтому вы пишете и читаете намного меньше кода.

Например, вот HTML-таблица:

 <table> <thead> <tr> <th>Country</th> <th>Capital</th> <th>Population</th> <th>Currency</th> </tr> </thead> <tbody> <tr> <td>Canada</td> <td>Ottawa</td> <td>37.59 million</td> <td>Canadian Dollar</td> </tr> <tr> <td>South Africa</td> <td>Cape Town, Pretoria, Bloemfontein</td> <td>57.78 million</td> <td>South African Rand</td> </tr> <tr> <td>United Kingdom</td> <td>London</td> <td>66.65 million</td> <td>Pound Sterling</td> </tr> </tbody> </table>

Вот как эта же таблица выглядит в Pug:

 table thead tr th Country th Capital(s) th Population th Currency tbody tr td Canada td Ottawa td 37.59 million td Canadian Dollar tr td South Africa td Cape Town, Pretoria, Bloemfontein td 57.78 million td South African Rand tr td United Kingdom td London td 66.65 million td Pound Sterling

Сравнивая две версии таблицы, Pug выглядит намного чище, чем HTML, и имеет лучшую читаемость кода. Хотя в этом небольшом примере это незначительно, в таблице Pug вы пишете на семь строк меньше, чем в таблице HTML. По мере того, как вы со временем создаете больше шаблонов для проекта, в итоге вы в совокупности пишете меньше кода с помощью Pug .

Помимо функциональности, предоставляемой языком шаблонов Angular, Pug расширяет возможности ваших шаблонов. Благодаря функциям (таким как примеси, интерполяция текста и атрибутов, условные операторы, итераторы и т. д.) вы можете использовать Pug для более простого решения проблем, в отличие от написания целых отдельных компонентов или импорта зависимостей и настройки директив для выполнения требования.

Некоторые особенности мопса

Pug предлагает широкий спектр функций, но какие функции вы можете использовать, зависит от того, как вы интегрируете Pug в свой проект. Вот несколько функций, которые могут оказаться полезными.

1. Добавление внешних файлов Pug в шаблон с помощью include .
   
   Предположим, например, что вы хотели бы иметь более лаконичный шаблон, но не чувствуете необходимости создавать дополнительные компоненты. Вы можете вынуть разделы из шаблона и поместить их в частичные шаблоны, а затем снова включить их в исходный шаблон.
   
   Например, в этом компоненте домашней страницы разделы «О программе» и «Услуги» находятся во внешних файлах и включены в компонент домашней страницы.
   

    //- home.component.pug h1 Leone and Sons h2 Photography Studio include partials/about.partial.pug include partials/services.partial.pug

    //- about.partial.pug h2 About our business p Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

    //- services.partial.pug h2 Services we offer P Our services include: ul li Headshots li Corporate Event Photography

   

2. Повторное использование блоков кода с помощью миксинов .
   
   Например, предположим, что вы хотите повторно использовать блок кода для создания некоторых кнопок. Вы бы повторно использовали этот блок кода, используя миксин.
   

    mixin menu-button(text, action) button.btn.btn-sm.m-1('(click)'=action)&attributes(attributes)= text +menu-button('Save', 'saveItem()')(class="btn-outline-success") +menu-button('Update', 'updateItem()')(class="btn-outline-primary") +menu-button('Delete', 'deleteItem()')(class="btn-outline-danger") 

   

3. Условные обозначения упрощают отображение блоков кода и комментариев в зависимости от того, выполняется условие или нет.
   

    - var day = (new Date()).getDay() if day == 0 p We're closed on Sundays else if day == 6 p We're open from 9AM to 1PM else p We're open from 9AM to 5PM

   

4. Итераторы, такие как each и while обеспечивают функциональность итерации .
   

    ul each item in ['Eggs', 'Milk', 'Cheese'] li= item ul while n < 5 li= n++ + ' bottles of milk on the wall'

   

   

5. Встроенный JavaScript может быть написан в шаблонах Pug , как показано в приведенных выше примерах.
6. Интерполяция возможна и распространяется на теги и атрибуты.
   

    - var name = 'Charles' p Hi! I'm #{name}. p I'm a #[strong web developer]. a(href='https://about.me/${name}') Get to Know Me

   

7. Фильтры позволяют использовать другие языки в шаблонах Pug .
   
   Например, вы можете использовать Markdown в своих шаблонах Pug после установки модуля JSTransformer Markdown.
   

    :markdown-it # Charles the Web Developer ![Image of Charles](https://charles.com/profile.png) ## About Charles has been a web developer for 20 years at **Charles and Co Consulting.** 

   

Это всего лишь несколько функций, предлагаемых Pug. Вы можете найти более обширный список функций в документации Pug.

Как использовать мопса в приложении Angular

Как для новых, так и для уже существующих приложений, использующих Angular CLI 6 и выше, вам потребуется установить ng-cli-pug-loader . Это загрузчик Angular CLI для шаблонов Pug.

Для новых компонентов и проектов

1. Установите ng-cli-pug-loader .
   

    ng add ng-cli-pug-loader

2. Создайте свой компонент в соответствии с вашими предпочтениями.
   
   Например, предположим, что мы создаем компонент домашней страницы:
   

    ng gc home --style css -m app

3. Измените расширение файла HTML, .html , на расширение Pug, .pug . Поскольку исходный сгенерированный файл содержит HTML, вы можете удалить его содержимое и вместо этого начать заново с Pug. Однако HTML по-прежнему может работать в шаблонах Pug, так что вы можете оставить его как есть.
4. Измените расширение шаблона на .pug в декораторе компонентов.
   

    @Component({ selector: 'app-component', templateUrl: './home.component.pug', styles: ['./home.component.css'] })

Для существующих компонентов и проектов

1. Установите ng-cli-pug-loader .
   

    ng add ng-cli-pug-loader

2. Установите инструмент командной строки html2pug. Этот инструмент поможет вам конвертировать ваши HTML-шаблоны в формат Pug.
   

    npm install -g html2pug

3. Чтобы преобразовать HTML-файл в Pug, запустите:
   

    html2pug -f -c < [HTML file path] > [Pug file path]

   Поскольку мы работаем с HTML-шаблонами, а не с полными HTML-файлами, нам нужно передать -f , чтобы указать html2pug , что он не должен оборачивать генерируемые им шаблоны в теги html и body . Флаг -c html2pug , что при преобразовании атрибуты элементов должны быть разделены запятыми. Ниже я объясню, почему это важно.
4. Измените расширение шаблона на .pug в декораторе компонентов, как описано в разделе « Для новых компонентов и проектов ».
5. Запустите сервер, чтобы убедиться в отсутствии проблем с отображением шаблона Pug.
   
   Если есть проблемы, используйте HTML-шаблон в качестве справочного материала, чтобы выяснить, что могло вызвать проблему. Иногда это может быть проблема с отступом или атрибут без кавычек, хотя и редко. Как только вы будете удовлетворены визуализацией шаблона Pug, удалите HTML-файл.

Что следует учитывать при переходе с HTML на шаблоны Pug

Вы не сможете использовать встроенные шаблоны Pug с ng-cli-pug-loader . Это отображает только файлы Pug и не отображает встроенные шаблоны, определенные в декораторах компонентов. Поэтому все существующие шаблоны должны быть внешними файлами. Если у вас есть встроенные HTML-шаблоны, создайте для них внешние HTML-файлы и преобразуйте их в Pug с помощью html2pug .

После преобразования вам может потребоваться исправить шаблоны, использующие директивы связывания и атрибутов. ng-cli-pug-loader требует, чтобы имена связанных атрибутов в Angular были заключены в одинарные или двойные кавычки или разделены запятыми. Самый простой способ сделать это — использовать флаг -c с html2pug . Однако это устраняет проблемы только с элементами, имеющими несколько атрибутов. Для элементов с одним атрибутом просто используйте кавычки.

Многие настройки, описанные здесь, можно автоматизировать с помощью средства запуска задач, сценария или пользовательской схемы Angular для крупномасштабных преобразований, если вы решите их создать. Если у вас есть несколько шаблонов и вы хотите выполнить инкрементное преобразование, было бы лучше просто конвертировать один файл за раз.

Синтаксис языка шаблонов Angular в шаблонах Pug

По большей части синтаксис языка шаблонов Angular остается неизменным в шаблоне Pug, однако, когда дело доходит до привязки и некоторых директив (как описано выше), вам необходимо использовать кавычки и запятые, поскольку () , [] и [()] мешают компиляции шаблонов Pug. Вот несколько примеров:

 //- [src], an attribute binding and [style.border], a style binding are separated using a comma. Use this approach when you have multiple attributes for the element, where one or more is using binding. img([src]='itemImageUrl', [style.border]='imageBorder') //- (click), an event binding needs to be enclosed in either single or double quotes. Use this approach for elements with just one attribute. button('(click)'='onSave($event)') Save

Директивы атрибутов, такие как ngClass , ngStyle и ngModel , должны быть заключены в кавычки. Структурные директивы, такие как *ngIf , *ngFor , *ngSwitchCase и *ngSwitchDefault , также необходимо заключать в кавычки или использовать с запятыми. Ссылочные переменные шаблона (например #var ) не мешают компиляции шаблона Pug и, следовательно, не нуждаются в кавычках или запятых. Выражения шаблона, заключенные в {{ }} , остаются неизменными.

Недостатки и недостатки использования Pug в шаблонах Angular

Несмотря на то, что Pug удобен и улучшает рабочие процессы, в его использовании есть некоторые недостатки и некоторые компромиссы, которые необходимо учитывать при использовании ng-cli-pug-loader .

Файлы не могут быть включены в шаблоны с помощью include , если они не заканчиваются на .partial.pug или .include.pug или называются mixins.pug . В дополнение к этому, наследование шаблонов не работает с ng-cli-pug-loader , и в результате использование блоков, добавление и добавление кода Pug невозможно, несмотря на то, что это полезная функция Pug.

Файлы Pug необходимо создавать вручную, так как Angular CLI генерирует только компоненты с HTML-шаблонами. Вам нужно будет удалить сгенерированный файл HTML и создать файл Pug или просто изменить расширение файла HTML, а затем изменить templateUrl в декораторе компонента. Хотя это можно автоматизировать с помощью сценария, схемы или средства выполнения задач, вам необходимо реализовать решение.

В более крупных ранее существовавших проектах Angular переход с шаблонов HTML на шаблоны Pug в некоторых случаях требует много работы и сложности. Выполнение переключения приведет к большому количеству неработающего кода, который необходимо исправить файл за файлом или автоматически с помощью специального инструмента. Привязки и некоторые директивы Angular в элементах должны быть заключены в кавычки или разделены запятыми.

Разработчики, незнакомые с Pug, должны сначала изучить синтаксис, прежде чем включать его в проект. Мопс — это не просто HTML без угловых скобок и закрывающих тегов, он требует обучения.

При написании Pug и использовании его функций в шаблонах Angular ng-cli-pug-loader не предоставляет шаблонам Pug доступ к свойствам компонента. В результате эти свойства нельзя использовать в качестве переменных, в условиях, в итераторах и во встроенном коде. Директивы Angular и шаблонные выражения также не имеют доступа к переменным Pug. Например, с переменными Pug:

 //- app.component.pug - var shoppingList = ['Eggs', 'Milk', 'Flour'] //- will work ul each item in shoppingList li= item //- will not work because shoppingList is a Pug variable ul li(*ngFor="let item of shoppingList") {{item}}

Вот пример со свойством компонента:

 //- src/app/app.component.ts export class AppComponent{ shoppingList = ['Eggs', 'Milk', 'Flour']; }

 //- app.component.pug //- will not work because shoppingList is a component property and not a Pug variable ul each item in shoppingList li= item //- will work because shoppingList is a property of the component ul li(*ngFor="let item of shoppingList") {{item}}

Наконец, index.html не может быть шаблоном Pug. ng-cli-pug-loader не поддерживает это.

Заключение

Pug может быть замечательным ресурсом для использования в приложениях Angular, но он требует некоторых вложений для изучения и интеграции в новый или уже существующий проект. Если вы готовы принять вызов, вы можете взглянуть на документацию Pug, чтобы узнать больше о его синтаксисе и добавить его в свои проекты. Хотя ng-cli-pug-loader — отличный инструмент, в некоторых областях его может не хватать. Чтобы настроить работу Pug в вашем проекте, рассмотрите возможность создания схемы Angular, которая будет соответствовать требованиям вашего проекта.