Im vorherigen Teil der Serie haben wir unsere AngularJS-Anwendung gebootet, das Routing für verschiedene Ansichten konfiguriert und Dienste für Routen für Posts, Benutzer und Kategorien erstellt. Mithilfe dieser Dienste können wir nun endlich Daten vom Server abrufen, um das Front-End zu betreiben.
In diesem Teil der Serie arbeiten wir an der Erstellung einer benutzerdefinierten AngularJS-Direktive für das Post-Listing-Feature. Im aktuellen Teil der Serie werden wir:
Stellen Sie uns die Richtlinien von AngularJS vor und warum sollten wir eine erstellen
Planen Sie die Direktive für das Post-Listing-Feature und die dafür erforderlichen Argumente
Erstellen Sie eine benutzerdefinierte AngularJS-Direktive für die Post-Auflistung zusammen mit ihrer Vorlage
Beginnen wir damit, uns mit den Richtlinien von AngularJS vertraut zu machen und warum wir sie brauchen.
Einführung der AngularJS-Richtlinien
Anweisungen in AngularJS sind eine Möglichkeit, das Verhalten von HTML-Elementen zu ändern und einen wiederholbaren Codeblock wiederzuverwenden. Sie können verwendet werden, um die Struktur eines HTML-Elements und seiner untergeordneten Elemente zu ändern. Sie eignen sich daher hervorragend, um benutzerdefinierte UI-Widgets einzuführen.
Bei der Analyse von Wireframes im ersten Teil der Serie haben wir festgestellt, dass das Post-Listing-Feature in drei Ansichten verwendet wird, nämlich:
Eintrag veröffentlichen
Profil des Autors
Auflistung der Kategorie-Beiträge
Anstatt separate Funktionen zum Auflisten von Beiträgen auf allen diesen drei Seiten zu schreiben, können Sie eine benutzerdefinierte AngularJS-Direktive erstellen, die Geschäftslogik zum Abrufen von Beiträgen enthält, die die Dienste verwenden, die wir im vorherigen Teil dieser Serie erstellt haben. Neben der Geschäftslogik enthält diese Direktive auch die Rendering-Logik zum Auflisten von Beiträgen zu bestimmten Ansichten. In dieser Direktive wird auch die Funktionalität für das Post-Paginieren und das Abrufen von Posts für bestimmte Kriterien definiert.
Durch das Erstellen einer benutzerdefinierten AngularJS-Direktive für die Post-Listing-Funktion können wir die Funktionalität nur an einer Stelle definieren. Dies macht es uns in Zukunft einfacher, diese Funktionalität zu erweitern oder zu ändern, ohne den Code in allen drei Fällen ändern zu müssen wo es benutzt wird.
Beginnen wir mit der Codierung unserer benutzerdefinierten Direktive für die Post-Listing-Funktion.
Planung der benutzerdefinierten AngularJS-Richtlinie für die Kotierung von Einträgen
Bevor wir mit dem Schreiben von Code zum Erstellen der Direktive für die Post-Listing-Funktion beginnen, analysieren wir die in der Direktive benötigte Funktionalität.
Im Grunde benötigen wir eine Direktive, die wir in unseren Ansichten für das Post-Listing, das Autorenprofil und die Kategorieseite verwenden können. Dies bedeutet, dass wir ein benutzerdefiniertes UI-Widget (oder eine DOM-Markierung) erstellen, das wir in unseren HTML-Code einfügen. AngularJS kümmert sich um den Rest, je nachdem, welche Optionen wir für diese bestimmte Instanz der Anweisung anbieten.
Daher erstellen wir ein benutzerdefiniertes UI-Widget, das durch das folgende Tag gekennzeichnet wird:
Wir brauchen aber auch, dass diese Direktive flexibel ist, d. H. Um Argumente als Input zu nehmen und entsprechend zu handeln. Betrachten Sie die Benutzerprofilseite, auf der nur Beiträge angezeigt werden sollen, die zu diesem bestimmten Benutzer gehören, oder die Kategorieseite, auf der die zu dieser Kategorie gehörenden Beiträge aufgelistet werden. Diese Argumente können auf zwei Arten bereitgestellt werden:
In der URL als Parameter
Direkt an die Direktive als Attributwert
Die Angabe von Argumenten in der URL scheint in der API enthalten zu sein, da wir damit bereits vertraut sind. Daher kann ein Benutzer einen Satz von Beiträgen abrufen, die zu einem bestimmten Benutzer gehören, auf folgende Weise:
http://127.0.0.1:8080/#/posts?author=1
Die obige Funktionalität kann durch Verwendung von erreicht werden $ routeParams Service von AngularJS. Hier können wir auf Parameter zugreifen, die vom Benutzer in der URL angegeben werden. Wir haben uns bereits während der Registrierung von Routen im vorherigen Teil der Serie mit dem Thema befasst.
Wenn Sie der Direktive Argumente als Attributwert bereitstellen möchten, können Sie etwa Folgendes verwenden:
Das post-args Das Attribut im obigen Snippet nimmt Argumente für das Abrufen einer bestimmten Gruppe von Beiträgen an, und derzeit wird die Autoren-ID verwendet. Dieses Attribut kann eine beliebige Anzahl von Argumenten zum Abrufen von Beiträgen enthalten, die vom unterstützt werden / wp / v2 / Beiträge Route. Wenn wir also einen Satz von Beiträgen abrufen, die von einem Benutzer verfasst wurden, der eine ID von 1 hat und zu einer Kategorie von ID 10 gehört, könnten wir etwa Folgendes tun:
Das filter [katze] Parameter im obigen Code wird verwendet, um einen Satz von Beiträgen abzurufen, die zu einer bestimmten Kategorie gehören.
Paginierung ist auch ein wesentliches Merkmal bei der Arbeit mit Post-Listing-Seiten. Die Direktive behandelt die Nach-Paginierung, und diese Funktion wird von den Werten von gesteuert X-WP-Gesamt und X-WP-TotalPages Header, die vom Server zusammen mit dem Antworttext zurückgegeben werden. Daher kann der Benutzer zwischen den vorherigen und nächsten Postsätzen hin und her navigieren.
Nachdem wir die grundlegende Richtlinie der benutzerdefinierten Direktive für das Post-Listing festgelegt haben, haben wir jetzt eine ziemlich solide Grundlage, um mit dem Schreiben des Codes zu beginnen.
Erstellen einer benutzerdefinierten Richtlinie für die Post-Listing
Das Erstellen einer Direktive für die Post-Listing-Funktion umfasst zwei Schritte:
Erstellen Sie die Geschäftslogik für das Abrufen von Posts und die Verarbeitung anderer Elemente.
Erstellen Sie eine Rendering-Ansicht für diese Beiträge, um auf der Seite angezeigt zu werden.
Die Geschäftslogik für unsere benutzerdefinierte Richtlinie wird in der Anweisungserklärung behandelt. Für das Rendern von Daten im DOM erstellen wir eine benutzerdefinierte Vorlage zum Auflisten von Beiträgen. Beginnen wir mit der Weisungserklärung.
Richtlinie Erklärung
Anweisungen in AngularJS können für ein Modul mit der folgenden Syntax deklariert werden:
/ ** * Erstellen einer benutzerdefinierten Direktive für das Auflisten von Beiträgen * / quiescentApp.directive ('postListing', [function () return ;]);
Hier deklarieren wir eine Richtlinie über unser Modul .Direktive () Methode, die im Modul verfügbar ist. Die Methode nimmt den Namen der Direktive als erstes Argument an, und dieser Name ist eng mit dem Namen des Tags des Elements verknüpft. Da wollen wir unser HTML-Element sein , Wir bieten eine Kamel-Case-Darstellung des Tagnamens. Weitere Informationen zu diesem von AngularJS durchgeführten Normalisierungsprozess zum Abgleichen von Richtliniennamen finden Sie in der offiziellen Dokumentation.
Die Notation, die wir im obigen Code zur Deklaration unserer Direktive verwenden, wird aufgerufen sichere Abhängigkeit der Abhängigkeitsinjektion. In dieser Notation stellen wir als zweites Argument eine Reihe von Abhängigkeiten bereit, die von der Direktive benötigt werden. Derzeit haben wir keine Abhängigkeiten für unsere benutzerdefinierte Direktive definiert. Aber da brauchen wir die Beiträge Dienst zum Abrufen von Beiträgen (die wir im vorherigen Teil der Serie erstellt haben) und den nativen AngularJS $ routeParams und $ location Dienste für den Zugriff auf URL-Parameter und den aktuellen Pfad definieren wir sie wie folgt:
Diese Abhängigkeiten werden dann der Funktion zur Verfügung gestellt, die als letztes Element des Arrays definiert ist. Diese Funktion gibt ein Objekt mit Direktive-Definition zurück. Derzeit haben wir zwei Eigenschaften im Direktive-Definitionsobjekt, d. H. beschränken und Verknüpfung.
Das beschränken Option definiert die Verwendung der Direktive in unserem Code. Es gibt vier mögliche Werte für diese Option:
EIN: Für die Verwendung der Direktive als Attribut für ein vorhandenes HTML-Element.
E: Für die Verwendung der Direktive als Elementname.
C: Für die Verwendung der Direktive als Klassenname.
M: Für die Verwendung der Direktive als HTML-Kommentar.
Das beschränken Die Option kann auch eine beliebige Kombination der obigen vier Werte akzeptieren.
Da wir wollen, dass unsere Richtlinie ein neues Element ist , Wir setzen die Einschränkungsoption auf E. Wenn wir die Direktive mit den Attributen eines bereits vorhandenen HTML-Elements definieren, hätten wir diese Option auf setzen können EIN. In diesem Fall könnten wir verwenden um die Direktive in unserem HTML-Code zu definieren.
Der Zweite Umfang Diese Eigenschaft wird verwendet, um den Geltungsbereich der Direktive zu ändern. Standardmäßig ist der Wert von Umfang Eigentum ist falsch, Das bedeutet, dass der Geltungsbereich der Richtlinie derselbe ist wie der ihrer Eltern. Wenn wir ein Objekt übergeben, wird ein isolierter Bereich für die Direktive erstellt, und alle Daten, die von der übergeordneten Komponente an die Direktive übergeben werden müssen, werden durch HTML-Attribute übergeben. Dies ist, was wir in unserem Code tun und das Attribut, das wir verwenden, ist post-args, die normalisiert sich in postArgs.
Das postArgs Eigentum in der Umfang Das Objekt kann drei Werte annehmen:
=: Bedeutet, dass der an das Attribut übergebene Wert als Objekt behandelt wird.
@: Das bedeutet, dass der in das Attribut übergebene Wert als eine einfache Zeichenfolge behandelt wird.
&: Das bedeutet, dass der in das Attribut übergebene Wert als Funktion behandelt wird.
Da haben wir uns entschieden, die = value, jeder Wert, der in den übergeben wird post-args Das Attribut wird als JSON-Objekt behandelt, und wir könnten dieses Objekt als Argument für das Abrufen von Beiträgen verwenden.
Die dritte Eigenschaft, Verknüpfung, wird verwendet, um eine Funktion zu definieren, mit der das DOM bearbeitet und die für die Anweisung erforderlichen APIs und Funktionen definiert werden. In dieser Funktion wird die gesamte Logik der Direktive behandelt.
Das Verknüpfung Die Funktion akzeptiert Argumente für das Bereichsobjekt, das HTML-Element der Direktive und ein Objekt für Attribute, die im HTML-Element der Direktive definiert sind. Derzeit übergeben wir zwei Argumente $ scope und $ elem für das Bereichsobjekt bzw. das HTML-Element.
Definieren wir eine Variable in der $ scope Eigenschaft, die wir zum Rendern der Post-Listing-Funktion im DOM verwenden werden.
Daher haben wir sechs Eigenschaften auf der definiert $ scope Objekt, auf das wir im DOM zugreifen können. Diese Eigenschaften sind:
$ Beiträge: Ein Array zum Speichern von Post-Objekten, das vom Server zurückgegeben wird.
$ postHeaders: Ein Objekt zum Speichern der Header, die vom Server zusammen mit dem Antworttext zurückgegeben werden. Wir werden diese für die Navigation verwenden.
$ currentPage: Eine Ganzzahlvariable, die die aktuelle Seitennummer enthält.
$ previousPage: Eine Variable, die die vorherige Seitennummer enthält.
$ nextPage: Eine Variable, die die nächste Seitennummer enthält.
$ routeContext: Für den Zugriff auf den aktuellen Pfad mit $ location Bedienung.
Das postArgs Eine Eigenschaft, die wir zuvor für HTML-Attribute definiert haben, ist bereits auf der Website verfügbar $ scope Objekt innerhalb der Direktive.
Nun können wir mit dem Server eine Anfrage an den Server senden Beiträge Dienst zum Abrufen von Beiträgen. Zuvor müssen wir jedoch die Argumente berücksichtigen, die der Benutzer als URL-Parameter angegeben hat, sowie die im post-args Attribut. Zu diesem Zweck erstellen wir eine Funktion, die die $ routeParams Dienst, um URL-Parameter zu extrahieren und mit den Argumenten zusammenzuführen, die durch post-args Attribut:
Das prepareQueryArgs () Methode im obigen Code verwendet die angle.merge () Methode, die das erweitert $ scope.postArgs Objekt mit der $ routeParams Objekt. Bevor diese beiden Objekte jedoch zusammengeführt werden, wird zuerst das gelöscht Ich würde Eigentum aus dem $ routeParams Objekt mit der löschen Operator. Dies ist notwendig, da wir diese Direktive für Kategorie- und Benutzeransichten verwenden werden und die Kategorie und Benutzer-IDs nicht als Beitrags-ID falsch interpretiert werden sollen.
Nachdem wir Abfrageargumente vorbereitet haben, sind wir endlich bereit, den Server anzurufen und Beiträge abzurufen, und zwar mit dem Posts.query () Methode, die zwei Argumente benötigt:
Ein Objekt, das Argumente für die Abfrage enthält.
Eine Rückruffunktion, die ausgeführt wird, nachdem die Abfrage abgeschlossen wurde.
Also benutzen wir die prepareQueryArgs () Funktion zum Vorbereiten eines Objekts für Abfrageargumente, und in der Rückruffunktion setzen wir die Werte bestimmter Variablen in der $ scope Eigentum:
Die Rückruffunktion erhält zwei Argumente für den Antworttext und die Antwortheader. Diese werden durch die dargestellt Daten und Überschriften Argumente.
Das Überschriften Argument ist eine Funktion, die ein Objekt zurückgibt, das Antwortheader vom Server enthält.
Der verbleibende Code ist ziemlich selbsterklärend, da wir den Wert von festlegen $ scope.posts Array. Zur Einstellung der Werte von $ scope.previousPage und $ scope.nextPage Variablen verwenden wir die x-wp-totalpages Eigentum in der postHeaders Objekt.
Jetzt können wir diese Daten mit einer benutzerdefinierten Vorlage für unsere Direktive auf dem Frontend darstellen.
Erstellen einer benutzerdefinierten Vorlage für die Richtlinie
Das Letzte, was wir tun müssen, damit unsere Direktive funktioniert, besteht darin, eine separate Vorlage für das Post-Listing zu erstellen und diese mit der Direktive zu verknüpfen. Zu diesem Zweck müssen wir die Anweisung der Richtlinie ändern und eine templateUrl Eigenschaft wie die folgende:
Diese templateUrl Die Eigenschaft im obigen Code bezieht sich auf eine Datei mit dem Namen Direktive-Post-Listing.html in dem Ansichten Verzeichnis. Erstellen Sie diese Datei also im Ansichten Ordner und fügen Sie im folgenden HTML-Code ein:
Gutes Design ähnelt klarem visuellem Denken.
Von Bilal Shahid in Zitaten
Tage her erschaffen. Herrschaft. Der sechste Fisch kriecht auch sehr. Erstes Fleisch eins oben. Sie füllen für. Kann nicht Abendlichter nicht. Tolles Firmament-Image. Leben sein Anfang gesegnet weniger Fleisch Geist gesegnete Meere erstellt grün großartiger Anfang kann Bewegung nicht aufheben. Der Abend macht den Geist weniger größer alle lebenden grünen Firmamentflügelsägeblätter eine Unterteilung, wobei geteiltes Trocknen sehr viel geringer sein wird, Erde. Licht ihr das.
Ältere Beiträge Neuere Beiträge
Dies ist ein sehr einfacher HTML-Code, der einen einzelnen Post-Eintrag und eine Nach-Paginierung darstellt. Ich habe es aus dem kopiert Ansichten / Listing.html Datei. Wir werden einige AngularJS-Direktiven verwenden, einschließlich Wiederholung, ng-href, ng-src, und ng-bind-html, um die Daten anzuzeigen, die sich aktuell in der $ scope Eigentum der Richtlinie.
Ändern Sie den HTML-Code wie folgt:
post.title.rendered
Durch post.quiescent_author_name in category.name $ last? ": ','
Der obige Code verwendet die Wiederholung Direktive durchlaufen $ scope.posts Array. Jede Eigenschaft, die im definiert ist $ scope Das Objekt in der Direktionsdeklaration ist direkt in der Vorlage verfügbar. Daher beziehen wir uns auf die $ scope.posts Array direkt als Beiträge in der Vorlage.
Mit der Wiederholung Richtlinie stellen wir sicher, dass die article.post-entry Container wird für jeden Beitrag in der Beiträge Array und jeder Beitrag wird als bezeichnet Post in der inneren Schleife. Diese Post Das Objekt enthält Daten im JSON-Format, die vom Server zurückgegeben werden. Es enthält Eigenschaften wie Beitragstitel, Beitrags-ID, Beitragsinhalt und den Link zu gekennzeichneten Bildern, ein zusätzliches Feld, das vom zugehörigen Plugin hinzugefügt wird.
Im nächsten Schritt ersetzen wir Werte wie den Beitragstitel, den Beitragslink und den Link zu den angezeigten Bildern durch die Eigenschaften in Post Objekt.
Ersetzen Sie für die Paginierung den vorherigen Code durch Folgendes:
Neuere Beiträge Ältere Beiträge
Wir greifen zuerst auf die routeContext Eigenschaft, die wir in unserer Weisungserklärung definiert haben, mit dem Suffix ?page = Parameter und verwenden Sie die Werte der Nächste Seite und vorherige Seite Variablen, um zwischen den Beiträgen hin und her zu navigieren. Wir prüfen auch, ob die nächste oder der vorherige Link nicht angezeigt wird Null, sonst fügen wir ein .deaktiviert klasse auf die Schaltfläche, die von der Zurb-Stiftung zur Verfügung gestellt wird.
Jetzt, da wir die Direktive fertiggestellt haben, ist es an der Zeit, sie zu testen. Und wir machen es, indem wir ein Tag in unserem HTML - Code, idealerweise direkt über dem Etikett. Dies bedeutet, dass ein Eintrag über der Fußzeile der Seite angezeigt wird. Machen Sie sich keine Gedanken über Formatierung und Formatvorlagen, da wir uns im nächsten Teil der Serie damit befassen werden.
Das ist also ziemlich viel für das Erstellen einer benutzerdefinierten AngularJS-Direktive für die Post-Listing-Funktion.
Was kommt als nächstes??
Im aktuellen Teil der Serie zum Erstellen eines Frontends mit der WP REST-API und AngularJS haben wir eine benutzerdefinierte AngularJS-Direktive für die Nachlistungsfunktion erstellt. Diese Direktive verwendet das Beiträge Service, den wir im vorherigen Teil der Serie geschaffen haben. Die Anweisung nimmt auch Benutzereingaben in Form eines HTML-Attributs und über URL-Parameter vor.
Im abschließenden Teil der Serie beginnen wir mit der Arbeit an dem letzten Teil unseres Projekts, d. H. Den Controllern für Beiträge, Benutzer und Kategorien sowie deren jeweiligen Vorlagen.
Accentsconagua
Share
