În partea anterioară a seriei, am construit o direcție personalizată pentru listarea postărilor de pe front. Această directivă ia argumente direct în atributul HTML, precum și în URL-ul pentru a prelua mesaje de pe server. Construirea directivei ne-a permis să arătăm caracteristica postării oriunde în aplicația noastră, reutilizând logica de afaceri și logica de redare furnizată de directivă.
În această parte finală a seriei, vom lucra asupra porțiunii rămase din aplicația noastră și vom crea controlori pentru postarea, postarea, autorul și pagina categoriei. Vom lucra, de asemenea, pe șabloanele acestor controlere și vom afișa pe ele datele furnizate de controlori.
Pentru a fi specific, în partea curentă a seriei, vom:
introduceți-ne în controlerele AngularJS
construi controlere pentru posturi, categorii și utilizatori
link template-uri la datele furnizate de către controlor
Deci, să începem prin a ne introduce în controlerele AngularJS.
Introducerea controlorilor AngularJS
Controlerele din AngularJS sunt unul dintre principalele elemente ale aplicației. Acestea conțin logica de afaceri care decide ce date să fie afișate utilizatorului. Ele conduc o mare parte din funcționalitatea aplicației legate de UI și oferă, de asemenea, suport pentru interacțiunea utilizatorilor.
Controlorii sunt strâns legați de DOM și lipesc modelul aplicației - în cazul în care datele se află - în vizualizarea aplicației.
În cazul nostru, în care construim aplicația propulsată de WP REST API, controlorii sunt în cazul în care vom arăta datele recuperate prin API și diferite servicii către utilizatorul final.
Construirea unui controler pentru afișarea listei postărilor
Controlerele din AngularJS sunt definite în modul și vom folosi aceeași notație a stilului sigur de injecție a dependenței așa cum am făcut-o pentru declararea directivei personalizate. Luați în considerare următorul cod, în care declarăm un controler pentru pagina listării postului:
/ ** * Controler pentru Post Post * / quiescentApp.controller ('PostListing', [function () var self = this;]);
Controlerele sunt definite într - un modul care utilizează .controlor() care este disponibilă în modul. Numele controlerului pe care l-am definit mai sus este PostListing.
Orice date pe care trebuie să le expunem în lumea exterioară ar trebui să fie stabilite pe acest cuvânt cheie din interiorul funcției constructorului controlerului. Prin urmare, am cache-ul acest cuvânt cheie prin crearea unui de sine variabil.
Controlorul pentru înregistrarea posturilor este cel mai simplu dintre toți controlorii pe care îi vom face, în sensul că nu are nevoie de date. Trebuie doar să aibă un șablon legat și vom plasa directive în acest șablon pentru a începe listarea posturilor. Directiva va prelua posturile pe cont propriu folosind Mesaje serviciu și le listați folosind propria logică de redare.
Deci, ca primul pas, vom lega vizualizari / listing.html șablon la PostListing controler, și facem asta în .config () secțiunea a aplicației noastre. .config () secțiunea este locul în care am configurat rutele pentru aplicație și trebuie să modificăm / Wp / v2 / mesaje urmăriți următoarele:
În codul de mai sus, am plasat două proprietăți suplimentare în definirea rutei și aceste proprietăți sunt:
controlor: Numele controlorului trebuie să se leagă de acest traseu și de șablonul său.
controllerAs: Cuvântul cheie prin care ne referim la controlerul din șablonul nostru.
De aici am trecut PostListing ca nume de controler, și vom face referire la acesta în șablon folosind postListing cuvinte cheie.
După ce conectați controlerul cu ruta și șablonul, trebuie să modificăm șablonul pentru a afișa corect postările. Deschide-l vizualizari / listing.html șablon și înlocuiți conținutul cu următorul cod:
Mai jos este o captură de ecran a șablonului completat:
Si asta e! Linia de mai sus indică puterea directivelor AngularJS. Cu o singură linie de cod, am reușit să imităm funcționalitatea postării, care include logica de afaceri și logica de redare. Și vom vedea în continuare cât de flexibilă poate fi această directivă AngularJS atunci când se construiesc controlori pentru categoriile și vizualizările de afișare a utilizatorilor din următoarele secțiuni.
Construirea unui controler pentru vizualizarea categoriei
După ce ne-am familiarizat cu sintaxa de declarație a controlorului și am construit un controler foarte simplu pentru afișarea postărilor, suntem gata să începem să lucrăm la un controler mai avansat pentru vizualizarea categoriilor.
Controlerul de categorii de vizualizare pe care îl construim va folosi $ routeParam serviciu pentru a accesa ID-ul categoriei în URL-ul și folosind acel cod, controlerul va folosi Categorii serviciu pentru a prelua informații despre categorii și o listă a postărilor asociate. Cu toate acestea, controlerul nu va prelua direct posturile utilizând Mesaje serviciu, dar mai degrabă va folosi postListing directivă și să îi transmiteți ID-ul categoriei pentru a obține o listă de postări asociate categoriei respective.
Mai jos este codul pentru CategoryListing controlor:
/ ** * Controler pentru Categorii * / quiescentApp.controller ('CategoryListing', ['$ routeParams', 'Categorii', functie ($ routeParams, Categorii) var self = this; id ': $ routeParams.id, funcția (date, anteturi) self.categoryInfo = date;);]);
CategoryListing controlerul de mai sus are două dependențe pentru $ routeParams serviciul și Categorii servicii personalizate. Utilizarea $ routeParams serviciu, acesta returnează ID-ul categoriei de la adresa URL și apoi interoghează folosind acel ID pentru informațiile de categorie prin Categorii serviciu.
Controlorul are o variabilă definită pe domeniul de aplicare $ obiect numit categoryInfo. Această variabilă deține obiectul categoriei returnat de server și valoarea sa este stabilită după ce interogarea a avut succes.
Următorul lucru pe care trebuie să-l facem este să conectăm un șablon la acest controler care va afișa datele către utilizator. Și facem asta în .config secțiunea a cererii, așa cum am făcut pentru PostListing controler în secțiunea anterioară.
Deci, modificați / Categorii /: id traseu pentru a conține următorul cod:
În codul de mai sus, legăm ruta către CategoryListing controler și, de asemenea, să definească categoryListing cuvânt cheie prin care ne referim la acesta în șablon.
Acum este momentul să modificați vizualizari / category.html astfel încât acesta să afișeze date dinamic în loc să afișeze codul HTML static.
Categorie: categoryListing.categoryInfo.name
În codul de mai sus, am înlocuit numele categoriei greu codate cu CategoryListing.categoryInfo.name, Unde categoryListing este o instanță a CategoryListing controlor. categoryInfo variabila deține obiectul categoriei returnat de server și acest obiect conține Nume proprietate pentru numele categoriei.
Pentru caracteristica postării, folosim postListing directiva și să o transmiteți ID-ul categoriei prin intermediul post-args atribut. În acest scop, folosim filtru[] sintaxă acceptată de / Wp / v2 / mesaje ruta WP REST API. Suntem deja familiarizați cu filtru[] sintaxa din partea a patra a seriei introductive despre WP REST API.
Mai jos este o captură de ecran a vizualizării de categorii completate:
Să lucrăm acum controlerul pentru utilizatori, care este foarte similar cu controlerul categoriilor.
Construirea unui controler pentru vizualizarea utilizatorului
Controlerul pentru vizualizarea utilizatorului este foarte asemănător cu cel al categoriilor. Vom începe prin modificarea configurației de rutare pentru a conecta controlerul cu șablonul:
UserListing controlerul ia $ routeParams și Utilizatori servicii ca dependențe. Utilizarea $ routeParams serviciu, accesează ID-ul de utilizator în URL. Utilizatori serviciul este apoi folosit pentru a prelua obiectul utilizator folosind ID-ul utilizatorului. userinfo variabila deține obiectul utilizator returnat de server.
Să modificăm acum vizualizari / author.html șablon pentru a face aceste date către utilizator. Înlocuiți tot conținutul author.html fișier cu următoarele:
Despre userListing.userInfo.name
UserListing.userInfo.description
Mesaje de la userListing.userInfo.name
În codul de mai sus, accesăm userinfo variabilă definită pe domeniul de aplicare al controlerului care conține obiectul de informare a utilizatorului. Folosind diverse proprietăți ale acestui obiect utilizator, înlocuim numele de utilizator cu greu codat, gravatarul utilizatorului și descrierea utilizatorului.
Pentru listarea posturilor autorizate de utilizator, folosim postListing directivă și să îi comunice ID-ul de utilizator ca valoare a autor parametru. Apoi, directiva aduce mesaje folosind Mesaje serviciu.
Iată ce ar trebui să arate imaginea completă:
Cel de-al patrulea și ultimul controler pe care trebuie să lucrăm acum este pentru vizualizarea unică a postării, și o facem în secțiunea următoare.
Construirea unui controler pentru vizualizarea unică a mesajelor
Viziunea pentru postul unic este puțin diferită de celelalte, deoarece nu va folosi postListing deoarece directiva utilizează un șablon care este mai potrivit pentru pagina de înscriere post. În plus, vom adăuga suport pentru a afișa comentarii pentru o singură postare în viitor, așa că trebuie să avem un șablon separat pentru o singură postare în loc să folosim același șablon ca și pentru listare.
Din cauza motivelor de mai sus, vom folosi Mesaje serviciu manual în controler pentru un singur post pentru a prelua post pe baza de slug sale.
Să facem prima dată o modificare rapidă în ruta unică post pentru a conecta controlerul și șablonul:
/ / un singur mesaj post .when ('/ posts /: slug', templateUrl: 'views / single.html', controler: 'SinglePost', controllerAs: 'singlePost')
Deci, numele controlorului pentru un singur post va fi SinglePost. Vom folosi singlePost cuvânt cheie să se refere la el în șablonul său.
Mai jos este codul pentru declarația operatorului:
/ ** * Controler pentru un singur mesaj * / quiescentApp.controller ('SinglePost', ['$ routeParams', 'Posts', functie ($ routeParams, Posts) var self = this; self.postSlug = $ routeParams.slug; self.post = ; Posts.query ('slug': self.postSlug, funcție (date, titluri) self.post = date [0];);]);
În codul de mai sus, recuperăm mai întâi mesajul post slug folosind $ routeParams serviciu și salvați-l în self.postSlug proprietate asupra domeniului de aplicare al controlorului. Apoi interogăm baza de date folosind Mesaje serviciu oferind post slug ca argument de interogare. Datele returnate sunt o matrice care conține un singur obiect și am setat self.post proprietate asupra domeniului de aplicare utilizând aceste date returnate. Simplu!
Acum pentru șablon, mai jos sunt conținutul vizualizari / single.html fişier:
SinglePost.post.title.rendered
Cu singlePost.post.quiescent_author_name în category.name $ last? ':', '
Codul de mai sus este destul de simplu deoarece legăm diferitele proprietăți ale obiectului post la diferite elemente, așa cum am făcut în ultimele secțiuni.
Mai jos este o captură de ecran a vizualizării postare completă unică:
Aplicația este acum completă (încă nu!) Și oferă vizualizări pentru paginile de postare, postare unică, utilizator și categorie.
Concluzie
Aici încheiem seria noastră cu patru părți, în care am construit un front-end alimentat de WP REST API și AngularJS. Am început să analizăm cerințele și să revizuim schemele de tip wireframes. Apoi am construit un plugin însoțitor care oferă câteva câmpuri suplimentare în răspunsurile standard care vor fi necesare în partea front-end.
În următoarele părți, am pornit aplicația AngularJS, șabloanele disecate pentru vizualizări diferite și configurarea rutei de aplicații. Am construit, de asemenea, o direcție personalizată AngularJS pentru caracteristica postului care abstractează funcționalitatea pentru listarea postărilor și oferă o modalitate flexibilă de a recupera un set de posturi pentru cerințe diferite.
În ultima parte a seriei, am construit controlori pentru afișarea listei postale, a postărilor unice, a categoriilor și a utilizatorilor și le-am legat cu șabloanele respective prin .config () secțiunea a aplicației noastre.
Aplicația nu este completă și poate fi îmbunătățită în multe feluri. Unele idei sunt enumerate mai jos:
comentează firul din afișarea unică a mesajului
Nu există postări de autor când nu există nici o postare de către utilizator pe pagina de profil a autorului
paginare numerotată în paginile cu înscriere postate
mai bine SEO cu AngularJS Single Page Applications
Vom încerca să construim pe aceste trăsături în viitoarele tutoriale. Dar pentru moment, vă las să vă jucați cu aplicația și să o extindeți cu câteva caracteristici minunate. Asigurați-vă că ați furnizat o demonstrație online pentru aplicație în comentarii, pe măsură ce sunt nerăbdătoare să învăț de la cititorii mei.
Accentsconagua
Share
