Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. WordPress

Erstellen eines WordPress-basierten Frontends: Bootstrapping, Routing und Services

by
Difficulty:IntermediateLength:LongLanguages:
This post is part of a series called Building a WordPress-Powered Front End With the WP REST API and AngularJS.
Building a WordPress-Powered Front End: Introduction and Setup
Building a WordPress-Powered Front End: A Custom Directive for Post Listing

German (Deutsch) translation by Nikol Angelowa (you can also view the original English article)

Im vorherigen Teil dieser Serie über das Erstellen eines WordPress-basierten Frontends mit der WP REST-API und AngularJS haben wir die Projektanforderungen analysiert, Drahtmodelle bewertet, das HTML-Paket heruntergeladen und kompiliert und das Companion-Plugin für WordPress erstellt, das die Antworten für das Programm ändert Ressourcen für Posts und Users.

Nachdem wir eine solide Grundlage für unser Projekt gelegt haben, können wir nun mit der Arbeit am Frontend beginnen und grundlegende Konfigurationen für unsere Anwendung mit AngularJS einrichten.

Im aktuellen Teil der Serie werden wir:

  • Booten Sie die AngularJS-App
  • Zerlegen Sie die Vorlagen für verschiedene Ansichten im HTML-Paket
  • Konfigurieren Sie das Routing für unsere App
  • Konfigurieren Sie die Dienste für verschiedene Ressourcen in der WP REST-API

Beginnen wir mit der Initialisierung der AngularJS-App und der Analyse von Vorlagen für Ansichten, einschließlich Beitragsliste, einzelner Beitrag und Kategorien.

Bootstrapping der AngularJS App

Das erste, was wir tun müssen, um unsere WP REST API-basierte Anwendung zu erstellen, ist, sie mit der AngularJS-Direktive ng-app zu booten. Die Anweisung ng-app wird zum automatischen Bootstrap der Anwendung verwendet und verwendet den Namen des AngularJS-Moduls als optionalen Wert.

Bevor Sie jedoch mit dem Ändern von Dateien beginnen, stellen Sie sicher, dass Sie den Befehl gulp ausgeführt haben, indem Sie in das Verzeichnis quiescent-rest-api-html navigieren. Dadurch wird sichergestellt, dass alle Änderungen, die Sie im Verzeichnis /src vornehmen, vom Befehl gulp watch sofort in das Verzeichnis /dist kompiliert werden. Außerdem möchte ich Sie dazu ermutigen, in einem anderen Konsolenfenster in das Verzeichnis /dist zu navigieren und den Befehl http-server auszuführen, mit dem der HTTP-Server Node.js für dieses Verzeichnis ausgeführt wird, und Sie können eine Vorschau Ihrer Site im Browser von anzeigen Geben Sie einfach eine Webadresse ein, die so einfach wie 127.0.0.1:8080 ist.

Die ng-app-Direktive wird normalerweise im Stammelement platziert, d. H. Im <html>-Tag. Daher ändern wir das <html>-Tag in der Datei src/index.html wie folgt:

Hier ist quiescentApp der Name unseres Hauptmoduls AngularJS, das wir als nächstes in unserer Datei src/js/app.js initialisieren werden.

Die Datei src/js/app.js enthält derzeit nur eine Codezeile zum Initialisieren der von der Zurb Foundation bereitgestellten JavaScript-Funktionalität. Wir können diese Datei so ändern, dass sie den folgenden Code für das Hauptmodul unserer AngularJS-Anwendung enthält:

Das erste, was im obigen Code steht, ist die selbstaufrufende anonyme Funktion, die durch Folgendes dargestellt wird:

Wie der Name schon sagt, ist die obige Funktion anonym, d. H. Sie hat keinen Namen und ruft sich selbst auf, um sofort den gesamten Code auszuführen, der sich in ihrem Körper befindet. Dies ist eine gute Möglichkeit, den Umfang unserer Variablen und Funktionen einzuschränken, sodass sie für Manipulationen nicht global verfügbar sind.

Innerhalb der anonymen Funktion initialisieren wir unser AngularJS-Modul mit der angular.module()-Methode. Die Funktion angular.module() verwendet den Namen des Moduls als erstes Argument und ein Array von Abhängigkeiten als zweites Argument.

