Share
I den forrige delen av denne serien om å bygge en WordPress-drevet frontend med WP REST API og AngularJS analyserte vi prosjektkrav, vurderte wireframes, lastet ned og samlet HTML-pakken, og bygde companion-plugin for WordPress som modifiserer svar på innlegg og brukere ressurser.
Etter å ha lagt et solid grunnlag for vårt prosjekt, er vi nå klare til å begynne å jobbe på forsiden og sette opp grunnleggende konfigurasjoner for vår søknad med AngularJS.
I den nåværende delen av serien vil vi:
La oss begynne med å initialisere AngularJS-appen og dissekere maler for visninger, inkludert postoppføring, enkelt innlegg og kategorier.
Det første vi må gjøre for å kunne bygge vår WP REST API-drevne applikasjon, er å bootstrap det med ng-app AngularJS-direktivet. De ng-app Direktivet brukes til automatisk oppstart av programmet, og det tar navnet på AngularJS-modulen som en valgfri verdi.
Men før du begynner å endre filer, vær sikker på at du har kjørt gulp kommando ved å navigere inn i hvil-ro-api-html katalogen. Dette vil sikre at eventuelle endringer du gjør i / src katalog blir umiddelbart samlet inn i / dist katalog av gulp klokke kommando. Og i tillegg vil jeg også oppfordre deg til å navigere inn i / dist katalog i et annet konsollvindu og kjør http-serveren kommando som vil kjøre Node.js HTTP-serveren for den katalogen, og du kan forhåndsvise nettstedet ditt i nettleseren ved bare å skrive en webadresse så enkelt som 127.0.0.1:8080.
De ng-app Direktivet plasseres vanligvis i rotelementet, dvs. stikkord. Derfor vil vi endre tag i src / index.html filen til følgende:
Her, quiescentApp er navnet på vår viktigste AngularJS-modul som vi vil initialisere neste i vår src / js / app.js fil.
De src / js / app.js filen inneholder for øyeblikket bare én linje med kode for å initialisere JavaScript-funksjonaliteten fra Zurb Foundation. Vi kan endre denne filen for å inkludere følgende kode for hovedmodulen i vårt AngularJS-program:
Accentsconagua
(funksjon () / ** * Moduldefinisjon for Quiescent App * / var quiescentApp = angular.module ('quiescentApp', ['ngSanitize', 'ngRoute', 'ngResource']);) ();Det første i ovennevnte kode er den selvkrevende anonyme funksjonen som er representert av følgende:
(funksjon () ) ();
Som navnet antyder, er funksjonen ovenfor anonym, det vil si at det ikke har noe navn og det påkaller seg umiddelbart å utføre all koden som er inne i kroppen sin. Det er en god måte å begrense omfanget av våre variabler og funksjoner, slik at de ikke er tilgjengelige globalt for noen manipulasjon.
I den anonyme funksjonen initierer vi vår AngularJS-modul ved hjelp av angular.module () metode. De angular.module () funksjonen tar navnet på modulen som det første argumentet og en rekke avhengigheter som det andre argumentet.
Avhengighetene vi passerte i det andre argumentet som en matrise er ngRoute, ngSanitize, og ngResource. Her er hva hver av dem gjør:
ngRoute: Denne modulen gir ruting og dypkoblingstjenester for vår søknad. Den er funnet i vinkel-route.js fil i AngularJS-pakken som lastet ned fra det offisielle nettstedet.ngResource: Denne modulen gir støtte for samhandling med RESTful tjenester. Siden vi planlegger å bruke WP REST API, blir dette den viktigste modulen i vår søknad, da vi vil bruke denne modulen til å samhandle med ressurser, inkludert innlegg, kategorier og brukere.ngSanitize: Denne modulen gir funksjonalitet for sanitizing HTML. Vi trenger denne modulen når du legger ut HTML på siden. Eksempler inkluderer posttittel, innleggsinnhold og utdrag.Vær oppmerksom på at før de injiserer disse modulene som avhengigheter i hovedmodulen, må de respektive filene være inkludert i HTML-dokumentet. Men du trenger ikke å bekymre deg for det som vi allerede har konfigurert i vår gulp.js fil.
Etter at du har lagt inn koden ovenfor i din app.js fil, gå over til adressen levert av Node.js HTTP-serveren. Åpne også utviklerverktøyene i nettleseren din, og hvis du ikke ser noen JavaScript-feil, er det godt å gå!
Nå som vi har vellykket initialisert vår AngularJS-applikasjon, kan vi jobbe på templerende delen og dissekere maler for forskjellige visninger.
Siden vi bygger en enkelt side-applikasjon (SPA), må vi konfigurere maler for forskjellige visninger som lastes dynamisk inn på siden når noen klikker på en kobling.
Foreløpig har vi flere sider i vår HTML, inkludert de for postnotering, enkelt innlegg, forfatter og kategori. HTML-en er strukturert slik at topptekst, bunntekst og hovedbeholderen er det samme for alle disse sidene. Hovedbeholderen i vårt tilfelle er div.columns.medium-8 inne i div.main.row stikkord. AngularJS lar oss konfigurere forskjellige maler for ulike ruter i applikasjonen. Men før vi konfigurerer ruting, må vi dissekere disse malene fra eksisterende HTML-filer.
Så i stedet for å bruke fire forskjellige sider for indekssiden, enkelt innlegg, forfatter og kategori, kan vi bruke en hoved HTML-side og la den laste inn maler for forskjellige visninger avhengig av den nåværende ruten.
La oss begynne med å dissekere malen for postnotiseringsvisningen. Åpne opp /src/index.html filen i kodeditoren du ønsker, og kut all koden som er inne i div.columns.medium-8 container. Opprett en ny fil som heter listing.html inne i / src / visninger katalogiser og lim inn koden i den filen.
Denne malen vil fungere som en visning for vår oppføringsside. Vi kan gjenta prosedyren for hver av post-single.html, author.html, og category.html filer. Åpne hver av disse filene i kodeditoren din og kut innholdet i div.columns.medium-8 container og lim dem inn i nye filer opprettet i / src / visninger katalogen. Navnene på malfilene ville være single.html, author.html, og category.html henholdsvis.
Opprett en ny fil i / src / visninger katalog for 404-siden og gi den navnet 404.html. Det trenger ikke å inneholde noe spesielt, men bare den følgende koden:
404 - ingenting funnet
Vi kan nå trygt fjerne /src/post-single.html, /src/author.html, og /src/category.html filer. Vi vil bevare /src/index.html fil, som vil tjene som hovedinngangspunktet for vår søknad.
Det siste vi må gjøre nå er å fortelle AngularJS stedet hvor du skal laste disse malene. Og vi kan gjøre dette ved å legge til ng-syn direktiv i div.columns.medium-8 beholder inne i /src/index.html fil:
De ng-syn Direktivet forteller AngularJS hvor du skal laste inn innholdet i malfiler.
Vi kan også legge til auto-scroll = "true" attributt på div.columns.medium-8 beholder slik at når vi navigerer frem og tilbake mellom visninger, tar nettleseren oss til det punktet hvorfra vi dro.
Gå tilbake til nettleseren din og oppdatere den, og du bør se en side som bare inneholder overskriften og bunnteksten. Dette skyldes at vi ikke har konfigurert rutingen enda. Og det er det vi gjør neste.
Etter å ha opprettet maler for forskjellige visninger i vår søknad, er det på tide å fortelle AngularJS hvordan og når du skal laste disse malene. Til dette formål gir AngularJS en leverandørkomponent som heter $ routeProvider. De $ routeProvider gir oss en metode som kalles .når() som kan brukes til å konfigurere ruter sammen med deres maler og noen andre egenskaper.
Vurder følgende kode:
/ ** * Konfigurere ruter for vår app * / quiescentApp.config (['$ routeProvider', funksjon ($ rute) // post notiserute $ route.when ('/ posts', templateUrl: 'visninger / notering. html ',) // enkelt postrute .when (' / posts /: slug ', templateUrl:' views / single.html ',) // forfatterprofil rute .when (' / users /: id ' templateUrl: 'views / author.html' // kategori profil rute .when ('/ categories /: id', templateUrl: 'views / category.html' // 404 rute .otherwise ( templateUrl: 'views / 404.html');]);Her konfigurerer vi vårt program ved hjelp av .konfig () metode ved injeksjon $ routeProvider i det. Funksjonen tar et argument-$ rute-for $ routeProvider, og så bruker vi den til å konfigurere forskjellige ruter.
De .når() Metoden konfigurerer en ny rute, og det tar to parametere for $ path og $ rute henholdsvis. De $ path argument er en streng som representerer banen som vi konfigurerer ruten for. De $ rute argument er et objekt som inneholder informasjon som maladressen som skal brukes, kontrolleren, kontrolleridentifikatoren osv.
I koden ovenfor har vi konfigurert fire ruter for henholdsvis oppføring, enkelt innlegg, forfatter og kategorivisning. Vi har nettopp tildelt dem deres respektive maladresser, og vi vil konfigurere kontrollerne senere i denne serien når vi bygger dem. Så vi vil gradvis bygge på denne koden fra dette punktet.
I koden ovenfor merker du de navngitte gruppene etterfulgt av et kolon : for enkelt innlegg, forfatter og kategori ruter. Disse er lagret i $ routeParams service og vil bli gjort tilgjengelig for ethvert direktiv eller kontroller som ønsker å bruke dem. Vi vil se nærmere på det, men for nå, tenk bare på dem som steder der en postspor, en bruker-ID eller en kategori-ID, som oppgitt av brukeren i nettadressen, kan nås.
Bortsett fra de fire rutene, har vi konfigurert 404-malen ved å bruke .ellers() metode. Denne metoden forteller AngularJS å omdirigere brukeren til en bestemt mal hvis ingen av de konfigurerte rutene ble matchet.
Du finner mer om AngularJS-rutingstjenesten og dens forskjellige metoder og argumenter i den offisielle dokumentasjonen.
Nå kan du åpne noen av de følgende fire nettadressene i nettleseren din, og se at den riktige malen er lastet inn:
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 / # / brukere / 10
Adressen http://127.0.0.1:8080 kan være forskjellig i ditt tilfelle. ID / slugen vi gir her (i dette tilfellet 10) spiller ingen rolle på dette punktet.
Det siste vi må gjøre nå er å skape tjenester for ressurser som innlegg, brukere og kategorier.
AngularJS gir oss med ngResource modul, som lar oss bygge RESTful service rundt et gitt sluttpunkt for en ressurs. Men før vi danner inn noen kode for å skape tjenester, la oss lage noen konfigurasjonsvariabler som lagrer noen grunnleggende opplysninger.
/ ** * Konfigurasjonsvariabler for appen * / var serverPath = 'http: // localhost / wordpress /', apiPath = 'wp-json / wp / v2 /', apiUrl = serverPath + apiPath;
Serverbanen kan være forskjellig i ditt tilfelle, og jeg anbefaler at du endrer det tilsvarende. Ved å deklarere disse variablene kan vi konfigurere serverbanen bare på ett sted i stedet for å skrive det separat for hver tjeneste. Koden ovenfor skal plasseres inne i den anonyme funksjonen, og jeg har plassert den umiddelbart etter min quiescentApp moduldeklarasjon.
Å skape en tjeneste rundt et sluttpunkt i AngularJS er like enkelt som følgende kode:
quiescentApp.factory ('Innlegg', ['$ ressurs', funksjon ($ ressurs) return $ ressurs ('http: // localhost / wordpress / wp-json / wp / v2 / posts');]);Ovennevnte kode skaper en tjeneste rundt innlegg ressurs i WP REST API. Her, quiescentApp er navnet på vår hovedmodul som vi definerte helt i begynnelsen.
De .fabrikk() Metoden tar navnet som det første argumentet, og det andre argumentet er en matrise som inneholder en liste over avhengigheter og en funksjon. Funksjonen aksepterer argumentene som er avlagt som avhengigheter. Siden vi ga $ ressurs Som en avhengighet av vår tjeneste, blir den overført til funksjonen som et argument, og så bruker vi det til å skape en tjeneste for innlegg ressurs.
Vi har allerede erklært en variabel for API-banen, slik at vi kan erstatte banen med følgende:
quiescentApp.factory ('Innlegg', ['$ ressurs', funksjon ($ ressurs) return $ ressurs (apiUrl + 'innlegg');]);Nå som vi har skapt en tjeneste for innlegg ressurs, kan vi injisere denne tjenesten som en avhengighet i våre direktiver og kontrollører og begynne å bruke metodene som Posts.query (), Posts.get (), etc. Vi vil lære mer om disse metodene og hva de gjør i de følgende delene av serien, men hvis du er nysgjerrig, kan du alltid sjekke den offisielle dokumentasjonen.
For å opprette en tjeneste for innlegg ressurs, har vi gitt / WP / v2 / innlegg rute. Denne ruten peker på samlingen av innleggene og kan også brukes til å lage et enkelt innlegg. Men i vår søknad må vi også hente et enkelt innlegg basert på sluggen. For å regne for denne funksjonen kan vi endre koden til følgende:
quiescentApp.factory ('Innlegg', ['$ ressurs', funksjon ($ ressurs) return $ resource (apiUrl + 'innlegg? slug =: slug');]);Dette kalles en parameterisert URL-mal, og parametrene er suffiks ved hjelp av kolon :.
Denne endringen tillater oss å hente en samling innlegg ved hjelp av / WP / v2 / innlegg rute, samt hente et enkelt innlegg av sin slug med / Innlegg? Slug = argument.
Bortsett fra innlegg, vil vi hente kategorier og brukere etter deres ID-er. Så følgende kode skaper tjenester for brukere og kategorier ressurser:
/ ** * Opprette en tjeneste for brukere * / quiescentApp.factory ('Brukere', ['$ ressurs', funksjon ($ ressurs) return $ resource (apiUrl + 'users /: id');]); / ** * Opprette en tjeneste for Kategorier * / quiescentApp.factory ('Kategorier', ['$ ressurs', funksjon ($ ressurs) return $ resource (apiUrl + 'kategorier /: id');]);Derfor er koden for alle tre tjenestene følgende:
/ ** / ** * Opprette en tjeneste for Innlegg * / quiescentApp.factory ('Innlegg', ['$ ressurs', funksjon ($ ressurs) return $ ressurs (apiUrl + 'innlegg? Slug =: slug'); ]); / ** * Opprette en tjeneste for brukere * / quiescentApp.factory ('Brukere', ['$ ressurs', funksjon ($ ressurs) return $ resource (apiUrl + 'users /: id');]); / ** * Opprette en tjeneste for Kategorier * / quiescentApp.factory ('Kategorier', ['$ ressurs', funksjon ($ ressurs) return $ resource (apiUrl + 'kategorier /: id');]);Og vår /src/js/app.js filen ser noe ut som følgende så langt:
(funksjon () / ** * Moduldefinisjon for Quiescent App * / var quiescentApp = angular.module ('quiescentApp', ['ngSanitize', 'ngRoute', 'ngResource')); / ** * Konfigurasjonsvariabler for app * / var serverPath = 'http: // localhost / wordpress /', apiPath = 'wp-json / wp / v2 /', apiUrl = serverPath + apiPath; / ** * Konfigurere ruter for vår app * / quiescentApp.config (['$ routeProvider', funksjon ($ rute) // post oppføringen rute $ route.when ('/ posts', templateUrl: 'views / listing.html',) // enkelt postrute .when / innlegg /: slug ', templateUrl:' views / single.html ',) // forfatterprofil rute .when (' / users /: id ', templateUrl:' views / author.html ',) / / kategori profil rute .when ('/ kategorier /: id', templateUrl: 'views / category.html',) // 404 rute .otherwise (templateUrl: 'views / 404.html');] ); / ** * Opprette en tjeneste for innlegg * / quiescentApp.factory ('Innlegg', ['$ ressurs', funksjon ($ ressurs) return $ ressurs (apiUrl + 'innlegg? Slug =: slug'); ]); / ** * Opprette en tjeneste for brukere * / quiescentApp.factory ('Brukere', ['$ ressurs', funksjon ($ ressurs) return $ resource (apiUrl + 'users /: id'); ]); / ** * Opprette en tjeneste for Kategorier * / quiescentApp.factory ('Kategorier', ['$ ressurs', funksjon ($ ressurs) return $ resource (apiUrl + 'kategorier /: id');]); ) (); $ (Document) .foundation ();De .få() Metoden på en RESTful tjeneste returnerer et enkelt objekt ved å bruke FÅ HTTP-metoden. De .spørsmål() Metoden bruker det samme FÅ HTTP-metoden, men den returnerer en matrise. Det er tre forhåndsdefinerte metoder levert av tjenesten, nemlig .lagre(), .fjerne(), og .delete (), som bruker POST og SLETT metoder. Men vi vil bare håndtere .få() og .spørsmål() metoder i denne serien som vi bare arbeider med å hente data.
Og dette bryter opp vår veiledning for i dag.
I den nåværende opplæringen skrev vi mye JavaScript-kode for oppstart av applikasjonen vår, konfigurering av ruter og oppretting av RESTful tjenester. Vi har også dissekert maler for ulike visninger i vår søknad.
I neste del av serien vil vi bygge et egendefinert AngularJS-direktiv for postnoteringsfunksjonen ved hjelp av innlegg tjenesten vi opprettet. Dette vil gjøre det mulig for oss å inkludere postnoteringsfunksjonen på mange steder uten å gjenta oss selv. Så hold deg oppdatert ...
