So erstellen Sie bessere Winkelvorlagen mit Pug

Als Entwickler schätze ich, wie Angular-Apps strukturiert sind und die vielen Optionen, die die Angular-CLI zur Verfügung stellt, um sie zu konfigurieren. Komponenten bieten eine erstaunliche Möglichkeit, Ansichten zu strukturieren, die Wiederverwendbarkeit von Code, Interpolation, Datenbindung und andere Geschäftslogik für Ansichten zu erleichtern.

Angular CLI unterstützt mehrere integrierte CSS-Präprozessoroptionen für das Komponenten-Styling wie Sass/SCSS, LESS und Stylus. Bei Vorlagen stehen jedoch nur zwei Optionen zur Verfügung: HTML und SVG. Dies trotz der Tatsache, dass viele effizientere Optionen wie Pug, Slim, HAML und andere existieren.

In diesem Artikel werde ich behandeln, wie Sie – als Angular-Entwickler – Pug verwenden können, um bessere Vorlagen effizienter zu schreiben. Sie erfahren, wie Sie Pug in Ihren Angular-Apps installieren und vorhandene Apps, die HTML verwenden, auf Pug umstellen.

Pug (früher bekannt als Jade) ist eine Template-Engine. Dies bedeutet, dass es sich um ein Tool handelt, das Dokumente aus Vorlagen generiert, die bestimmte Daten integrieren. In diesem Fall wird Pug verwendet, um Vorlagen zu schreiben, die in Funktionen kompiliert werden, die Daten aufnehmen und HTML-Dokumente rendern.

Neben einer optimierten Möglichkeit zum Schreiben von Vorlagen bietet es eine Reihe wertvoller Funktionen, die über das reine Vorlagenschreiben hinausgehen, wie Mixins, die die Wiederverwendbarkeit von Code erleichtern, das Einbetten von JavaScript-Code ermöglichen, Iteratoren, Bedingungen usw. bereitstellen.

Obwohl HTML von vielen universell verwendet wird und in Vorlagen angemessen funktioniert, ist es nicht DRY und kann ziemlich schwierig zu lesen, zu schreiben und zu warten sein, insbesondere bei Vorlagen mit größeren Komponenten. Hier kommt Pug ins Spiel. Mit Pug lassen sich Ihre Vorlagen einfacher schreiben und lesen, und Sie können die Funktionalität Ihrer Vorlage als zusätzlichen Bonus erweitern . Im Rest dieses Artikels werde ich Sie durch die Verwendung von Pug in Ihren Angular-Komponentenvorlagen führen.

Warum Sie Mops verwenden sollten

HTML ist grundsätzlich repetitiv. Für die meisten Elemente müssen Sie ein öffnendes und schließendes Tag haben, das nicht DRY ist. Sie müssen nicht nur mehr mit HTML schreiben, sondern auch mehr lesen. Bei Pug gibt es keine öffnenden und schließenden spitzen Klammern und keine schließenden Tags. Sie schreiben und lesen daher viel weniger Code.

Hier ist zum Beispiel eine HTML-Tabelle:

 <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>

So sieht dieselbe Tabelle in Pug aus:

 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

Beim Vergleich der beiden Versionen der Tabelle sieht Pug viel sauberer aus als HTML und hat eine bessere Lesbarkeit des Codes. Obwohl in diesem kleinen Beispiel vernachlässigbar, schreiben Sie sieben Zeilen weniger in die Pug-Tabelle als in die HTML-Tabelle. Wenn Sie im Laufe der Zeit mehr Vorlagen für ein Projekt erstellen, schreiben Sie insgesamt weniger Code mit Pug .

Über die Funktionalität der Angular-Template-Sprache hinaus erweitert Pug, was Sie in Ihren Templates erreichen können. Mit Funktionen (wie Mixins, Text- und Attributinterpolation, Bedingungen, Iteratoren usw.) können Sie Pug verwenden, um Probleme einfacher zu lösen, als ganze separate Komponenten zu schreiben oder Abhängigkeiten zu importieren und Anweisungen einzurichten, um eine Anforderung zu erfüllen.

Einige Funktionen von Mops

Pug bietet eine breite Palette von Funktionen, aber welche Funktionen Sie verwenden können, hängt davon ab, wie Sie Pug in Ihr Projekt integrieren. Hier sind einige Funktionen, die Sie möglicherweise nützlich finden.

1. Hinzufügen externer Pug-Dateien zu einer Vorlage mit include .
   
   Nehmen wir zum Beispiel an, Sie möchten eine prägnantere Vorlage haben, haben aber nicht das Bedürfnis, zusätzliche Komponenten zu erstellen. Sie können Abschnitte aus einer Vorlage herausnehmen und sie in Teilvorlagen einfügen und sie dann wieder in die ursprüngliche Vorlage einfügen.
   
   Beispielsweise befinden sich in dieser Homepage-Komponente die Abschnitte „Über“ und „Dienste“ in externen Dateien und sind in der Homepage-Komponente enthalten.
   

    //- 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. Wiederverwendung von Codeblöcken mit Mixins .
   
   Angenommen, Sie möchten einen Codeblock wiederverwenden, um einige Schaltflächen zu erstellen. Sie würden diesen Codeblock mit einem Mixin wiederverwenden.
   

    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. Bedingungen erleichtern das Anzeigen von Codeblöcken und Kommentaren basierend darauf, ob eine Bedingung erfüllt ist oder nicht.
   

    - 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. Iteratoren wie each und while bieten Iterationsfunktionalität .
   

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

   

   

