Erstellen eines WordPress-basierten Frontends: Posts, Kategorien und Benutzer-Controller

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

Im vorherigen Teil der Serie haben wir eine benutzerdefinierte Direktive zum Auflisten von Posts im Frontend erstellt. Diese Anweisung verwendet Argumente direkt im HTML-Attribut sowie in der URL, um Beiträge vom Server abzurufen. Durch das Erstellen der Direktive konnten wir die Post-Listing-Funktion an einer beliebigen Stelle in unserer Anwendung anzeigen, indem wir die Geschäftslogik und die von der Direktive bereitgestellte Rendering-Logik wiederverwendeten.

In diesem abschließenden Teil der Reihe werden wir den verbleibenden Teil unserer Anwendung bearbeiten und Controller für die Auflistung von Beiträgen, einzelne Beiträge, Autoren und die Kategorieseite erstellen. Wir werden auch an den Vorlagen dieser Steuerungen arbeiten und darauf die von den Steuerungen bereitgestellten Daten anzeigen.

Um genau zu sein, werden wir im aktuellen Teil der Serie:

Stellen Sie sich AngularJS-Controllern vor
Erstellen Sie Controller für Beiträge, Kategorien und Benutzer
Verknüpfen Sie Vorlagen mit den vom Controller bereitgestellten Daten

Beginnen wir also damit, uns AngularJS-Controllern vorzustellen.

Einführung in AngularJS-Controller

Controller in AngularJS sind einer der Hauptbausteine der Anwendung. Sie enthalten Geschäftslogik, die entscheidet, welche Daten dem Benutzer angezeigt werden sollen. Sie steuern einen Großteil der UI-bezogenen Funktionen der Anwendung und bieten auch Unterstützung für die Benutzerinteraktion.

Controller sind eng mit DOM verbunden und kleben das Modell der Anwendung - in der sich die Daten befinden - in die Anwendungsansicht.

In unserem Fall, in dem wir die Anwendung erstellen, die von der WP REST-API unterstützt wird, zeigen die Controller dem Endbenutzer die über die API und verschiedene Dienste abgerufenen Daten an.

Erstellen eines Controllers für die Post Listing View

Controller in AngularJS werden im Modul definiert, und wir verwenden dieselbe Notation für den sicheren Stil der Abhängigkeitsinjektion wie für die Deklaration der benutzerdefinierten Direktive. Betrachten Sie den folgenden Code, in dem wir einen Controller für die Post-Listing-Seite deklarieren:

/**
 * Controller for Post Listing
 */
quiescentApp.controller( 'PostListing', [function() {
    var self = this;
}] );

Controller werden in einem Modul mithilfe der im Modul verfügbaren .controller()-Methode definiert. Der Name des Controllers, den wir oben definiert haben, lautet PostListing.

Alle Daten, die wir der Außenwelt zur Verfügung stellen müssen, sollten in der Controller-Konstruktorfunktion auf das Schlüsselwort this gesetzt werden. Daher zwischenspeichern wir das Schlüsselwort this, indem wir eine self-Variable erstellen.

Der Controller für die Nachauflistung ist der einfachste aller Controller, die wir herstellen werden, in dem Sinne, dass er keine Daten benötigt. Es muss nur eine Vorlage verknüpft sein, und wir werden die Anweisung <post-listing></post-listing> in diese Vorlage einfügen, um mit dem Auflisten von Posts zu beginnen. Die Direktive ruft Posts mithilfe des Posts-Dienstes selbst ab und listet sie mithilfe ihrer eigenen Renderlogik auf.

Als ersten Schritt verknüpfen wir die Vorlage views/listing.html mit dem PostListing-Controller, und zwar im Abschnitt .config() unserer Anwendung. Im Abschnitt .config() haben wir die Routen für die Anwendung konfiguriert und müssen die Route /wp/v2/posts wie folgt ändern:

$route.when( '/posts', {
    templateUrl: 'views/listing.html',
    controller: 'PostListing',
    controllerAs: 'postListing'
} )

Im obigen Code haben wir zwei zusätzliche Eigenschaften in die Routendefinition eingefügt. Diese Eigenschaften sind:

controller: Der Name des Controllers, den wir mit dieser Route und ihrer Vorlage verknüpfen müssen.
controllerAs: Das Schlüsselwort, mit dem wir in unserer Vorlage auf den Controller verweisen.

Daher haben wir PostListing als Controller-Namen übergeben und werden in der Vorlage mit dem Schlüsselwort postListing darauf verweisen.

