In het vorige deel van de serie hebben we een aangepaste richtlijn voor het posten van berichten aan de voorkant gemaakt. Deze instructie neemt argumenten rechtstreeks op in het HTML-kenmerk en in de URL om berichten van de server op te halen. Het bouwen van de richtlijn heeft ons in staat gesteld overal in onze applicatie de functie 'post listing' te tonen door de bedrijfslogica en de renderinglogica van de richtlijn te hergebruiken.
In dit afsluitende deel van de serie werken we aan het resterende deel van onze applicatie en bouwen we controllers voor postlisting, single post, auteur en de categoriepagina. We zullen ook werken aan de sjablonen van deze controllers en daarop de gegevens weergeven die door de controllers worden verstrekt.
Om specifiek te zijn, in het huidige deel van de serie zullen we:
stel ons voor aan AngularJS-controllers
bouw controllers voor berichten, categorieën en gebruikers
koppel sjablonen aan de gegevens die door de controller worden verstrekt
Dus laten we beginnen door ons voor te stellen aan AngularJS-controllers.
Introductie van AngularJS-controllers
Controllers in AngularJS zijn een van de belangrijkste bouwstenen van de applicatie. Ze bevatten bedrijfslogica die bepaalt welke gegevens moeten worden weergegeven aan de gebruiker. Ze zorgen voor een groot deel van de UI-gerelateerde functionaliteit van de applicatie en bieden ook ondersteuning voor gebruikersinteractie.
Controllers zijn nauw gekoppeld aan DOM en ze lijmen het model van de toepassing - waar de gegevens zich bevinden - aan de applicatieweergave.
In ons geval, waarin we de toepassing bouwen die wordt aangedreven door de WP REST API, zijn de controllers waar we de gegevens tonen die zijn opgehaald via de API en verschillende services voor de eindgebruiker..
Een controller bouwen voor de weergave Postaanbiedingen
Controllers in AngularJS worden gedefinieerd in de module en we zullen dezelfde notatie van de veilige stijl van afhankelijkheidsinjectie gebruiken als voor het declareren van de aangepaste richtlijn. Overweeg de volgende code, waarin we een controller voor de pagina met de berichtvermelding declareren:
/ ** * Controller voor berichtvermelding * / quiescentApp.controller ('PostListing', [function () var self = this;]);
Controllers worden gedefinieerd in een module met behulp van de .controller () methode die beschikbaar is in de module. De naam van de controller die we hierboven hebben gedefinieerd is PostListing.
Alle gegevens die we aan de buitenwereld moeten tonen, moeten worden ingesteld op de deze trefwoord in de constructorfunctie van de controller. Daarom cachen we de deze zoekwoord door een zelf veranderlijk.
De controller voor het plaatsen van berichten is de eenvoudigste van alle controllers die we zullen maken, in die zin dat er geen gegevens nodig zijn. Er moet gewoon een sjabloon aan gekoppeld zijn en we zullen de richtlijn in die sjabloon om te beginnen met het posten van berichten. De richtlijn zal berichten zelf ophalen met behulp van de berichten service en geef ze een lijst met hun eigen weergavelogica.
Dus als eerste stap zullen we de views / listing.html sjabloon voor de PostListing controller, en we doen dit in de .config () deel van onze applicatie. De .config () sectie is waar we de routes voor de applicatie hebben geconfigureerd, en we moeten de / Wp / v2 / berichten route naar het volgende:
In de bovenstaande code hebben we twee extra eigenschappen in de routedefinitie geplaatst, en deze eigenschappen zijn:
controleur: De naam van de controller die we moeten koppelen aan deze route en de bijbehorende sjabloon.
controllerAs: Het sleutelwoord waarmee we de controller in onze sjabloon verwijzen.
Daarom zijn we geslaagd PostListing als de naam van de controller, en we zullen er in de sjabloon naar verwijzen met behulp van de postListing trefwoord.
Nadat de controller aan de route en de sjabloon is gekoppeld, moeten we de sjabloon nu aanpassen om berichten correct weer te geven. Open dus de views / listing.html sjabloonbestand en vervang de inhoud door de volgende code:
Hieronder ziet u een screenshot van de voltooide sjabloon:
En dat is het! De bovenstaande coderegel vertoont de kracht van AngularJS-richtlijnen. Met slechts één regel code hebben we de functionaliteit voor postlijsten kunnen nabootsen die zowel bedrijfslogica als weergavelogica bevat. En we zullen verder zien hoe flexibel deze AngularJS-richtlijn kan zijn bij het bouwen van controllers voor de weergave van categorieën en gebruikerslijsten in de volgende secties.
Een controller bouwen voor de categorieweergave
Nadat we ons vertrouwd hebben gemaakt met de syntaxis van de controller-declaratie en een zeer eenvoudige controller voor het plaatsen van berichten hebben gebouwd, zijn we klaar om te werken aan een meer geavanceerde controller voor het categorieweergave.
De categorieweergavecontroller die we bouwen, gebruikt de $ routeParam service om toegang te krijgen tot de categorie-ID in de URL en met die ID gebruikt de controller de Categorieën dienst om categorie-informatie op te halen en een lijst met bijbehorende berichten. De controller haalt de berichten echter niet rechtstreeks op met behulp van de berichten service, maar het zal de postListing richtlijn en geef deze door aan de categorie-ID om een lijst met berichten op te halen die aan die categorie zijn gekoppeld.
Hieronder staat de code voor de CategoryListing controller:
De CategoryListing controller hierboven heeft twee afhankelijkheden voor de $ routeParams service en de Categorieën klantenservice. De ... gebruiken $ routeParams service haalt het de ID van de categorie op uit de URL, waarna het met behulp van die ID zoekt naar de categorie-informatie via de Categorieën service.
De controller heeft een variabele gedefinieerd op de $ scope object met de naam categoryInfo. Deze variabele bevat het categorieobject dat door de server wordt geretourneerd en de waarde ervan wordt ingesteld nadat de query is voltooid.
Het volgende dat we moeten doen, is een sjabloon koppelen aan deze controller die de gegevens aan de gebruiker toont. En we doen dit in de .config onderdeel van de applicatie, net zoals we deden voor de PostListing controller in het vorige gedeelte.
Dus wijzig het / Categorieën /: id route om de volgende code te bevatten:
In de bovenstaande code koppelen we de route aan de CategoryListing controller en definieer ook de categoryListing sleutelwoord waarmee we ernaar verwijzen in de sjabloon.
Het is nu tijd om de views / category.html sjabloon zodat het gegevens dynamisch weergeeft in plaats van statische HTML-code weer te geven.
Categorie: categoryListing.categoryInfo.name
In de bovenstaande code hebben we de hard-gecodeerde categorienaam vervangen door CategoryListing.categoryInfo.name, waar categoryListing is een instantie van de CategoryListing controller. De categoryInfo variabele bevat het categorieobject dat door de server wordt geretourneerd en dit object bevat de naam eigenschap voor de naam van de categorie.
Voor de functie 'Postlijst' gebruiken we de postListing richtlijn en geef deze de categorie ID door via post-args attribuut. Voor dit doel gebruiken we de filter[] syntaxis ondersteund door de / Wp / v2 / berichten route van de WP REST API. We zijn al bekend met de filter[] syntaxis uit het vierde deel van de introductieserie over de WP REST API.
Hieronder ziet u een screenshot van de voltooide categorieweergave:
Laten we nu de controller voor gebruikers uitwerken, die sterk lijkt op de categorieëncontroller.
Een controller bouwen voor de gebruikersweergave
De controller voor de gebruikersweergave lijkt veel op die van categorieën. We beginnen met het wijzigen van de routeringsconfiguratie om de controller te koppelen aan de sjabloon:
Hier koppelen we de UserListing controller met de route en de sjabloon. Het sleutelwoord waarmee we naar de instantie van de controller verwijzen is userListing.
Hierna volgt de code voor de UserListing controller:
De UserListing controller neemt $ routeParams en gebruikers diensten als afhankelijkheden. De ... gebruiken $ routeParams service toegang tot de gebruikers-ID in de URL. De gebruikers service wordt vervolgens gebruikt om het gebruikersobject op te halen met behulp van de gebruikers-ID. De gebruikers informatie variabele houdt het gebruikersobject in dat door de server wordt geretourneerd.
Laten we nu het views / author.html sjabloon om deze gegevens aan de gebruiker te geven. Vervang alle inhoud van de author.html bestand met het volgende:
Over userListing.userInfo.name
UserListing.userInfo.description
Berichten van userListing.userInfo.name
In de bovenstaande code hebben we toegang tot de gebruikers informatie variabele gedefinieerd op het bereik van de controller die het gebruikersinformatieobject bevat. Met behulp van verschillende eigenschappen van dit gebruikersobject vervangen we de hardcoded gebruikersnaam, user gravatar en gebruikersbeschrijving.
Voor het vermelden van de berichten die door de gebruiker zijn geschreven, gebruiken we de postListing richtlijn en geef deze het gebruikers-ID door als de waarde van de schrijver parameter. De richtlijn haalt dan berichten op met behulp van de berichten service.
Hier is hoe de voltooide weergave eruit zou moeten zien:
De vierde en laatste controller waaraan nu moet worden gewerkt, is voor de weergave van de weergave van één bericht, en we doen dat in de volgende sectie.
Een controller bouwen voor de weergave van één bericht
De weergave voor de enkele post wijkt enigszins af van de andere omdat deze geen gebruik maakt van de postListing richtlijn omdat de richtlijn een sjabloon gebruikt die geschikter is voor de pagina met de berichtvermelding. Bovendien zullen we in de toekomst ondersteuning toevoegen om opmerkingen voor één bericht te tonen, dus we moeten een afzonderlijke sjabloon voor één bericht hebben in plaats van dezelfde sjabloon te gebruiken als voor het plaatsen van berichten.
Vanwege de bovenstaande redenen zullen we de berichten service handmatig in de controller voor een enkele post om de post op te halen op basis van de slug.
Laten we eerst een snelle wijziging aanbrengen in de enkele postroute om de controller en de sjabloon te koppelen:
// single post route .when ('/ posts /: slug', templateUrl: 'views / single.html', controller: 'SinglePost', controllerAs: 'singlePost')
Dus de naam van de controller voor een enkele post zal zijn SinglePost. We zullen de gebruiken singlePost sleutelwoord om ernaar te verwijzen in zijn sjabloon.
Hieronder staat de code voor de controllerverklaring:
/ ** * Controller voor enkele bericht * / quiescentApp.controller ('SinglePost', ['$ routeParams', 'Posts', function ($ routeParams, Posts) var self = this; self.postSlug = $ routeParams.slug; self.post = ; Posts.query ('slug': self.postSlug, functie (gegevens, headers) self.post = data [0];);]);
In de bovenstaande code halen we eerst de postslak op met behulp van de $ routeParams service en sla het op in de self.postSlug eigenschap op het bereik van de controller. Vervolgens vragen we de database met behulp van de berichten service door de post-slug als een queryargument op te geven. De geretourneerde gegevens zijn een array met een enkel object en we stellen de self.post eigenschap op het bereik met behulp van deze geretourneerde gegevens. Eenvoudig!
Nu voor de sjabloon, hieronder is de inhoud van de views / single.html het dossier:
SinglePost.post.title.rendered
Door singlePost.post.quiescent_author_name in category.name $ last? ": ','
De bovenstaande code is vrij eenvoudig omdat we verschillende eigenschappen van het post-object aan verschillende elementen binden, net zoals we in de laatste paar secties hebben gedaan.
Hieronder ziet u een screenshot van de voltooide enkelvoudige berichtweergave:
De applicatie is nu voltooid (nog niet helemaal!) En biedt weergaven voor de pagina's met postlijsten, afzonderlijke berichten, gebruikers en categorieën.
Conclusie
Hier concluderen we onze vierdelige serie, waarin we een front-end hebben gebouwd, mogelijk gemaakt door de WP REST API en AngularJS. We zijn begonnen met het analyseren van de vereisten en het beoordelen van wireframes. Vervolgens hebben we een bijbehorende plug-in gebouwd die enkele extra velden biedt in standaardreacties die nodig zijn in onze front-end.
In de volgende delen bootwandden we onze AngularJS-applicatie, dissected-sjablonen voor verschillende dataweergaven en geconfigureerde applicatie-routing. We hebben ook een aangepaste AngularJS-richtlijn voor de functie voor het publiceren van berichten gemaakt die de functionaliteit voor het weergeven van berichten abstraheert en biedt ons een flexibele manier om een reeks berichten voor verschillende vereisten op te halen.
In het laatste deel van de serie bouwden we controllers voor postlijst-, single-post-, categorie- en gebruikersviews en koppelden ze aan hun respectieve templates via de .config () deel van onze applicatie.
De applicatie is niet compleet en kan op veel manieren worden verbeterd. Sommige ideeën staan hieronder:
opmerkingen in de enkele berichtweergave
Geen berichten van auteur bericht wanneer de gebruiker geen bericht op de pagina met het auteursprofiel plaatst
genummerde paginering op pagina's met berichtvermeldingen
Betere SEO met AngularJS Single Page Applications
In toekomstige tutorials zullen we proberen deze functies verder uit te bouwen. Maar voorlopig laat ik het aan jou over om met de applicatie te spelen en deze uit te breiden met een aantal geweldige functies. Zorg ervoor dat u een online demo voor de toepassing in de opmerkingen geeft, omdat ik graag wil leren van mijn lezers.
Accentsconagua
Share