5. Inline-JavaScript kann in Pug-Vorlagen geschrieben werden, wie in den obigen Beispielen gezeigt.
6. Eine Interpolation ist möglich und erstreckt sich auf Tags und Attribute.
   

    - 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. Filter ermöglichen die Verwendung anderer Sprachen in Pug-Vorlagen .
   
   Beispielsweise können Sie Markdown in Ihren Pug-Vorlagen verwenden, nachdem Sie ein JSTransformer-Markdown-Modul installiert haben.
   

    :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.** 

   

Dies sind nur einige Funktionen, die Pug bietet. Eine umfangreichere Liste von Funktionen finden Sie in der Dokumentation von Pug.

So verwenden Sie Pug in einer Angular-App

Sowohl für neue als auch für bereits vorhandene Apps, die Angular CLI 6 und höher verwenden, müssen Sie ng-cli-pug-loader installieren. Es ist ein Angular-CLI-Loader für Pug-Vorlagen.

Für neue Komponenten und Projekte

1. Installieren Sie ng-cli-pug-loader .
   

    ng add ng-cli-pug-loader

2. Generieren Sie Ihr Bauteil nach Ihren Wünschen.
   
   Nehmen wir zum Beispiel an, wir generieren eine Homepage-Komponente:
   

    ng gc home --style css -m app

3. Ändern Sie die HTML-Dateierweiterung .html in eine Pug-Erweiterung .pug . Da die anfänglich generierte Datei HTML enthält, können Sie ihren Inhalt löschen und stattdessen mit Pug neu beginnen. HTML kann jedoch weiterhin in Pug-Vorlagen funktionieren, sodass Sie es so belassen können, wie es ist.
4. Ändern Sie die Erweiterung der Vorlage im Komponenten-Decorator in .pug .
   

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

Für bestehende Komponenten und Projekte

1. Installieren Sie ng-cli-pug-loader .
   

    ng add ng-cli-pug-loader

2. Installieren Sie das CLI-Tool html2pug. Dieses Tool hilft Ihnen, Ihre HTML-Vorlagen in Pug zu konvertieren.
   

    npm install -g html2pug

3. Um eine HTML-Datei in Pug zu konvertieren, führen Sie Folgendes aus:
   

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

   Da wir mit HTML-Vorlagen und nicht mit vollständigen HTML-Dateien arbeiten, müssen wir das -f übergeben, um html2pug anzuzeigen, dass es die von ihm generierten Vorlagen nicht in html und body -Tags einschließen soll. Das Flag -c html2pug , dass Attribute von Elementen während der Konvertierung durch Kommas getrennt werden sollen. Ich werde weiter unten erläutern, warum dies wichtig ist.
4. Ändern Sie die Erweiterung der Vorlage im Komponenten-Decorator in .pug , wie im Abschnitt Für neue Komponenten und Projekte beschrieben.
5. Führen Sie den Server aus, um zu überprüfen, ob es keine Probleme mit der Darstellung der Pug-Vorlage gibt.
   
   Wenn es Probleme gibt, verwenden Sie die HTML-Vorlage als Referenz, um herauszufinden, was das Problem verursacht haben könnte. Dies kann manchmal ein Einzugsproblem oder ein nicht in Anführungszeichen gesetztes Attribut sein, obwohl dies selten vorkommt. Wenn Sie mit der Darstellung der Pug-Vorlage zufrieden sind, löschen Sie die HTML-Datei.

Dinge, die bei der Migration von HTML zu Pug-Vorlagen zu beachten sind

Sie können keine Inline-Pug-Vorlagen mit ng-cli-pug-loader verwenden. Dies rendert nur Pug-Dateien und keine Inline-Vorlagen, die in Komponenten-Decorators definiert sind. Daher müssen alle vorhandenen Vorlagen externe Dateien sein. Wenn Sie Inline-HTML-Vorlagen haben, erstellen Sie externe HTML-Dateien für diese und konvertieren Sie sie mit html2pug in Pug.

Nach der Konvertierung müssen Sie möglicherweise Vorlagen reparieren, die Bindungs- und Attributdirektiven verwenden. ng-cli-pug-loader erfordert, dass gebundene Attributnamen in Angular in einfache oder doppelte Anführungszeichen gesetzt oder durch Kommas getrennt werden. Der einfachste Weg, dies zu tun, wäre die Verwendung des Flags -c mit html2pug . Dies behebt jedoch nur die Probleme mit Elementen, die mehrere Attribute haben. Verwenden Sie für Elemente mit einzelnen Attributen einfach Anführungszeichen.