Die Abhängigkeiten, die wir im zweiten Argument als Array übergeben haben, sind ngRoute, ngSanitize und ngResource. Hier ist, was jeder von ihnen tut:

  • ngRoute: Dieses Modul bietet Routing- und Deep-Linking-Dienste für unsere Anwendung. Es befindet sich in der Datei angular-route.js im AngularJS-Paket, das von der offiziellen Website heruntergeladen wurde.
  • ngResource: Dieses Modul bietet Unterstützung für die Interaktion mit RESTful-Diensten. Da wir planen, die WP REST-API zu verwenden, wird dies das wichtigste Modul in unserer Anwendung sein, da wir dieses Modul verwenden werden, um mit Ressourcen wie Posts, Kategorien und Benutzern zu interagieren.
  • ngSanitize: Dieses Modul bietet Funktionen zum Bereinigen des HTML-Codes. Wir benötigen dieses Modul, wenn wir HTML auf der Seite ausgeben. Beispiele hierfür sind der Titel des Beitrags, der Inhalt des Beitrags und der Auszug.

Bitte beachten Sie, dass vor dem Einfügen dieser Module als Abhängigkeiten in unser Hauptmodul die entsprechenden Dateien in das HTML-Dokument aufgenommen werden müssen. Aber Sie brauchen sich darüber keine Sorgen zu machen, da wir dies bereits in unserer Datei gulp.js konfiguriert haben.

Nachdem Sie den obigen Code in Ihre app.js-Datei eingefügt haben, gehen Sie zu der Adresse, die vom HTTP-Server von Node.js bereitgestellt wird. Öffnen Sie auch die Entwicklertools in Ihrem Browser. Wenn Sie keine JavaScript-Fehler sehen, können Sie loslegen!

Nachdem wir unsere AngularJS-Anwendung erfolgreich initialisiert haben, können wir am Template-Teil arbeiten und Vorlagen für verschiedene Ansichten zerlegen.

Zerlegen von Vorlagen für verschiedene Ansichten

Da wir eine Single Page Application (SPA) erstellen, müssen wir Vorlagen für verschiedene Ansichten konfigurieren, die dynamisch in die Seite geladen werden, wenn jemand auf einen Link klickt.

Derzeit haben wir mehrere Seiten in unserem HTML-Code, einschließlich der Seiten mit Auflistung der Beiträge, eines einzelnen Beitrags, des Autors und der Kategorie. Der HTML-Code wurde so strukturiert, dass Kopf-, Fuß- und Hauptcontainer für alle diese Seiten gleich sind. Der Hauptcontainer in unserem Fall ist div.columns.medium-8 innerhalb des div.main.row-Tags. Mit AngularJS können wir verschiedene Vorlagen für verschiedene Routen in der Anwendung konfigurieren. Bevor wir das Routing konfigurieren, müssen wir diese Vorlagen aus den vorhandenen HTML-Dateien entfernen.

Anstatt vier verschiedene Seiten für die Indexseite, einen einzelnen Beitrag, einen Autor und eine Kategorie zu verwenden, können wir eine Haupt-HTML-Seite verwenden und je nach aktueller Route Vorlagen für verschiedene Ansichten laden.

Beginnen wir damit, die Vorlage für die Post-Listing-Ansicht zu zerlegen. Öffnen Sie die Datei /src/index.html im Code-Editor Ihrer Wahl und schneiden Sie den gesamten Code aus, der sich im div.columns.medium-8-Container befindet. Erstellen Sie eine neue Datei mit dem Namen listing.html im Verzeichnis /src/views und fügen Sie den Code in diese Datei ein.

Diese Vorlage dient als Ansicht für unsere Listingseite. Wir können den Vorgang für jede der Dateien post-single.html, author.html und category.html wiederholen. Öffnen Sie jede dieser Dateien in Ihrem Code-Editor, schneiden Sie den Inhalt des Containers div.columns.medium-8 aus und fügen Sie sie in neue Dateien ein, die im Verzeichnis /src/views erstellt wurden. Die Namen der Vorlagendateien lauten single.html, author.html bzw. category.html.

Erstellen Sie eine neue Datei im Verzeichnis /src/views für die 404-Seite und nennen Sie sie 404.html. Es muss nichts Besonderes enthalten, sondern nur die folgende Codezeile:

Wir können jetzt die Dateien /src/post-single.html, /src/author.html und /src/category.html sicher entfernen. Wir behalten die Datei /src/index.html bei, die als Haupteinstiegspunkt für unsere Anwendung dient.

