Share
In het vorige deel van deze serie over het bouwen van een WordPress-aangedreven frontend met de WP REST API en AngularJS, analyseerden we de projectvereisten, beoordeelde wireframes, downloadden en compileerden het HTML-pakket en bouwden we de bijbehorende plug-in voor WordPress die de antwoorden aanpast voor de berichten en gebruikers middelen.
Na een solide basis voor ons project te hebben gelegd, zijn we nu klaar om aan de voorkant te werken en basisconfiguraties voor onze toepassing met AngularJS op te zetten..
In het huidige deel van de serie zullen we:
Laten we beginnen met het initialiseren van de AngularJS-app en het ontleden van sjablonen voor weergaven, waaronder postlijsten, afzonderlijke berichten en categorieën.
Het eerste dat we moeten doen om onze door WP REST API aangedreven applicatie te bouwen, is om het met de bootstrap op te starten ng-app AngularJS-richtlijn. De ng-app wordt gebruikt om de toepassing automatisch te booten, en het neemt de naam van de AngularJS-module als een optionele waarde.
Maar voordat u begint met het wijzigen van bestanden, moet u ervoor zorgen dat u de slok commando door te navigeren in de latente-rest-api-html directory. Dit zorgt ervoor dat alle wijzigingen die u aanbrengt in de / src directory worden onmiddellijk gecompileerd in de / dist map door de kloof kijken commando. En daarnaast moedig ik je ook aan om in de. Te navigeren / dist map in een ander consolevenster en voer de http-server opdracht die de Node.js HTTP-server voor die map uitvoert en u een voorbeeld van uw site in de browser kunt weergeven door een webadres zo eenvoudig te typen als 127.0.0.1:8080.
De ng-app richtlijn wordt meestal in het rootelement geplaatst, d.w.z. de label. Daarom zullen we de tag in de src / index.html bestand naar het volgende:
Hier, quiescentApp is de naam van onze belangrijkste AngularJS-module die we in onze volgende zullen initialiseren src / js / app.js het dossier.
De src / js / app.js bestand bevat momenteel slechts één regel code voor het initialiseren van de JavaScript-functionaliteit van Zurb Foundation. We kunnen dit bestand aanpassen om de volgende code voor de hoofdmodule van onze AngularJS-applicatie op te nemen:
Accentsconagua
(function () / ** * Module-definitie voor Quiescent-app * / var quiescentApp = angular.module ('quiescentApp', ['ngSanitize', 'ngRoute', 'ngResource']);) ();Het eerste ding in de bovenstaande code is de zelfoproepende anonieme functie die wordt weergegeven door het volgende:
(function () ) ();
Zoals de naam doet vermoeden, is de bovenstaande functie anoniem, d.w.z. het heeft geen naam en het roept zichzelf aan onmiddellijk alle code uit te voeren die zich in zijn lichaam bevindt. Het is een goede manier om het bereik van onze variabelen en functies te beperken, zodat ze niet wereldwijd toegankelijk zijn voor enige vorm van manipulatie.
Binnen de anonieme functie initialiseren we onze AngularJS-module met behulp van de angular.module () methode. De angular.module () functie neemt de naam van de module als het eerste argument en een array van afhankelijkheden als het tweede argument.
De afhankelijkheden die we in het tweede argument hebben doorgegeven als een array zijn ngRoute, ngSanitize, en ngResource. Dit is wat elk van hen doet:
ngRoute: Deze module biedt routerings- en deeplink-services voor onze applicatie. Het is gevonden in de hoekige route.js bestand in het AngularJS-pakket zoals gedownload van de officiële site.ngResource: Deze module biedt ondersteuning voor interactie met RESTful-services. Aangezien we van plan zijn de WP REST API te gebruiken, is dit de belangrijkste module in onze applicatie, omdat we deze module zullen gebruiken om te communiceren met bronnen, inclusief berichten, categorieën en gebruikers..ngSanitize: Deze module biedt functionaliteit voor het opschonen van de HTML. We hebben deze module nodig bij het uitvoeren van HTML op de pagina. Voorbeelden zijn de berichttitel, berichtinhoud en uittreksel.Let op: voordat deze modules worden geïnjecteerd als afhankelijkheden in onze hoofdmodule, moeten hun respectieve bestanden worden opgenomen in het HTML-document. Maar daar hoeft u zich geen zorgen over te maken, omdat we dat al hebben geconfigureerd in onze gulp.js het dossier.
Na het plaatsen van de bovenstaande code in uw app.js bestand, ga naar het adres dat wordt aangeboden door de Node.js HTTP-server. Open ook de ontwikkelaarstools in uw browser en als u geen JavaScript-fouten ziet, zijn we goed om te gaan!
Nu we onze AngularJS-applicatie met succes hebben geïnitialiseerd, kunnen we werken aan het templating-gedeelte en sjablonen analyseren voor verschillende weergaven..
Omdat we een Single Page Application (SPA) maken, moeten we sjablonen configureren voor verschillende views die dynamisch in de pagina worden geladen wanneer iemand op een link klikt.
Momenteel hebben we meerdere pagina's in onze HTML, inclusief die van berichtlijst, enkele post, auteur en categorie. De HTML is zodanig gestructureerd dat de kop-, voettekst- en hoofdcontainer voor al deze pagina's hetzelfde is. De belangrijkste container in ons geval is div.columns.medium-8 binnen in de div.main.row label. Met AngularJS kunnen we verschillende sjablonen configureren voor verschillende routes in de applicatie. Maar voordat we routering configureren, moeten we deze sjablonen uit de bestaande HTML-bestanden ontleden.
Dus in plaats van vier verschillende pagina's te gebruiken voor de indexpagina, enkele post, auteur en categorie, kunnen we één hoofdpagina van HTML gebruiken en deze sjablonen voor verschillende weergaven laten laden, afhankelijk van de huidige route.
Laten we beginnen met het ontleden van de sjabloon voor de lijstweergave. Open de /src/index.html bestand in de code-editor van uw keuze en knip alle code die in de div.columns.medium-8 houder. Maak een nieuw bestand met de naam listing.html binnen in de / Src / uitzicht map en plak de code in dat bestand.
Deze sjabloon zal dienen als een weergave voor onze listingpagina. We kunnen de procedure herhalen voor elk van de post-single.html, author.html, en category.html bestanden. Open elk van deze bestanden in uw code-editor en knip de inhoud van de div.columns.medium-8 container en plak ze in nieuwe bestanden aangemaakt binnen de / Src / uitzicht directory. De namen van de sjabloonbestanden zouden zijn single.html, author.html, en category.html respectievelijk.
Maak een nieuw bestand in de / Src / uitzicht map voor de 404-pagina en geef deze een naam 404.html. Het hoeft niets speciaals te bevatten, maar alleen de volgende regel code:
404 - Niets gevonden
We kunnen het veilig nu verwijderen /src/post-single.html, /src/author.html, en /src/category.html bestanden. We zullen het bewaren /src/index.html bestand, dat zal dienen als het belangrijkste toegangspunt voor onze applicatie.
Het laatste dat we nu moeten doen is AngularJS de plaats vertellen waar deze sjablonen moeten worden geladen. En we kunnen dit doen door de ng-view richtlijn in de div.columns.medium-8 container in de /src/index.html het dossier:
De ng-view De instructie vertelt AngularJS waar de inhoud van de sjabloonbestanden moet worden geladen.
We kunnen ook het auto-scroll = "true" attribuut op de div.columns.medium-8 container, zodat wanneer we heen en weer navigeren tussen weergaven, de browser ons naar het punt brengt waarvandaan we zijn vertrokken.
Ga terug naar uw browser en vernieuw deze, en u zou een pagina moeten zien die alleen de koptekst en het voettekst bevat. Dit komt omdat we routering nog niet hebben geconfigureerd. En dat is wat we vervolgens doen.
Nadat we in onze applicatie sjablonen voor verschillende weergaven hebben gemaakt, is het tijd om AngularJS te vertellen hoe en wanneer deze sjablonen moeten worden geladen. Voor dit doel biedt AngularJS een providercomponent genaamd $ routeProvider. De $ routeProvider geeft ons een methode genaamd .wanneer() die kan worden gebruikt om routes samen met hun sjablonen en enkele andere eigenschappen te configureren.
Beschouw de volgende code:
/ ** * Routes configureren voor onze app * / quiescentApp.config (['$ routeProvider', functie ($ route) // plaatsingsroute route $ route.when ('/ posts', templateUrl: 'views / listing. html ',) // single post route .when (' / posts /: slug ', templateUrl:' views / single.html ',) // auteur profiel route .when (' / users /: id ', templateUrl: 'views / author.html',) // category profile route .when ('/ categories /: id', templateUrl: 'views / category.html',) // 404 route .anders ( templateUrl: 'views / 404.html');]);Hier configureren we onze applicatie met behulp van de .config () methode door te injecteren $ routeProvider erin. De functie neemt een argument-$ route-voor de $ routeProvider, en dan gebruiken we het voor het configureren van verschillende routes.
De .wanneer() methode configureert een nieuwe route en er zijn twee parameters voor nodig $ path en de $ route respectievelijk. De $ path argument is een tekenreeks die het pad vertegenwoordigt waarvoor we de route configureren. De $ route argument is een object dat informatie bevat zoals de sjabloon-URL die moet worden gebruikt, de controller, de controller-identifier, enz.
In de bovenstaande code hebben we vier routes geconfigureerd voor respectievelijk lijstweergave, enkele bericht, auteur en categorie. We hebben ze zojuist hun respectievelijke sjabloon-URL's toegewezen en we zullen hun controllers later in deze serie configureren wanneer we ze bouwen. Dus vanaf dit punt zullen we progressief voortbouwen op deze code.
Noteer in de bovenstaande code de benoemde groepen gevolgd door een dubbele punt : voor de routes voor één bericht, auteur en categorie. Deze worden opgeslagen in de $ routeParams dienst en zal beschikbaar worden gesteld aan elke richtlijn of controller die ze wil gebruiken. We zullen dit in meer detail bekijken, maar beschouwen dit voorlopig als plaatsen waar een post-slug, een gebruikers-ID of een categorie-ID, zoals verstrekt door de gebruiker in de URL, toegankelijk is..
Afgezien van de vier routes, hebben we de 404-sjabloon geconfigureerd met behulp van de .anders() methode. Deze methode vertelt AngularJS om de gebruiker door te sturen naar een bepaalde sjabloon als geen van de geconfigureerde routes is gematcht.
U kunt meer informatie vinden over de routeringservice van AngularJS en de verschillende methoden en argumenten in de officiële documentatie.
U kunt nu een van de volgende vier URL's in uw browser openen en ziet de juiste sjabloon worden geladen:
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 / # / users / 10
Het adres http://127.0.0.1:8080 kan in jouw geval anders zijn. De ID / slug die we hier aanbieden (in dit geval 10) doet er op dit moment niet toe.
Het laatste dat we nu moeten doen, is services maken voor bronnen zoals berichten, gebruikers en categorieën.
AngularJS biedt ons de ngResource module, waarmee we een RESTful-service rond een bepaald eindpunt voor een resource kunnen bouwen. Maar voordat we ons gaan verdiepen in het schrijven van een code voor het maken van services, laten we een aantal configuratievariabelen maken die enkele basisinformatie opslaan.
/ ** * Configuratievariabelen voor de app * / var serverPath = 'http: // localhost / wordpress /', apiPath = 'wp-json / wp / v2 /', apiUrl = serverPath + apiPath;
Het serverpad kan in uw geval anders zijn en ik raad aan dat u dit overeenkomstig wijzigt. Door deze variabelen te declareren, kunnen we het serverpad slechts op één plaats configureren in plaats van het voor elke service afzonderlijk te schrijven. De bovenstaande code moet in de anonieme functie worden geplaatst en ik heb deze onmiddellijk achter mijn geplaatst quiescentApp moduleverklaring.
Een service maken rond een eindpunt in AngularJS is net zo eenvoudig als de volgende code:
quiescentApp.factory ('Posts', ['$ resource', function ($ resource) return $ resource ('http: // localhost / wordpress / wp-json / wp / v2 / berichten');]);De bovenstaande code maakt een service rondom de berichten bron in WP REST API. Hier, quiescentApp is de naam van onze hoofdmodule die we aan het begin hebben gedefinieerd.
De .fabriek() methode neemt de naam als het eerste argument, en het tweede argument is een array met een lijst met afhankelijkheden en een functie. De functie accepteert de argumenten doorgegeven als afhankelijkheden. Omdat we hebben verstrekt $ resource als afhankelijkheid van onze service, wordt het doorgegeven aan de functie als een argument en gebruiken we het om een service voor de service te maken. berichten hulpbron.
We hebben al een variabele voor het API-pad gedeclareerd, zodat we het pad kunnen vervangen door het volgende:
quiescentApp.factory ('Posts', ['$ resource', function ($ resource) return $ resource (apiUrl + 'posts');]);Nu hebben we een service voor de berichten bron, we kunnen deze service als een afhankelijkheid in onze richtlijnen en controllers injecteren en beginnen met het gebruik van zijn methoden zoals Posts.query (), Posts.get (), enz. We zullen meer leren over deze methoden en wat ze doen in de volgende delen van de serie, maar als je nieuwsgierig bent, kun je altijd de officiële documentatie raadplegen..
Voor het maken van een service voor de berichten bron, we hebben de / Wp / v2 / berichten route. Deze route verwijst naar de verzameling van de berichten en kan ook worden gebruikt voor het maken van één bericht. Maar in onze applicatie moeten we ook één bericht ophalen op basis van zijn naaktslak. Om rekening te houden met deze functie, kunnen we de code wijzigen in het volgende:
quiescentApp.factory ('Posts', ['$ resource', function ($ resource) return $ resource (apiUrl + 'posts? slug =: slug');]);Dit wordt een sjabloon met een geparametriseerde URL genoemd en de parameters hebben het achtervoegsel met dubbele punt :.
Met deze aanpassing kunnen we een verzameling berichten ophalen met behulp van de / Wp / v2 / berichten route, evenals het ophalen van een enkele post door zijn naaktslak met behulp van de / Berichten? Slug = argument.
Naast berichten zullen we categorieën en gebruikers ophalen met hun ID's. Dus de volgende code maakt services voor de gebruikers en Categorieën middelen:
/ ** * Een service maken voor gebruikers * / quiescentApp.factory ('Gebruikers', ['$ resource', function ($ resource) return $ resource (apiUrl + 'users /: id');]); / ** * Een service maken voor Categorieën * / quiescentApp.factory ('Categorieën', ['$ resource', function ($ resource) return $ resource (apiUrl + 'categories /: id');]);Vandaar dat de code voor alle drie services het volgende is:
/ ** / ** * Een service maken voor Posts * / quiescentApp.factory ('Posts', ['$ resource', function ($ resource) return $ resource (apiUrl + 'posts? Slug =: slug'); ]); / ** * Een service maken voor gebruikers * / quiescentApp.factory ('Gebruikers', ['$ resource', function ($ resource) return $ resource (apiUrl + 'users /: id');]); / ** * Een service maken voor Categorieën * / quiescentApp.factory ('Categorieën', ['$ resource', function ($ resource) return $ resource (apiUrl + 'categories /: id');]);En onze /src/js/app.js bestand ziet er tot nu toe ongeveer zo uit:
(function () / ** * Module-definitie voor Quiescent-app * / var quiescentApp = angular.module ('quiescentApp', ['ngSanitize', 'ngRoute', 'ngResource']); / ** * Configuratievariabelen voor de app * / var serverPath = 'http: // localhost / wordpress /', apiPath = 'wp-json / wp / v2 /', apiUrl = serverPath + apiPath; / ** * Routes configureren voor onze app * / quiescentApp.config (['$ routeProvider', functie ($ route) // plaatsingsroute route $ route.when ('/ posts', templateUrl: 'views / listing.html',) // single post route .when (' / posts /: slug ', templateUrl:' views / single.html ',) // auteursprofiel route .when (' / users /: id ', templateUrl:' views / author.html ',) / / category profile route .when ('/ categories /: id', templateUrl: 'views / category.html',) // 404 route .otherwise (templateUrl: 'views / 404.html');] ); / ** * Een service maken voor Posts * / quiescentApp.factory ('Posts', ['$ resource', function ($ resource) return $ resource (apiUrl + 'posts? Slug =: slug'); ]); / ** * Maken een service voor gebruikers * / quiescentApp.factory ('Gebruikers', ['$ resource', function ($ resource) return $ resource (apiUrl + 'users /: id'); ]); / ** * Een service maken voor Categorieën * / quiescentApp.factory ('Categorieën', ['$ resource', function ($ resource) return $ resource (apiUrl + 'categories /: id');]); ) (); $ (Document) .foundation ();De .krijgen() methode op een RESTful-service retourneert een enkel object met behulp van de KRIJGEN HTTP-methode. De .vraag () methode gebruikt hetzelfde KRIJGEN HTTP-methode, maar retourneert een array. Er zijn nog drie voorgedefinieerde methoden die door de service worden geboden, namelijk .opslaan(), .verwijderen(), en .wissen (), dat gebruik POST en DELETE methoden. Maar we zullen alleen omgaan met de .krijgen() en .vraag () methoden in deze serie omdat we alleen te maken hebben met het ophalen van gegevens.
En dit omvat onze tutorial voor vandaag.
In de huidige zelfstudie hebben we veel JavaScript-code geschreven voor het bootstrappen van onze applicatie, het configureren van routes en het maken van REST-services. We hebben ook sjablonen geanalyseerd voor verschillende weergaven in onze applicatie.
In het volgende deel van de serie zullen we een aangepaste AngularJS-richtlijn voor de functie voor het plaatsen van berichten maken met behulp van de berichten service die we hebben gemaakt. Dit stelt ons in staat om de functie voor het plaatsen van een post op veel locaties op te nemen zonder onszelf te herhalen. Blijf dus op de hoogte ...