Ein Großteil des hier beschriebenen Setups kann mithilfe eines Task-Runners oder eines Skripts oder eines benutzerdefinierten Angular-Schemas für umfangreiche Konvertierungen automatisiert werden, wenn Sie sich dafür entscheiden, eines zu erstellen. Wenn Sie einige Vorlagen haben und eine inkrementelle Konvertierung durchführen möchten, ist es besser, nur jeweils eine Datei zu konvertieren.

Syntax der Angular-Template-Sprache in Pug-Templates

Größtenteils bleibt die Syntax der Angular-Vorlagensprache in einer Pug-Vorlage unverändert, wenn es jedoch um die Bindung und einige Direktiven (wie oben beschrieben) geht, müssen Sie Anführungszeichen und Kommas verwenden, da () , [] und [()] stören die Kompilierung von Pug-Vorlagen. Hier sind ein paar Beispiele:

 //- [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

Attributdirektiven wie ngClass , ngStyle und ngModel müssen in Anführungszeichen gesetzt werden. Strukturanweisungen wie *ngIf , *ngFor , *ngSwitchCase und *ngSwitchDefault müssen ebenfalls in Anführungszeichen gesetzt oder mit Kommas verwendet werden. Vorlagenreferenzvariablen (z. B. #var ) beeinträchtigen die Pug-Vorlagenkompilierung nicht und benötigen daher keine Anführungszeichen oder Kommas. In {{ }} eingeschlossene Vorlagenausdrücke bleiben davon unberührt.

Nachteile und Kompromisse bei der Verwendung von Pug-in-Angular-Vorlagen

Obwohl Pug praktisch ist und Arbeitsabläufe verbessert, gibt es einige Nachteile bei der Verwendung und einige Kompromisse, die bei der Verwendung von ng-cli-pug-loader berücksichtigt werden müssen.

Dateien können nicht mithilfe include in Vorlagen eingeschlossen werden, es sei denn, sie enden auf .partial.pug oder .include.pug oder heißen mixins.pug . Darüber hinaus funktioniert die Vorlagenvererbung nicht mit ng-cli-pug-loader und daher ist die Verwendung von Blöcken, das Voranstellen und Anhängen von Pug-Code nicht möglich, obwohl dies eine nützliche Pug-Funktion ist.

Pug-Dateien müssen manuell erstellt werden, da Angular CLI nur Komponenten mit HTML-Vorlagen generiert. Sie müssen die generierte HTML-Datei löschen und eine Pug-Datei erstellen oder einfach die HTML-Dateierweiterung ändern und dann die templateUrl im Komponenten-Decorator ändern. Obwohl dies mit einem Skript, einem Schaltplan oder einem Task Runner automatisiert werden kann, müssen Sie die Lösung implementieren.

In größeren, bereits bestehenden Angular-Projekten ist der Wechsel von HTML-Templates zu Pug-Templates teilweise mit viel Arbeit und Komplexität verbunden. Der Wechsel führt zu einer Menge fehlerhaftem Code, der Datei für Datei oder automatisch mit einem benutzerdefinierten Tool behoben werden muss. Bindungen und einige Angular-Anweisungen in Elementen müssen in Anführungszeichen gesetzt oder durch Kommas getrennt werden.

Entwickler, die mit Pug nicht vertraut sind, müssen zuerst die Syntax lernen, bevor sie sie in ein Projekt einbauen. Pug ist nicht nur HTML ohne spitze Klammern und schließende Tags und beinhaltet eine Lernkurve.

Beim Schreiben von Pug und Verwenden seiner Funktionen in Angular-Vorlagen gewährt ng-cli-pug-loader Pug-Vorlagen keinen Zugriff auf die Eigenschaften der Komponente. Daher können diese Eigenschaften nicht als Variablen, in Bedingungen, in Iteratoren und in Inline-Code verwendet werden. Winkelanweisungen und Vorlagenausdrücke haben ebenfalls keinen Zugriff auf Pug-Variablen. Zum Beispiel mit Pug-Variablen:

 //- 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}}

Hier ist ein Beispiel mit einer Eigenschaft einer Komponente:

 //- 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}}

Schließlich kann index.html keine Pug-Vorlage sein. ng-cli-pug-loader unterstützt dies nicht.

Fazit

Pug kann eine erstaunliche Ressource für die Verwendung in Angular-Apps sein, aber es erfordert einige Investitionen, um es zu lernen und in ein neues oder bereits bestehendes Projekt zu integrieren. Wenn Sie sich der Herausforderung stellen möchten, können Sie sich die Dokumentation von Pug ansehen, um mehr über die Syntax zu erfahren und sie Ihren Projekten hinzuzufügen. Obwohl ng-cli-pug-loader ein großartiges Tool ist, kann es in einigen Bereichen fehlen. Um die Funktionsweise von Pug in Ihrem Projekt anzupassen, sollten Sie ein Angular-Schema erstellen, das die Anforderungen Ihres Projekts erfüllt.