Als letztes müssen wir AngularJS mitteilen, wo diese Vorlagen geladen werden sollen. Dazu können wir die Anweisung ng-view im Container div.columns.medium-8 in der Datei /src/index.html hinzufügen:

Die Anweisung ng-view teilt AngularJS mit, wo der Inhalt der Vorlagendateien geladen werden soll.

Wir können auch das Attribut auto-scroll="true" zum Container div.columns.medium-8 hinzufügen, damit der Browser uns beim Hin- und Herbewegen zwischen den Ansichten zu dem Punkt bringt, von dem wir abgereist sind.

Gehen Sie zurück zu Ihrem Browser und aktualisieren Sie ihn. Sie sollten eine Seite sehen, die nur die Kopf- und Fußzeile enthält. Dies liegt daran, dass wir das Routing noch nicht konfiguriert haben. Und das machen wir als nächstes.

Konfigurieren des Routings für unsere Anwendung

Nachdem Sie in unserer Anwendung Vorlagen für verschiedene Ansichten erstellt haben, müssen Sie AngularJS mitteilen, wie und wann diese Vorlagen geladen werden sollen. Zu diesem Zweck stellt AngularJS eine Anbieterkomponente namens $routeProvider bereit. Der $routeProvider bietet uns eine Methode namens .when(), mit der Routen zusammen mit ihren Vorlagen und einigen anderen Eigenschaften konfiguriert werden können.

Betrachten Sie den folgenden Code:

Hier konfigurieren wir unsere Anwendung mit der Methode .config(), indem wir $routeProvider in sie einfügen. Die Funktion verwendet ein Argument - $route - für den $routeProvider und verwendet es dann zum Konfigurieren verschiedener Routen.

Die .when()-Methode konfiguriert eine neue Route und verwendet zwei Parameter für den $path bzw. die $route. Das Argument $path ist eine Zeichenfolge, die den Pfad darstellt, für den wir die Route konfigurieren. Das Argument $route ist ein Objekt, das Informationen wie die zu verwendende Vorlagen-URL, den Controller, die Controller-ID usw. enthält.

Im obigen Code haben wir vier Routen für die Post-Listing-, Single Post-, Author- und Category-Ansichten konfiguriert. Wir haben ihnen gerade ihre jeweiligen Vorlagen-URLs zugewiesen und werden ihre Controller später in dieser Serie konfigurieren, wenn wir sie erstellen. Ab diesem Punkt werden wir also schrittweise auf diesem Code aufbauen.

Beachten Sie im obigen Code die benannten Gruppen, gefolgt von einem Doppelpunkt : für die Routen einzelner Posts, Autoren und Kategorien. Diese werden im Dienst $routeParams gespeichert und jeder Direktive oder Steuerung zur Verfügung gestellt, die sie verwenden möchte. Wir werden uns das genauer ansehen, aber stellen Sie sie sich vorerst nur als Orte vor, an denen auf einen Post-Slug, eine Benutzer-ID oder eine Kategorie-ID zugegriffen werden kann, wie vom Benutzer in der URL angegeben.

Abgesehen von den vier Routen haben wir die 404-Vorlage mithilfe der .otherwise()-Methode konfiguriert. Diese Methode weist AngularJS an, den Benutzer zu einer bestimmten Vorlage umzuleiten, wenn keine der konfigurierten Routen übereinstimmt.

Weitere Informationen zum AngularJS-Routingdienst und seinen verschiedenen Methoden und Argumenten finden Sie in der offiziellen Dokumentation.

Jetzt können Sie eine der folgenden vier URLs in Ihrem Browser öffnen und sollten sehen, dass die richtige Vorlage geladen wird:

Die Adresse http://127.0.0.1:8080 kann in Ihrem Fall unterschiedlich sein. Die ID / Schnecke, die wir hier bereitstellen (in diesem Fall 10), spielt an dieser Stelle keine Rolle.

Das Letzte, was wir jetzt tun müssen, ist, Dienste für Ressourcen wie Beiträge, Benutzer und Kategorien zu erstellen.

Erstellen von RESTful Services für Ressourcen

AngularJS stellt uns das ngResource-Modul zur Verfügung, mit dem wir einen RESTful-Service um einen bestimmten Endpunkt für eine Ressource erstellen können. Bevor wir uns jedoch mit dem Schreiben von Code zum Erstellen von Diensten befassen, erstellen wir einige Konfigurationsvariablen, in denen einige grundlegende Informationen gespeichert sind.