Nachdem wir den Controller mit der Route und der Vorlage verknüpft haben, müssen wir die Vorlage jetzt ändern, um die Beiträge ordnungsgemäß aufzulisten. Öffnen Sie also die Vorlagendatei views/listing.html und ersetzen Sie ihren Inhalt durch den folgenden Code:

1	<post-listing></post-listing>

Unten ist ein Screenshot der fertigen Vorlage:

Und das ist es! Die obige Codezeile zeigt die Leistungsfähigkeit von AngularJS-Anweisungen. Mit nur einer Codezeile konnten wir die Funktionalität für die Post-Listung nachahmen, die sowohl Geschäftslogik als auch Renderlogik umfasst. In den folgenden Abschnitten werden wir weiter sehen, wie flexibel diese AngularJS-Direktive sein kann, wenn Controller für die Kategorien- und Benutzerlistenansichten erstellt werden.

Erstellen eines Controllers für die Kategorieansicht

Nachdem wir uns mit der Syntax der Controller-Deklaration vertraut gemacht und einen sehr einfachen Controller für die Post-Listung erstellt haben, können wir mit der Arbeit an einem erweiterten Controller für die Kategorieansicht beginnen.

Der von uns erstellte Categories View Controller verwendet den Dienst $routeParam, um auf die Kategorie-ID in der URL zuzugreifen. Mit dieser ID verwendet der Controller den Categories-Dienst, um Kategoriedaten und eine Liste der zugehörigen Beiträge abzurufen. Der Controller ruft die Beiträge jedoch nicht direkt über den Dienst Posts ab, sondern verwendet die Anweisung postListing und übergibt ihr die Kategorie-ID, um eine Liste der Beiträge abzurufen, die dieser Kategorie zugeordnet sind.

Unten finden Sie den Code für den CategoryListing-Controller:

/**
 * Controller for Categories
 */
quiescentApp.controller( 'CategoryListing', ['$routeParams', 'Categories', function( $routeParams, Categories ) {
    var self = this;
    self.categoryInfo = {};
    
    Categories.get( {'id': $routeParams.id}, function( data, headers ) {
        self.categoryInfo = data;
    });
}] );

Der oben genannte CategoryListing-Controller weist zwei Abhängigkeiten für den Dienst $routeParams und den benutzerdefinierten Dienst Categories auf. Mit dem Dienst $routeParams wird die ID der Kategorie von der URL abgerufen und anschließend mit dieser ID die Kategoriedaten über den Dienst Categories abgefragt.

Der Controller verfügt über eine Variable, die für das $scope-Objekt mit dem Namen categoryInfo definiert ist. Diese Variable enthält das vom Server zurückgegebene Kategorieobjekt und sein Wert wird festgelegt, nachdem die Abfrage erfolgreich war.

Als nächstes müssen wir eine Vorlage mit diesem Controller verknüpfen, die dem Benutzer die Daten anzeigt. Und das tun wir im Abschnitt .config der Anwendung, genau wie im vorherigen Abschnitt für den PostListing-Controller.

Ändern Sie daher die Route /category/:id so, dass sie den folgenden Code enthält:

// category profile route
.when( '/categories/:id', {
    templateUrl: 'views/category.html',
    controller: 'CategoryListing',
    controllerAs: 'categoryListing'
} )

Im obigen Code verknüpfen wir die Route mit dem CategoryListing-Controller und definieren auch das Schlüsselwort categoryListing, über das wir in der Vorlage darauf verweisen.

Es ist jetzt an der Zeit, die Vorlage views/category.html so zu ändern, dass Daten dynamisch angezeigt werden, anstatt statischen HTML-Code anzuzeigen.

1	<h2>Category: {{categoryListing.categoryInfo.name}}</h2>
2
3	<post-listing post-args="{'filter[cat]': categoryListing.categoryId}"></post-listing>

Im obigen Code haben wir den fest codierten Kategorienamen durch {{categoryListing.categoryInfo.name}} ersetzt, wobei categoryListing eine Instanz des CategoryListing-Controllers ist. Die Variable categoryInfo enthält das vom Server zurückgegebene Kategorieobjekt, und dieses Objekt enthält die Eigenschaft name für den Namen der Kategorie.

Für die Post-Listing-Funktion verwenden wir die postListing-Direktive und übergeben ihr die Kategorie-ID über das post-args-Attribut. Zu diesem Zweck verwenden wir die filter[]-Syntax, die von der Route /wp/v2/posts der WP REST-API unterstützt wird. Wir sind bereits mit der filter[]-Syntax aus dem vierten Teil der Einführungsserie über die WP REST-API vertraut.

