I den forrige delen av serien konstruerte vi et tilpasset direktiv for oppføring av innlegg på forsiden. Dette direktivet tar argumenter direkte i HTML-attributtet, samt i URL-adressen for å hente innlegg fra serveren. Byggingen av direktivet har gitt oss mulighet til å vise postnoteringsfunksjonen hvor som helst i vår søknad ved å gjenbruke forretningslogikken og gjengivelseslogikken som følger av direktivet.
I denne avsluttende delen av serien vil vi jobbe med resten av søknaden vår og bygge kontroller for postoppføring, enkelt innlegg, forfatter og kategorisiden. Vi vil også arbeide med maler på disse kontrollerne og vise på dem dataene fra kontrollerne.
For å være spesifikk, i den nåværende delen av serien, vil vi:
introdusere oss til AngularJS controllers
bygge kontroller for innlegg, kategorier og brukere
lenke maler til dataene levert av kontrolleren
Så la oss begynne med å introdusere oss selv til AngularJS-kontrollere.
Vi presenterer AngularJS Controllers
Kontrollører i AngularJS er en av hovedbyggnadsblokkene i søknaden. De inneholder forretningslogikk som bestemmer hvilke data som skal vises til brukeren. De kjører mye av brukergrensesnittet i applikasjonen, og gir også støtte til brukerinteraksjon.
Kontrollører er tett knyttet til DOM og de limer modellen av applikasjonen - hvor dataene ligger - til søknadsvisningen.
I vårt tilfelle, der vi bygger applikasjonen drevet av WP REST API, er kontrollerne der vi viser dataene hentet gjennom API og forskjellige tjenester til sluttbrukeren.
Opprette en kontroller for postoppføringsvisningen
Controllers i AngularJS er definert i modulen, og vi vil bruke samme notering av den sikre typen av avhengighetsinjeksjon som vi gjorde for å erklære det tilpassede direktivet. Vurder følgende kode, der vi erklærer en kontroller for siden etter oppføring:
/ ** * Controller for Post Listing * / quiescentApp.controller ('PostListing', [funksjon () var self = this;]);
Controllers er definert i en modul som bruker .kontroller () metode som er tilgjengelig i modulen. Navnet på kontrolleren vi definerte ovenfor er PostListing.
Eventuelle data som vi må utstede til omverdenen, bør settes inn på dette nøkkelord inne i kontrolleren konstruktør funksjonen. Derfor cache vi dette søkeord ved å opprette en selv- variabel.
Kontrolleren for postoppføring er den enkleste av alle kontrollerne som vi skal lage, i den forstand at den ikke trenger noen data. Det trenger bare å ha en mal koblet, og vi vil plassere Direktivet i denne malen for å starte oppføringsposter. Direktivet vil hente innlegg på egen hånd ved hjelp av innlegg service og liste dem ved hjelp av egen rendering logikk.
Så som det første steget, vil vi knytte visninger / listing.html mal til PostListing kontrolleren, og det gjør vi i .konfig () delen av søknaden vår. De .konfig () delen er der vi konfigurerte rutene for programmet, og vi må endre / WP / v2 / innlegg rute til følgende:
I den ovennevnte koden plasserte vi to ekstra egenskaper i rutediagrammet, og disse egenskapene er:
kontrolleren: Navnet på kontrolleren vi må koble til denne ruten og dens mal.
controllerAs: Søkeordet som vi refererer til kontrolleren i vår mal.
Derfor passerte vi PostListing som kontrolløren navn, og vi vil referere til det i malen ved hjelp av postListing søkeord.
Etter å ha koblet kontrolleren med ruten og malen, trenger vi nå å endre malen for å legge til riktig innlegg. Så åpne visninger / listing.html malfil og erstatt innholdet med følgende kode:
Nedenfor er et skjermbilde av den ferdige malingen:
Og det er det! Koden ovenfor angir kraften i AngularJS-direktiver. Med bare én linje med kode har vi vært i stand til å etterligne funksjonaliteten for postoppføring som inkluderer forretningslogikk og renderinglogikk. Og vi vil videre se hvor fleksibelt dette AngularJS-direktivet kan være når du bygger kontroller for kategori- og brukeroppføringsvisningen i de følgende avsnittene.
Opprett en kontroller for kategorivisningen
Etter å ha kjent oss med kontrollerklæringssyntaxen og å ha bygget en veldig enkel kontroller for postoppføring, er vi klare til å begynne å jobbe på en mer avansert kontroller for kategoribeskrivelsen.
Kategorien vise kontrolleren vi bygger vil bruke $ routeParam tjeneste for å få tilgang til kategori-ID-en i nettadressen, og bruker den IDen, vil kontrolleren bruke kategorier tjeneste for å hente kategoriinformasjon og en liste over tilknyttede innlegg. Kontrolleren vil imidlertid ikke hente innleggene direkte ved hjelp av innlegg service, men det vil det bruke postListing Direktivet og send det kategori ID for å hente en liste over innlegg knyttet til den kategorien.
Nedenfor er koden for CategoryListing kontrolleren:
De CategoryListing Kontrolleren ovenfor har to avhengigheter for $ routeParams service og kategorier tilpasset service. Bruker $ routeParams tjenesten, henter den IDen til kategorien fra nettadressen, og deretter spør den etter den IDen for kategorininformasjonen via kategorier service.
Kontrolleren har en variabel definert på $ omfang objekt som heter categoryInfo. Denne variabelen holder kategoriobjektet returnert av serveren, og verdien er satt etter at spørringen har blitt vellykket.
Den neste tingen vi trenger å gjøre er å koble en mal til denne kontrolleren som vil vise dataene til brukeren. Og vi gjør dette i .config del av søknaden, akkurat som vi gjorde for PostListing kontrolleren i den forrige delen.
Så modifiser / Kategorier /: id rute for å inneholde følgende kode:
I koden ovenfor knytter vi ruten til CategoryListing kontrolleren og definere også categoryListing søkeord som vi refererer til det i malen.
Nå er det på tide å endre visninger / category.html mal slik at den viser data dynamisk i stedet for å vise statisk HTML-kode.
Kategori: categoryListing.categoryInfo.name
I koden ovenfor erstattet vi det hardkodede kategorinavnet med CategoryListing.categoryInfo.name, hvor categoryListing er en forekomst av CategoryListing kontrolleren. De categoryInfo variabel holder kategoriobjektet returnert av serveren, og dette objektet inneholder Navn eiendom for navn på kategorien.
For postnoteringsfunksjonen bruker vi postListing Direktivet og send det kategori ID gjennom post-args Egenskap. Til dette formål bruker vi filter[] syntaks støttet av / WP / v2 / innlegg rute for WP REST API. Vi er allerede kjent med filter[] syntaks fra fjerde del av introduksjonsserien om WP REST API.
Nedenfor er et skjermbilde av den fullførte kategorisyn:
La oss nå trene kontrolleren til brukere, noe som er veldig lik kategorikontrolleren.
Opprett en kontroller for brukervisningen
Kontrolleren for brukervisningen er veldig lik den for kategorier. Vi begynner med å endre rutekonfigurasjonen for å koble kontrolleren med malen:
De UserListing kontrolleren tar $ routeParams og brukere tjenester som avhengigheter. Bruker $ routeParams tjenesten, får den tilgang til bruker-IDen i nettadressen. De brukere tjenesten brukes da til å hente brukerobjektet med bruker-ID. De brukerinformasjon variabel holder brukerobjektet returnert av serveren.
La oss nå endre visninger / author.html mal for å gjengi denne data til brukeren. Erstatt alt innholdet i author.html fil med følgende:
Om userListing.userInfo.name
UserListing.userInfo.description
Innlegg av userListing.userInfo.name
I koden ovenfor får vi tilgang til brukerinformasjon variabel definert på kontrollerens omfang som inneholder brukerinformasjonsobjektet. Ved å bruke ulike egenskaper til dette brukerobjektet, erstatter vi det hardkodede brukernavnet, brukergranataren og brukerbeskrivelsen.
For å oppgi innleggene som er skrevet av brukeren, bruker vi postListing Direktivet og send det til brukerens ID som verdien av forfatter parameter. Direktivet henter deretter innlegg ved hjelp av innlegg service.
Her er hvordan den fullførte visningen skal se ut:
Den fjerde og siste kontrolleren som trenger å bli jobbet nå, er for den enkle innleggslisningsvisningen, og det gjør vi i følgende avsnitt.
Opprette en kontroller for Single Post View
Utsikten for det enkelte innlegget er litt annerledes enn de andre, da det ikke vil bruke postListing direktivet fordi direktivet bruker en mal som er mer egnet for postlistingssiden. I tillegg vil vi legge til støtte for å vise kommentarer for et enkelt innlegg i fremtiden, så vi må ha en egen mal for et enkelt innlegg i stedet for å bruke samme mal som for postoppføring.
På grunn av de ovennevnte grunnene vil vi bruke innlegg Service manuelt i kontrolleren for et enkelt innlegg for å hente innlegget basert på sluggen.
La oss først gjøre en rask modifikasjon i single post-ruten for å koble kontrolleren og malen:
Så navnet på kontrolleren for et enkelt innlegg vil være SinglePost. Vi vil bruke singlePost søkeord for å referere til det i sin mal.
Nedenfor er koden for kontrolleren erklæring:
/ ** * Controller for Single Post * / quiescentApp.controller ('SinglePost', ['$ routeParams', 'Posts', funksjon ($ routeParams, Posts) var selv = dette; self.postSlug = $ routeParams.slug; self.post = ; Posts.query ('slug': self.postSlug, funksjon (data, overskrifter) self.post = data [0];);]);
I den ovennevnte koden, henter vi først postsluggen ved hjelp av $ routeParams service og lagre det i self.postSlug eiendom på kontrollerens omfang. Da spør vi databasen ved hjelp av innlegg service ved å gi postsporet som et spørringsargument. Dataene som returneres er en matrise som inneholder et enkelt objekt, og vi stiller inn self.post eiendom på omfanget ved hjelp av denne returnerte data. Enkel!
Nå for malen, nedenfor er innholdet i visninger / single.html fil:
SinglePost.post.title.rendered
Ved singlePost.post.quiescent_author_name i category.name $ last? ": ','
Ovennevnte kode er ganske enkel da vi binder ulike egenskaper til postobjektet til forskjellige elementer, akkurat som vi har gjort i de siste avsnittene.
Nedenfor er et skjermbilde av det ferdige enkle innlegget:
Søknaden er nå fullført (ikke helt ennå!) Og gir visninger for postnotering, enkelt innlegg, bruker og kategori sider.
Konklusjon
Her konkluderer vi vår firedelerserie, der vi bygde en front-end drevet av WP REST API og AngularJS. Vi startet ved å analysere kravene og gjennomgå wireframes. Deretter bygget vi et følgesvenn-plugin som gir noen flere felt i standardresponsene som vil være nødvendig i fronten vår.
I de følgende delene startet vi vår AngularJS-applikasjon, dissekerte maler for forskjellige visninger og konfigurert programruting. Vi har også bygget et egendefinert AngularJS-direktiv for postnoteringsfunksjonen som abstrakterer funksjonaliteten for oppføring av innlegg og gir en fleksibel måte for oss å hente et sett med innlegg til forskjellige krav.
I den siste delen av serien konstruerte vi kontroller for postoppføring, enkelt innlegg, kategori og brukervisninger og koblet dem med sine respektive maler gjennom .konfig () delen av søknaden vår.
Søknaden er ikke fullført og kan forbedres på mange måter. Noen ideer er oppført nedenfor:
kommentarer tråd på single postvisning
Ingen innlegg av forfatter melding når det ikke er noe innlegg av brukeren på forfatterprofilsiden
nummerert paginering på postlistingssidene
bedre SEO med AngularJS Single Page Applications
Vi vil prøve å bygge videre på disse funksjonene i fremtidige opplæringsprogrammer. Men for nå forlater jeg det opp til deg å leke med programmet og utvide det med noen fantastiske funksjoner. Pass på å gi en online demo for søknaden i kommentarene som jeg er ivrig etter å lære av leserne mine.
Accentsconagua
Share
