Im vorherigen Teil der Serie haben wir eine benutzerdefinierte Direktive für das Auflisten von Beiträgen im Frontend erstellt. Diese Anweisung nimmt Argumente direkt im HTML-Attribut sowie in der URL zum Abrufen von Beiträgen vom Server an. Das Erstellen der Direktive hat es uns ermöglicht, die Post-Listing-Funktion an beliebiger Stelle in unserer Anwendung anzuzeigen, indem die Geschäftslogik und die von der Direktive bereitgestellte Rendering-Logik wiederverwendet werden.
In diesem abschließenden Teil der Serie werden wir an dem verbleibenden Teil unserer Anwendung arbeiten und Controller für Post-Listing, Single-Post, Autor und die Kategorieseite erstellen. Wir werden auch an den Vorlagen dieser Controller arbeiten und darauf die von den Controllern bereitgestellten Daten anzeigen.
Um genau zu sein, werden wir im aktuellen Teil der Serie:
stellen wir uns den AngularJS-Steuerungen vor
Controller für Beiträge, Kategorien und Benutzer erstellen
verknüpfen Sie Vorlagen mit den vom Controller bereitgestellten Daten
Beginnen wir damit, uns AngularJS-Controllern vorzustellen.
Vorstellung der AngularJS-Controller
Controller in AngularJS sind einer der Hauptbausteine der Anwendung. Sie enthalten Geschäftslogik, die entscheidet, welche Daten dem Benutzer angezeigt werden sollen. Sie steuern einen Großteil der UI-Funktionen der Anwendung und bieten auch Unterstützung für die Benutzerinteraktion.
Controller sind eng mit DOM verbunden und verkleben das Anwendungsmodell, in dem sich die Daten befinden, mit der Anwendungsansicht.
In unserem Fall, in dem wir eine Anwendung erstellen, die auf der WP REST-API basiert, zeigen wir auf den Controllern dem Endbenutzer die über die API abgerufenen Daten und verschiedene Dienste an.
Controller für die Post-Listing-Ansicht erstellen
Controller in AngularJS werden im Modul definiert, und wir verwenden dieselbe Notation für den sicheren Stil der Abhängigkeitseinspritzung wie bei der Deklaration der benutzerdefinierten Direktive. Betrachten Sie den folgenden Code, in dem wir einen Controller für die Seite mit den Postlisten deklarieren:
/ ** * Controller für Post Listing * / quiescentApp.controller ('PostListing', [function () var self = this;]);
Controller werden in einem Modul mit Hilfe von definiert .Regler() Methode, die im Modul verfügbar ist. Der Name des Controllers, den wir oben definiert haben, lautet PostListing.
Alle Daten, die wir der Außenwelt zugänglich machen müssen, sollten auf der diese Schlüsselwort in der Controller-Konstruktorfunktion. Daher lagern wir die diese Stichwort durch Erstellen eines selbst Variable.
Der Controller für die Nachauflistung ist der einfachste aller Controller, den wir machen werden, in dem Sinne, dass er keine Daten benötigt. Es muss nur eine Vorlage verlinkt sein, und wir werden die Direktive in dieser Vorlage, um Beiträge aufzulisten. Die Direktive holt selbstständig Beiträge mit der Beiträge Dienst und liste sie mit einer eigenen Rendering-Logik auf.
Als ersten Schritt werden wir das verknüpfen Ansichten / Listing.html Vorlage zum PostListing Controller, und wir tun dies in der .config () Abschnitt unserer Anwendung. Das .config () In diesem Abschnitt haben wir die Routen für die Anwendung konfiguriert, und wir müssen das ändern / wp / v2 / Beiträge Route zu folgendem:
Im obigen Code haben wir zwei zusätzliche Eigenschaften in die Routendefinition eingefügt, und diese Eigenschaften sind:
Regler: Der Name des Controllers, den wir mit dieser Route und ihrer Vorlage verknüpfen müssen.
ControllerAs: Das Schlüsselwort, mit dem wir uns in unserer Vorlage auf den Controller beziehen.
Also haben wir bestanden PostListing als Controller-Name, und wir beziehen uns in der Vorlage darauf postListing Stichwort.
Nachdem wir den Controller mit der Route und der Vorlage verknüpft haben, müssen wir die Vorlage jetzt ändern, um die Beiträge ordnungsgemäß aufzulisten. Also öffne die Ansichten / Listing.html Vorlagendatei und ersetzen Sie den Inhalt durch folgenden Code:
Unten sehen Sie einen Screenshot der fertigen Vorlage:
Und das ist es! Die obige Codezeile zeigt die Leistungsfähigkeit der AngularJS-Direktiven. Mit nur einer Codezeile konnten wir die Funktionalität für das Post-Listing nachahmen, die sowohl Geschäftslogik als auch Rendering-Logik beinhaltet. In den folgenden Abschnitten werden wir außerdem sehen, wie flexibel diese AngularJS-Direktive beim Erstellen von Controllern für die Kategorien- und Benutzerlistenansichten ist.
Controller für die Kategorieansicht erstellen
Nachdem wir uns mit der Controller-Deklarationssyntax vertraut gemacht haben und einen sehr einfachen Controller für das Post-Listing erstellt haben, können wir mit der Arbeit an einem fortgeschritteneren Controller für die Kategorieansicht beginnen.
Der Kategorieansicht-Controller, den wir erstellen, verwendet die $ routeParam Um auf die Kategorie-ID in der URL zuzugreifen, verwendet der Controller die Kategorien Dienst zum Abrufen von Kategorieninformationen und einer Liste der zugehörigen Beiträge. Der Controller holt die Beiträge jedoch nicht direkt mit Beiträge Dienst, aber es wird eher die postListing Direktive und übergeben Sie die Kategorie-ID, um eine Liste der mit dieser Kategorie verknüpften Beiträge abzurufen.
Unten ist der Code für die CategoryListing Regler:
Das CategoryListing Controller oben hat zwei Abhängigkeiten für die $ routeParams Service und die Kategorien Kundenspezifische Leistungen. Verwendung der $ routeParams Bei diesem Dienst ruft er die ID der Kategorie von der URL ab und fragt dann mithilfe der ID nach der Kategorieinformation über Kategorien Bedienung.
Der Controller verfügt über eine definierte Variable $ scope Objekt benannt categoryInfo. Diese Variable enthält das vom Server zurückgegebene Category-Objekt. Der Wert wird nach erfolgreicher Abfrage festgelegt.
Als nächstes müssen wir eine Vorlage mit diesem Controller verknüpfen, die dem Benutzer die Daten anzeigt. Und das machen wir im .Konfig Abschnitt der Anwendung, so wie wir es für die PostListing Controller im vorherigen Abschnitt.
So ändern Sie die / categories /: id Route mit folgendem Code:
Im obigen Code verknüpfen wir die Route mit der CategoryListing Controller und definieren auch die categoryListing Schlüsselwort, durch das wir in der Vorlage darauf verweisen.
Es ist jetzt Zeit, das zu ändern Ansichten / category.html Vorlage, so dass Daten dynamisch angezeigt werden, anstatt statischen HTML-Code anzuzeigen.
Kategorie: categoryListing.categoryInfo.name
Im obigen Code haben wir den hartcodierten Kategorienamen durch ersetzt categoryListing.categoryInfo.name, woher categoryListing ist ein Beispiel für die CategoryListing Regler. Das categoryInfo Variable enthält das vom Server zurückgegebene Category-Objekt, und dieses Objekt enthält das Name Eigenschaft für den Namen der Kategorie.
Für die Post-Listing-Funktion verwenden wir die postListing Direktive und übergeben Sie die Kategorie-ID durch die post-args Attribut. Zu diesem Zweck verwenden wir die Filter[] Syntax unterstützt von / wp / v2 / Beiträge Route der WP-REST-API. Wir kennen uns schon aus Filter[] Syntax aus dem vierten Teil der Einführungsreihe zur WP REST-API.
Unten ist ein Screenshot der abgeschlossenen Kategorieansicht:
Lassen Sie uns nun den Controller für Benutzer ausarbeiten, der dem Kategoriencontroller sehr ähnlich ist.
Controller für die Benutzeransicht erstellen
Der Controller für die Benutzersicht ist dem von Kategorien sehr ähnlich. Wir beginnen mit der Änderung der Routing-Konfiguration, um den Controller mit der Vorlage zu verknüpfen:
Hier verlinken wir die UserListing Controller mit der Route und seiner Vorlage. Das Schlüsselwort, mit dem wir uns auf die Controller-Instanz beziehen, lautet userListing.
Nachfolgend ist der Code für die UserListing Regler:
Das UserListing Controller nimmt $ routeParams und Benutzer Dienste als Abhängigkeiten. Verwendung der $ routeParams Dieser Dienst greift auf die Benutzer-ID in der URL zu. Das Benutzer Der Dienst wird dann verwendet, um das Benutzerobjekt unter Verwendung der Benutzer-ID abzurufen. Das Benutzerinformation Variable enthält das vom Server zurückgegebene Benutzerobjekt.
Lassen Sie uns jetzt das ändern Ansichten / Autor.html Vorlage zum Rendern dieser Daten an den Benutzer. Ersetzen Sie den gesamten Inhalt des author.html Datei mit folgendem Inhalt:
Über userListing.userInfo.name
userListing.userInfo.description
Beiträge von userListing.userInfo.name
Im obigen Code greifen wir auf die Benutzerinformation Variable, die im Bereich des Controllers definiert ist, der das Benutzerinformationsobjekt enthält. Wir verwenden verschiedene Eigenschaften dieses Benutzerobjekts und ersetzen den hartcodierten Benutzernamen, den Benutzer gravatar und die Beschreibung des Benutzers.
Für die Auflistung der vom Benutzer verfassten Beiträge verwenden wir die postListing Direktive und übergeben Sie die Benutzer-ID als Wert der Autor Parameter. Die Direktive holt dann Beiträge mit der Beiträge Bedienung.
So sollte die vollständige Ansicht aussehen:
Der vierte und letzte Controller, an dem jetzt gearbeitet werden muss, bezieht sich auf die Ansicht der einzelnen Post-Listen. Dies tun wir im folgenden Abschnitt.
Controller für die Single Post View erstellen
Die Ansicht für den einzelnen Beitrag unterscheidet sich geringfügig von den anderen, da er das Format nicht verwendet postListing Direktive, weil die Direktive eine Vorlage verwendet, die für die Seite mit den Post-Listen besser geeignet ist. Darüber hinaus werden wir in Zukunft Unterstützung für die Anzeige von Kommentaren für einen einzelnen Beitrag hinzufügen. Daher benötigen wir eine separate Vorlage für einen einzelnen Beitrag, anstatt dieselbe Vorlage wie für das Auflisten von Beiträgen zu verwenden.
Aus den oben genannten Gründen verwenden wir die Beiträge Dienst manuell in der Steuerung für einen einzelnen Beitrag, um den Beitrag basierend auf seinem Slug abzurufen.
Nehmen wir zunächst eine kurze Änderung in der Single-Post-Route vor, um den Controller und die Vorlage zu verknüpfen:
// single post route .when ('/ posts /: slug', templateUrl: 'views / single.html', controller: 'singlePost', controllerAs: 'singlePost')
Der Name des Controllers für einen einzelnen Beitrag lautet also SinglePost. Wir werden die verwenden singlePost Schlüsselwort, um darauf in seiner Vorlage zu verweisen.
Unten ist der Code für die Controller-Deklaration:
Im obigen Code rufen wir zuerst den Post-Slug mit der $ routeParams Service und speichern Sie es in der self.postSlug Eigenschaft im Bereich des Controllers. Dann fragen wir die Datenbank mit dem Beiträge Dienst, indem Sie den Post-Slug als Abfrageargument bereitstellen. Die zurückgegebenen Daten sind ein Array, das ein einzelnes Objekt enthält, und wir setzen das Selbstpost Eigenschaft für den Bereich, der diese zurückgegebenen Daten verwendet. Einfach!
Nun für die Vorlage unten ist der Inhalt der Ansichten / single.html Datei:
singlePost.post.title.rendered
Durch singlePost.post.quiescent_author_name in category.name $ last? ": ','
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 fertiggestellten Einzelpostansicht:
Die Anwendung ist jetzt vollständig (noch nicht ganz!) Und bietet Ansichten für die Post-Listing-, Einzelpost-, Benutzer- und Kategorieseiten.
Fazit
Hier schließen wir unsere vierteilige Serie ab, in der wir ein Frontend mit WP REST API und AngularJS gebaut haben. Wir begannen mit der Analyse der Anforderungen und der Überprüfung der Wireframes. Dann haben wir ein Companion-Plugin entwickelt, das einige zusätzliche Felder in Standardantworten enthält, die in unserem Frontend benötigt werden.
In den folgenden Abschnitten haben wir unsere AngularJS-Anwendung gebootet, Vorlagen für verschiedene Ansichten zerlegt und Anwendungsrouting konfiguriert. Wir haben auch eine benutzerdefinierte AngularJS-Direktive für die Post-Listing-Funktion entwickelt, die die Funktionalität für das Auflisten von Posts wegfiltert und eine flexible Möglichkeit bietet, einen Satz von Posts für verschiedene Anforderungen abzurufen.
Im letzten Teil der Serie haben wir Controller für die Nachlistung, Einzelpostings, Kategorien und Benutzeransichten erstellt und diese über die mit ihren jeweiligen Vorlagen verknüpft .config () Abschnitt unserer Anwendung.
Die Anwendung ist nicht vollständig und kann in vielerlei Hinsicht verbessert werden. Einige Ideen sind unten aufgeführt:
Kommentierthread in der Ansicht für einzelne Posts
Keine Beiträge vom Autor Nachricht, wenn der Benutzer keinen Beitrag auf der Profilseite des Autors enthält
Nummerierte Paginierung auf Seiten mit Postauflistung
besseres SEO mit AngularJS Single Page Applications
In zukünftigen Tutorials werden wir versuchen, auf diesen Funktionen aufzubauen. Im Moment überlasse ich es Ihnen, mit der Anwendung herumzuspielen und sie um einige großartige Funktionen zu erweitern. Stellen Sie sicher, dass Sie eine Online-Demo für die Anwendung in den Kommentaren bereitstellen, da ich gerne von meinen Lesern lernen möchte.
Accentsconagua
Share