Unten sehen Sie einen Screenshot der fertigen Kategorieansicht:

Lassen Sie uns nun den Controller für Benutzer erarbeiten, der dem Controller für Kategorien sehr ähnlich ist.

Erstellen eines Controllers für die Benutzeransicht

Der Controller für die Benutzeransicht ist dem von Kategorien sehr ähnlich. Zunächst ändern wir die Routing-Konfiguration, um den Controller mit der Vorlage zu verknüpfen:

// author profile route
.when( '/users/:id', {
    templateUrl: 'views/author.html',
    controller: 'UserListing',
    controllerAs: 'userListing'
} )

Hier verknüpfen wir den UserListing-Controller mit der Route und ihrer Vorlage. Das Schlüsselwort, mit dem wir auf die Controller-Instanz verweisen, lautet userListing.

Es folgt der Code für den UserListing-Controller:

/**
 * Controller for Users
 */
quiescentApp.controller( 'UserListing', ['$routeParams', 'Users', function( $routeParams, Users ) {
    var self = this;
    self.userInfo = {};
    self.userId = $routeParams.id;
    
    Users.get( {'id': self.userId}, function( data, headers ) {
        self.userInfo = data;
    });
}] );

Der UserListing-Controller verwendet die Dienste $routeParams und Users als Abhängigkeiten. Mit dem Dienst $routeParams wird auf die Benutzer-ID in der URL zugegriffen. Der Users-Dienst wird dann verwendet, um das Benutzerobjekt unter Verwendung der Benutzer-ID abzurufen. Die Variable userInfo enthält das vom Server zurückgegebene Benutzerobjekt.

Ändern Sie nun die Vorlage views/author.html, um diese Daten für den Benutzer zu rendern. Ersetzen Sie den gesamten Inhalt der Datei author.html durch Folgendes:

<!-- author box starts -->
<div class="author-box row">
    <figure class="author-gravatar columns medium-4">
        <img ng-src="{{userListing.userInfo.quiescent_avatar_url}}" alt="{{userListing.userInfo.name}}">
    </figure>
    <div class="author-info columns">
        <h2 class="author-title">About {{userListing.userInfo.name}}</h2>
        <p>{{userListing.userInfo.description}}</p>
    </div>
</div>
<!-- author box ends -->

<h2>Posts by {{userListing.userInfo.name}}</h2>

<post-listing post-args="{author: userListing.userId}"></post-listing>

Im obigen Code greifen wir auf die Variable userInfo zu, die im Bereich des Controllers definiert ist und das Benutzerinformationsobjekt enthält. Durch die Verwendung verschiedener Eigenschaften dieses Benutzerobjekts ersetzen wir den fest codierten Benutzernamen, den Benutzergravatar und die Benutzerbeschreibung.

Zum Auflisten der vom Benutzer verfassten Beiträge verwenden wir die postListing-Direktive und übergeben ihr die Benutzer-ID als Wert des author-Parameters. Die Direktive ruft dann Beiträge über den Dienst Posts ab.

So sollte die fertige Ansicht aussehen:

Der vierte und letzte Controller, an dem jetzt gearbeitet werden muss, ist für die einzelne Post-Listing-Ansicht, und das tun wir im folgenden Abschnitt.

Erstellen eines Controllers für die Einzelpostansicht

Die Ansicht für den einzelnen Beitrag unterscheidet sich geringfügig von den anderen, da die postListing-Direktive nicht verwendet wird, da die Direktive eine Vorlage verwendet, die für die Postlistenseite besser geeignet ist. Darüber hinaus werden wir in Zukunft Unterstützung hinzufügen, um Kommentare für einen einzelnen Beitrag anzuzeigen. Daher benötigen wir eine separate Vorlage für einen einzelnen Beitrag, anstatt dieselbe Vorlage wie für die Auflistung der Beiträge zu verwenden.

Aus den oben genannten Gründen verwenden wir den Dienst Posts manuell in der Steuerung für einen einzelnen Post, um den Post basierend auf seinem Slug abzurufen.

Nehmen Sie zunächst eine schnelle Änderung an der Route für einzelne Posts vor, um den Controller und die Vorlage zu verknüpfen:

// single post route
.when( '/posts/:slug', {
    templateUrl: 'views/single.html',
    controller: 'SinglePost',
    controllerAs: 'singlePost'
} )

Der Name des Controllers für einen einzelnen Beitrag lautet also SinglePost. Wir werden das Schlüsselwort singlePost verwenden, um in seiner Vorlage darauf zu verweisen.

