Share
Im vorigen Teil dieser Serie zum Erstellen eines WordPress-gestützten Frontends mit der WP REST-API und AngularJS haben wir die Projektanforderungen analysiert, Wireframes bewertet, das HTML-Paket heruntergeladen und kompiliert und das zugehörige Plugin für WordPress erstellt, das die Antworten für die Beiträge und Benutzer Ressourcen.
Nachdem wir ein solides Fundament für unser Projekt gelegt haben, können wir jetzt mit der Arbeit am Frontend beginnen und grundlegende Konfigurationen für unsere Anwendung mit AngularJS einrichten.
Im aktuellen Teil der Serie werden wir:
Beginnen wir mit der Initialisierung der AngularJS-App und dem Analysieren von Vorlagen für Ansichten einschließlich Post-Listing, einzelner Posts und Kategorien.
Das erste, was wir zum Erstellen unserer WP REST API-basierten Anwendung tun müssen, ist das Bootstrap mit der ng-app AngularJS-Direktive. Das ng-app Die Direktive wird verwendet, um die Anwendung automatisch zu booten. Sie verwendet den Namen des AngularJS-Moduls als optionalen Wert.
Bevor Sie jedoch mit dem Ändern von Dateien beginnen, stellen Sie sicher, dass Sie die Schluck Befehl durch Navigieren in die Ruhezustand-Rest-API-HTML Verzeichnis. Dadurch wird sichergestellt, dass alle Änderungen, die Sie in der Datenbank vornehmen / src Verzeichnis werden sofort ins kompiliert / dist Verzeichnis bei der schluck zu sehen Befehl. Außerdem möchte ich Sie dazu ermutigen, in die / dist Verzeichnis in einem anderen Konsolenfenster und führen Sie die http-Server Befehl, der den HTTP-Server Node.js für dieses Verzeichnis ausführt, und Sie können eine Vorschau Ihrer Site im Browser anzeigen, indem Sie einfach eine Webadresse eingeben 127.0.0.1:8080.
Das ng-app Direktive wird normalerweise im Wurzelelement platziert, d. h Etikett. Daher werden wir das ändern tag in der src / index.html Datei in das folgende:
Hier, RuhendeApp ist der Name unseres Hauptmoduls AngularJS, das wir als Nächstes in unserem Modul initialisieren werden src / js / app.js Datei.
Das src / js / app.js Die Datei enthält derzeit nur eine Codezeile zum Initialisieren der von der Zurb Foundation bereitgestellten JavaScript-Funktionalität. Wir können diese Datei ändern, um den folgenden Code für das Hauptmodul unserer AngularJS-Anwendung aufzunehmen:
Accentsconagua
(function () / ** * Moduldefinition für Quiescent App * / var quiescentApp = angle.module ('quiescentApp', ['ngSanitize', 'ngRoute', 'ngResource']);)));Die erste Sache in dem obigen Code ist die selbstaufrufende anonyme Funktion, die durch Folgendes dargestellt wird:
(Funktion () ) ();
Wie der Name schon sagt, ist die obige Funktion anonym, Das heißt, es hat keinen Namen und ruft sich sofort auf, indem es den gesamten Code in seinem Körper ausführt. Dies ist eine gute Möglichkeit, den Umfang unserer Variablen und Funktionen einzuschränken, so dass sie nicht für Manipulationen weltweit zugänglich sind.
In der anonymen Funktion initialisieren wir unser AngularJS-Modul mit dem angle.module () Methode. Das angle.module () Funktion 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. Folgendes tut jeder von ihnen:
ngRoute: Dieses Modul bietet Routing- und Deep-Linking-Dienste für unsere Anwendung. Es ist in der gefunden angle-route.js Datei im AngularJS-Paket, wie von der offiziellen Website heruntergeladen.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 Beiträgen, Kategorien und Benutzern zu interagieren.ngSanitize: Dieses Modul bietet Funktionen zur Bereinigung des HTML-Codes. Wir benötigen dieses Modul, wenn Sie HTML auf der Seite ausgeben. Beispiele sind der Posttitel, der Postinhalt 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 eingefügt werden müssen. Aber Sie müssen sich keine Sorgen machen, denn wir haben das bereits konfiguriert gulp.js Datei.
Nachdem Sie den obigen Code in Ihre eingegeben haben app.js Datei, gehen Sie zu der vom HTTP-Server Node.js angegebenen Adresse. Öffnen Sie auch die Entwickler-Tools in Ihrem Browser. Wenn Sie keine JavaScript-Fehler sehen, können Sie loslegen!
Nachdem wir unsere AngularJS-Anwendung erfolgreich initialisiert haben, können wir an dem Schablonenteil arbeiten und Vorlagen für verschiedene Ansichten zerlegen.
Da wir eine Single-Page-Anwendung (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 Post-Listing-Liste, des einzelnen Posts, des Autors und der Kategorie. Das HTML wurde so strukturiert, dass Kopf- und Fußzeile sowie der Hauptcontainer für alle diese Seiten gleich sind. Der Hauptcontainer in unserem Fall ist div.columns.medium-8 in der div.main.row Etikett. Mit AngularJS können wir verschiedene Vorlagen für verschiedene Routen in der Anwendung konfigurieren. Bevor wir jedoch das Routing konfigurieren, müssen wir diese Vorlagen von den vorhandenen HTML-Dateien trennen.
Anstatt vier verschiedene Seiten für die Indexseite, den einzelnen Beitrag, den Autor und die Kategorie zu verwenden, können wir eine Haupt-HTML-Seite verwenden, die abhängig von der aktuellen Route Vorlagen für unterschiedliche Ansichten lädt.
Beginnen wir mit der Analyse der Vorlage für die Ansicht der Post-Auflistung. Öffne die /src/index.html Datei im Code-Editor Ihrer Wahl und schneiden Sie den gesamten Code, der in der div.columns.medium-8 Container. Erstellen Sie eine neue Datei mit dem Namen Listing.html in der / src / views Verzeichnis und fügen Sie den Code in diese Datei.
Diese Vorlage dient als Ansicht für unsere Auflistungsseite. Wir können den Vorgang für jeden von uns wiederholen post-single.html, author.html, und category.html Dateien. Öffnen Sie jede dieser Dateien in Ihrem Code-Editor und schneiden Sie den Inhalt der Datei aus div.columns.medium-8 Container und fügen Sie sie in neue Dateien ein / src / views Verzeichnis. Die Namen der Vorlagendateien wären single.html, author.html, und category.html beziehungsweise.
Erstellen Sie eine neue Datei im / src / views Verzeichnis für die 404-Seite und benennen Sie es 404.html. Es muss nichts Besonderes enthalten, nur die folgende Codezeile:
404 - Nichts gefunden
Wir können das jetzt sicher entfernen /src/post-single.html, /src/author.html, und /src/category.html Dateien. Wir werden das bewahren /src/index.html Datei, die als Haupteinstiegspunkt für unsere Anwendung dient.
Das letzte, was wir jetzt tun müssen, ist, AngularJS den Ort mitzuteilen, wo diese Vorlagen geladen werden sollen. Und wir können dies durch Hinzufügen von ng-view Richtlinie in der div.columns.medium-8 Behälter im Inneren /src/index.html Datei:
Das ng-view Direktive teilt AngularJS mit, wohin die Inhalte der Vorlagendateien geladen werden sollen.
Wir können auch das hinzufügen Auto-Scroll = "true" Attribut auf die div.columns.medium-8 Wenn Sie also zwischen den Ansichten hin und her navigieren, führt der Browser uns zu dem Punkt, von dem aus wir gegangen sind.
Gehen Sie zurück zu Ihrem Browser und aktualisieren Sie ihn. Es sollte eine Seite angezeigt werden, die nur die Kopf- und Fußzeile enthält. Das liegt daran, dass wir noch kein Routing konfiguriert haben. Und das machen wir als nächstes.
Nachdem Sie Vorlagen für verschiedene Ansichten in unserer Anwendung erstellt haben, ist es an der Zeit, AngularJS mitzuteilen, wie und wann diese Vorlagen geladen werden. Zu diesem Zweck stellt AngularJS eine Anbieterkomponente bereit $ routeProvider. Das $ routeProvider liefert uns eine Methode namens .wann() Dies kann zum Konfigurieren von Routen mit ihren Vorlagen und einigen anderen Eigenschaften verwendet werden.
Betrachten Sie den folgenden Code:
/ ** * Routen für unsere App konfigurieren * / quiescentApp.config (['$ routeProvider', Funktion ($ route) // Postlisting route $ route.when ('/ posts', templateUrl: 'Ansichten / Listing. html ',) // single post route .when (' / posts /: slug ', templateUrl:' views / single.html ',) // Autorenprofil route .when (' / users /: id ', templateUrl: 'views / author.html',) // Kategorieprofil-Route .when ('/ categories /: id', templateUrl: 'views / category.html',) // 404-Route .andere ( templateUrl: 'views / 404.html');]);Hier konfigurieren wir unsere Anwendung mit der .config () Methode durch Injizieren $ routeProvider hinein. Die Funktion benötigt ein Argument-$ route-für die $ routeProvider, und dann verwenden wir es zur Konfiguration verschiedener Routen.
Das .wann() Die Methode konfiguriert eine neue Route und benötigt zwei Parameter für die $ path und das $ route beziehungsweise. Das $ path Argument ist eine Zeichenfolge, die den Pfad darstellt, für den die Route konfiguriert wird. Das $ route Argument 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 Post-Listing-, Single-Post-, Autor- und Kategorieansichten konfiguriert. Wir haben ihnen gerade ihre jeweiligen Vorlagen-URLs zugewiesen, und wir werden ihre Controller später in dieser Serie konfigurieren, wenn wir sie erstellen. Daher werden wir von diesem Punkt aus schrittweise auf diesem Code aufbauen.
Beachten Sie im obigen Code die benannten Gruppen, gefolgt von einem Doppelpunkt : für die einzelnen Beiträge, Autor und Kategorien Routen. Diese sind im gespeichert $ routeParams Dienst und wird jeder Richtlinie oder Steuerung zur Verfügung gestellt, die sie verwenden möchte. Wir werden uns das genauer ansehen, aber für jetzt betrachten wir sie einfach als Orte, an denen auf einen Post-Slug, eine Benutzer-ID oder eine Kategorie-ID, wie vom Benutzer in der URL angegeben, zugegriffen werden kann.
Abgesehen von den vier Routen haben wir die 404-Vorlage mithilfe von konfiguriert .Andernfalls() Methode. Diese Methode weist AngularJS an, den Benutzer auf eine bestimmte Vorlage umzuleiten, wenn keine der konfigurierten Routen übereinstimmt.
Weitere Informationen zum AngularJS-Routing-Service 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. Es sollte die richtige Vorlage angezeigt werden:
http://127.0.0.1:8080/#/posts http://127.0.0.1:8080/#/posts/10 http://127.0.0.1:8080/#/categories/10 http://127.0.0.1 : 8080 / # / Benutzer / 10
Die Adresse http://127.0.0.1:8080 kann in Ihrem Fall anders sein. Die ID / Slug, die wir hier (in diesem Fall 10) bereitstellen, spielt an dieser Stelle keine Rolle.
Das letzte, was wir jetzt tun müssen, ist das Erstellen von Diensten für Ressourcen wie Beiträge, Benutzer und Kategorien.
AngularJS liefert uns die ngResource Ein Modul, mit dem wir einen REST-fähigen Dienst für einen bestimmten Endpunkt für eine Ressource erstellen können. Bevor wir uns jedoch mit dem Schreiben von Code für die Erstellung von Services beschäftigen, erstellen wir einige Konfigurationsvariablen, die einige grundlegende Informationen speichern.
/ ** * Konfigurationsvariablen für die App * / var serverPath = 'http: // localhost / wordpress /', apiPath = 'wp-json / wp / v2 /', apiUrl = serverPath + apiPath;
Der Serverpfad kann in Ihrem Fall unterschiedlich sein, und ich empfehle Ihnen, ihn entsprechend zu ä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 gesetzt RuhendeApp Moduldeklaration.
Das Erstellen eines Dienstes um einen Endpunkt in AngularJS ist so einfach wie der folgende Code:
quiescentApp.factory ('Posts', ['$ resource', Funktion ($ resource) return $ resource ('http: // localhost / wordpress / wp-json / wp / v2 / posts');]);Der obige Code erstellt einen Dienst um die Beiträge Ressource in der WP-REST-API. Hier, RuhendeApp ist der Name unseres Hauptmoduls, das wir zu Beginn definiert haben.
Das .Fabrik() Die Methode 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 haben wir zur Verfügung gestellt $ Ressource Als Abhängigkeit für unseren Dienst wird er als Argument an die Funktion übergeben. Anschließend erstellen wir einen Dienst für den Dienst Beiträge Ressource.
Wir haben bereits eine Variable für den API-Pfad deklariert, sodass wir den Pfad durch Folgendes ersetzen können:
quiescentApp.factory ('Posts', ['$ resource', Funktion ($ resource) return $ resource (apiUrl + 'posts');]));Nun, da wir einen Service für die erstellt haben Beiträge Als Ressource können wir diesen Dienst als eine Abhängigkeit in unsere Direktiven und Steuerungen einfügen und seine Methoden wie Posts.query (), Posts.get (), usw. In den folgenden Teilen der Serie erfahren Sie mehr über diese Methoden und ihre Funktionsweise. Wenn Sie jedoch neugierig sind, können Sie die offizielle Dokumentation jederzeit überprüfen.
Um einen Dienst für die Beiträge Ressource haben wir die bereitgestellt / wp / v2 / Beiträge Route. Diese Route zeigt 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 seinem Slug abrufen. Um diese Funktion zu berücksichtigen, können Sie den Code wie folgt ändern:
quiescentApp.factory ('Posts', ['$ resource', Funktion ($ resource) return $ resource (apiUrl + 'posts? slug =: slug');]));Dies wird als parametrisierte URL-Vorlage bezeichnet und die Parameter werden durch einen Doppelpunkt ergänzt :.
Diese Änderung ermöglicht uns das Abrufen einer Sammlung von Beiträgen mit der / wp / v2 / Beiträge Route, sowie das Abrufen eines einzelnen Postens über seinen Slug mit der / posts? slug = Streit.
Abgesehen von Posts werden Kategorien und Benutzer anhand ihrer IDs abgerufen. Der folgende Code erstellt also Dienste für die Benutzer und Kategorien Ressourcen:
/ ** * Erstellen eines Services für Benutzer * / quiescentApp.factory ('Benutzer', ['$ resource', Funktion ($ resource) return $ resource (apiUrl + 'users /: id');]); / ** * Erstellen eines Services für Kategorien * / quiescentApp.factory ('Categories', ['$ resource', Funktion ($ resource) return $ resource (apiUrl + 'categories /: id');]);Der Code für alle drei Dienste lautet daher wie folgt:
/ ** / ** * Erstellen eines Services für Posts * / quiescentApp.factory ('Posts', ['$ resource', Funktion ($ resource) return $ resource (apiUrl + 'posts? Slug =: slug'); ]); / ** * Erstellen eines Services für Benutzer * / quiescentApp.factory ('Benutzer', ['$ resource', Funktion ($ resource) return $ resource (apiUrl + 'users /: id');]); / ** * Erstellen eines Services für Kategorien * / quiescentApp.factory ('Categories', ['$ resource', Funktion ($ resource) return $ resource (apiUrl + 'categories /: id');]);Und unser /src/js/app.js Die Datei sieht in etwa so aus:
(function () / ** * Moduldefinition für Quiescent App * / var quiescentApp = angle.module ('quiescentApp', ['ngSanitize', 'ngRoute', 'ngResource'])); / ** * Konfigurationsvariablen für die app * / var serverPath = 'http: // localhost / wordpress /', apiPath = 'wp-json / wp / v2 /', apiUrl = serverPath + apiPath; / ** * Konfigurieren von Routen für unsere app * / quiescentApp.config (['$ routeProvider', Funktion ($ route) // post liste route $ route.when ('/ posts', templateUrl: 'views / listing.html',) // Einzelpostroute .when (' / posts /: slug ', templateUrl:' views / single.html ',) // Autorenprofil Route .when (' / users /: id ', templateUrl:' views / author.html ',) / / category profil route .when ('/ categories /: id', templateUrl: 'views / category.html',) // 404 route .andere (templateUrl: 'views / 404.html'; ); / ** * Erstellen eines Services für Posts * / quiescentApp.factory ('Posts', ['$ resource', Funktion ($ resource) return $ resource (apiUrl + 'posts? Slug =: slug'); ] ); /** * Erstellen ein Dienst für Benutzer * / quiescentApp.factory ('Benutzer', ['$ resource', Funktion ($ resource) return $ resource (apiUrl + 'users /: id'); ]); / ** * Erstellen eines Services für Kategorien * / quiescentApp.factory ('Categories', ['$ resource', Funktion ($ resource) return $ resource (apiUrl + 'categories /: id');]); ) (); $ (document) .foundation ();Das .erhalten() Die Methode für einen RESTful-Dienst gibt ein einzelnes Objekt mithilfe von zurück ERHALTEN HTTP-Methode Das .Abfrage() Methode verwendet das gleiche ERHALTEN HTTP-Methode, gibt jedoch ein Array zurück. Es gibt drei weitere vordefinierte Methoden, nämlich der Dienst .sparen(), .Löschen(), und .löschen(), diese Verwendung POST und LÖSCHEN Methoden. Aber wir werden uns nur mit dem beschäftigen .erhalten() und .Abfrage() Methoden in dieser Serie, da wir uns nur mit dem Abrufen von Daten befassen.
Und damit ist unser Tutorial für heute abgeschlossen.
In diesem Tutorial haben wir eine Menge JavaScript-Code für das Bootstrapping unserer Anwendung, das Konfigurieren von Routen und das Erstellen von RESTful-Services geschrieben. Wir haben auch Vorlagen für verschiedene Ansichten in unserer Anwendung zerlegt.
Im nächsten Teil der Serie erstellen wir eine benutzerdefinierte AngularJS-Direktive für das Post-Listing-Feature mit der Beiträge Service, den wir geschaffen haben. Dies ermöglicht es uns, die Post-Listing-Funktion an vielen Orten einzufügen, ohne dass wir uns wiederholen müssen. Also bleibt gespannt…