Der Serverpfad kann in Ihrem Fall unterschiedlich sein, und ich empfehle, dass Sie ihn entsprechend ändern. Durch das Deklarieren dieser Variablen können wir den Serverpfad nur an einer Stelle konfigurieren, anstatt ihn für jeden Dienst separat zu schreiben. Der obige Code sollte in die anonyme Funktion eingefügt werden, und ich habe ihn unmittelbar nach meiner Deklaration des quiescentApp-Moduls eingefügt.

Das Erstellen eines Dienstes um einen Endpunkt in AngularJS ist so einfach wie der folgende Code:

Der obige Code erstellt einen Dienst um die Posts-Ressource in der WP REST-API. Hier ist quiescentApp der Name unseres Hauptmoduls, das wir ganz am Anfang definiert haben.

Die Methode .factory() verwendet den Namen als erstes Argument, und das zweite Argument ist ein Array, das eine Liste von Abhängigkeiten und eine Funktion enthält. Die Funktion akzeptiert die als Abhängigkeiten übergebenen Argumente. Da wir $resource als Abhängigkeit für unseren Service bereitgestellt haben, wird es als Argument an die Funktion übergeben und anschließend zum Erstellen eines Service für die Posts-Ressource verwendet.

Wir haben bereits eine Variable für den API-Pfad deklariert, sodass wir den Pfad durch den folgenden ersetzen können:

Nachdem wir einen Dienst für die Posts-Ressource erstellt haben, können wir diesen Dienst als Abhängigkeit in unsere Direktiven und Controller einfügen und seine Methoden wie Posts.query(), Posts.get() usw. verwenden. Wir werden mehr darüber erfahren Diese Methoden und ihre Funktionsweise finden Sie in den folgenden Teilen der Serie. Wenn Sie jedoch neugierig sind, können Sie jederzeit die offizielle Dokumentation überprüfen.

Zum Erstellen eines Dienstes für die Posts-Ressource haben wir die Route /wp/v2/posts bereitgestellt. Diese Route verweist auf die Sammlung der Beiträge und kann auch zum Erstellen eines einzelnen Beitrags verwendet werden. In unserer Anwendung müssen wir jedoch auch einen einzelnen Beitrag basierend auf seiner Schnecke abrufen. Um diese Funktion zu berücksichtigen, können wir den Code wie folgt ändern:

Dies wird als parametrisierte URL-Vorlage bezeichnet, und die Parameter werden mit einem Doppelpunkt versehen :.

Diese Änderung ermöglicht es uns, eine Sammlung von Posts mithilfe der Route /wp/v2/posts abzurufen sowie einen einzelnen Post anhand seines Slugs mithilfe des Arguments /posts?slug=<slug> abzurufen.

Abgesehen von Beiträgen werden wir Kategorien und Benutzer anhand ihrer IDs abrufen. Der folgende Code erstellt also Dienste für die Ressourcen Users und Categories:

Daher lautet der Code für alle drei Dienste wie folgt:

Und unsere Datei /src/js/app.js sieht bisher ungefähr so aus:

Die .get()-Methode für einen RESTful-Service gibt mithilfe der GET-HTTP-Methode ein einzelnes Objekt zurück. Die .query()-Methode verwendet dieselbe GET-HTTP-Methode, gibt jedoch ein Array zurück. Es gibt drei weitere vordefinierte Methoden, die vom Dienst bereitgestellt werden, nämlich .save(), .remove() und .delete(), die POST- und DELETE-Methoden verwenden. Wir werden uns jedoch nur mit den Methoden .get() und .query() in dieser Reihe befassen, da wir uns nur mit dem Abrufen von Daten befassen.

Und das schließt unser Tutorial für heute ab.

Was kommt als nächstes?

Im aktuellen Tutorial haben wir viel JavaScript-Code geschrieben, um unsere Anwendung zu booten, Routen zu konfigurieren und RESTful-Services zu erstellen. Wir haben auch Vorlagen für verschiedene Ansichten in unserer Anwendung seziert.

Im nächsten Teil der Serie werden wir mithilfe des von uns erstellten Posts-Dienstes eine benutzerdefinierte AngularJS-Direktive für die Post-Listing-Funktion erstellen. Auf diese Weise können wir die Post-Listing-Funktion an vielen Orten einbinden, ohne uns zu wiederholen. Also bleibt gespannt...

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.