Unten ist der Code für die Controller-Deklaration:

/**
 * Controller for Single Post
 */
quiescentApp.controller( 'SinglePost', ['$routeParams', 'Posts', function( $routeParams, Posts ) {
    var self = this;
    self.postSlug = $routeParams.slug;
    self.post = {};
    
    Posts.query( {'slug': self.postSlug}, function( data, headers ) {
        self.post = data[0];
    });
}] );

Im obigen Code rufen wir zuerst den Post-Slug mit dem Dienst $routeParams ab und speichern ihn in der Eigenschaft self.postSlug im Bereich des Controllers. Anschließend fragen wir die Datenbank mithilfe des Posts-Dienstes ab, indem wir den Post-Slug als Abfrageargument bereitstellen. Die zurückgegebenen Daten sind ein Array, das ein einzelnes Objekt enthält. Mit diesen zurückgegebenen Daten legen wir die Eigenschaft self.post für den Bereich fest. Einfach!

Im Folgenden finden Sie für die Vorlage den Inhalt der Datei views/single.html:

<!-- post listing starts -->
<article class="post-entry">
    <h2 class="post-title"><a ng-href="#/posts/{{singlePost.post.slug}}">{{singlePost.post.title.rendered}}</a></h2>
    <figure class="post-thumbnail" ng-show="singlePost.post.quiescent_featured_image">
        <img ng-src="{{singlePost.post.quiescent_featured_image}}" alt="Featured Image">
    </figure>
    <p class="post-meta">
        By <a ng-href="#/users/{{singlePost.post.author}}">{{singlePost.post.quiescent_author_name}}</a> 
        in <a ng-href="#/categories/{{category.term_id}}" ng-repeat="category in singlePost.post.quiescent_categories">{{category.name}}{{$last ? '' : ',&nbsp;'}}</a>
    </p>
    <div class="post-content" ng-bind-html="singlePost.post.content.rendered"></div>
    <p class="back-to-listing">
        <button class="button" onclick="window.history.back()">Back to posts listing</button>
    </p>
</article>
<!-- post listing ends -->

Der obige Code ist ziemlich einfach, da wir verschiedene Eigenschaften des Post-Objekts an verschiedene Elemente binden, so wie wir es in den letzten Abschnitten getan haben.

Unten sehen Sie einen Screenshot der fertigen Einzelbeitragsansicht:

Die Anwendung ist jetzt vollständig (noch nicht ganz!) Und bietet Ansichten für die Beitragsliste, einzelne Beitrags-, Benutzer- und Kategorieseiten.

Abschluss

Hier schließen wir unsere vierteilige Serie ab, in der wir ein Front-End erstellt haben, das auf der WP REST API und AngularJS basiert. Wir haben zunächst die Anforderungen analysiert und die Drahtgitter überprüft. Dann haben wir ein Companion-Plugin erstellt, das einige zusätzliche Felder in Standardantworten enthält, die in unserem Front-End benötigt werden.

In den folgenden Abschnitten haben wir unsere AngularJS-Anwendung gebootet, Vorlagen für verschiedene Ansichten zerlegt und das Anwendungsrouting konfiguriert. Wir haben auch eine benutzerdefinierte AngularJS-Direktive für die Funktion zum Auflisten von Posts erstellt, die die Funktionen zum Auflisten von Posts abstrahiert und uns eine flexible Möglichkeit bietet, eine Reihe von Posts für verschiedene Anforderungen abzurufen.

Im letzten Teil der Serie haben wir Controller für Post-Listing-, Single-Post-, Kategorie- und Benutzeransichten erstellt und diese über den Abschnitt .config() unserer Anwendung mit ihren jeweiligen Vorlagen verknüpft.

Die Anwendung ist nicht vollständig und kann auf viele Arten verbessert werden. Einige Ideen sind unten aufgeführt:

Kommentarthread zur Einzelbeitragsansicht
Keine Nachricht nach Autorennachricht, wenn der Benutzer auf der Autorenprofilseite keinen Beitrag veröffentlicht
nummerierte Paginierung auf Seiten mit Post-Listings
Bessere Suchmaschinenoptimierung mit AngularJS Single Page Applications

Wir werden versuchen, in zukünftigen Tutorials auf diesen Funktionen aufzubauen. Aber im Moment überlasse ich es Ihnen, mit der Anwendung herumzuspielen und sie mit einigen fantastischen Funktionen zu erweitern. Stellen Sie sicher, dass Sie in den Kommentaren eine Online-Demo für die Anwendung bereitstellen, da ich unbedingt von meinen Lesern lernen möchte.