În partea anterioară a seriei am lansat aplicația AngularJS, configurarea rutei pentru vizualizări diferite și am construit servicii în jurul rutelor pentru posturi, utilizatori și categorii. Folosind aceste servicii, suntem în sfârșit capabili să preluăm datele de la server pentru a alimenta frontul.
În această parte a seriei, vom lucra pentru a construi o directivă personalizată AngularJS pentru caracteristica postării. În partea curentă a seriei, vom:
să ne prezentăm directivele AngularJS și de ce ar trebui să le creăm
planificați directiva pentru caracteristica postării și argumentele pe care le va lua
creați o direcție personalizată AngularJS pentru postarea împreună cu șablonul
Deci, să începem prin a ne introduce directivele AngularJS și de ce avem nevoie de ele.
Introducerea Directivelor AngularJS
Directivele din AngularJS reprezintă o modalitate de a modifica comportamentul elementelor HTML și de a reutiliza o bucată repetabilă de cod. Ele pot fi folosite pentru a modifica structura unui element HTML și a copiilor săi și, prin urmare, ele reprezintă o modalitate perfectă de a introduce widget-uri UI personalizate.
În timp ce analizăm firmele în prima parte a seriei, am observat că funcția de listări este utilizată în trei vizualizări, și anume:
Afișați postarea
Profilul autorului
Postări în categorii de postări
Deci, în loc să scriem funcții separate pentru a afișa postări pe toate aceste trei pagini, putem crea o direcție AngularJS personalizată care conține logica de afaceri pentru a prelua postări utilizând serviciile create în partea anterioară a acestei serii. În afară de logica de afaceri, această directivă va conține, de asemenea, logica de redare pentru a lista postările în anumite vizualizări. De asemenea, în această directivă este definită funcționalitatea pentru post paginare și pentru preluarea posturilor pe anumite criterii.
Prin urmare, crearea unei directive AngularJS personalizate pentru funcția de postare ne permite să definim funcționalitatea într-un singur loc și acest lucru ne va ușura pe viitor să extindem sau să modificăm această funcție fără a trebui să schimbăm codul în toate cele trei instanțe unde este folosit.
Acestea fiind spuse, să începem să codificăm directiva personalizată pentru caracteristica postării.
Planificarea Directivei Custom AngularJS pentru listare Post
Înainte de a începe să scriem orice cod pentru construirea directivei pentru caracteristica postării, să analizăm funcționalitatea necesară directivei.
La nivelul foarte fundamental, avem nevoie de o directivă pe care am putea să o folosim în opiniile noastre pentru listarea postului, profilul autorului și pagina categoriei. Aceasta înseamnă că vom crea un widget UI personalizat (sau un marker DOM) pe care îl plasăm în codul HTML, iar AngularJS va avea grijă de restul, în funcție de opțiunile pe care le oferim pentru acel exemplu al directivei.
Prin urmare, vom crea un widget personalizat UI identificat prin următoarea etichetă:
Dar, de asemenea, avem nevoie ca această directivă să fie flexibilă, adică să ia argumentele ca input și să acționeze în consecință. Luați în considerare pagina profilului de utilizator în care doriți să apară doar postări aparținând respectivului utilizator sau pagina de categorii în care vor fi afișate postări aparținând acelei categorii. Aceste argumente pot fi furnizate în următoarele două moduri:
În URL ca parametri
Direct de directive ca valoare de atribut
Furnizarea de argumente în URL-ul pare a fi indispensabilă pentru API, deoarece suntem deja familiarizați cu acest lucru. Prin urmare, un utilizator ar putea prelua un set de posturi aparținând unui anumit utilizator în felul următor:
http://127.0.0.1:8080/#/posts?author=1
Funcționalitatea de mai sus poate fi obținută prin utilizarea funcției $ routeParams serviciu furnizat de AngularJS. Aici putem accesa parametrii furnizați de utilizator în URL. Am analizat deja acest lucru în timp ce înregistram rute în partea anterioară a seriei.
În ceea ce privește furnizarea de argumente directe directivei ca valoare de atribut, am putea folosi ceva de genul:
post-args atributul din fragmentul de mai sus preia argumentele pentru recuperarea unui anumit set de postări și în prezent ia ID-ul autorului. Acest atribut poate lua orice număr de argumente pentru preluarea postărilor acceptate de / Wp / v2 / mesaje traseu. Deci, dacă vom prelua un set de posturi create de un utilizator care are un ID de 1 și care aparține unei categorii de ID 10, am putea face ceva de genul:
filtru de [cat] parametrul din codul de mai sus este utilizat pentru a prelua un set de posturi aparținând unei anumite categorii.
Paginarea este, de asemenea, o caracteristică esențială atunci când lucrați cu paginile cu postări. Directiva va gestiona post paginarea, iar această caracteristică va fi condusă de valorile X-WP-Total și X-WP-TotalPages header-urile returnate de server împreună cu organismul de răspuns. Prin urmare, utilizatorul va putea naviga înainte și înapoi între seturile anterioare și următoare de postări.
După ce am hotărât să nu mai vorbim de directiva personalizată pentru listarea pe post, avem acum o bază destul de solidă pentru a începe să scriem codul.
Crearea unei directive personalizate pentru listare postare
Elaborarea unei directive pentru caracteristica postărilor include doi pași:
Creați logica de afaceri pentru preluarea postărilor și manipularea altor lucruri.
Creați o vizualizare de redare pentru ca aceste postări să apară pe pagină.
Logica de afaceri pentru directiva noastră personalizată va fi tratată în declarația directivei. Și pentru redarea datelor pe DOM, vom crea un șablon personalizat pentru listare de postări. Să începem cu declarația directivei.
Declarația de directivă
Directivele din AngularJS pot fi declarate pentru un modul cu următoarea sintaxă:
/ ** * Crearea unei directive personalizate pentru listarea posturilor * / quiescentApp.directive ('postListing', [function () return ;]);
Aici declarăm o directivă privind modulul nostru folosind .directivă() care este disponibilă în modul. Metoda numește directiva drept primul argument, iar acest nume este strâns legat de numele etichetei elementului. Deoarece vrem ca elementul HTML să fie , oferim o reprezentare de tip cămilă a numelui etichetei. Puteți afla mai multe despre acest proces de normalizare efectuat de AngularJS pentru a se potrivi cu numele directivei în documentația oficială.
Se numește notația pe care o folosim în codul de mai sus pentru declararea directivei noastre în condiții de siguranță a injectării de dependență. Și în această notație, oferim o serie de dependențe ca al doilea argument care va fi necesar de directivă. În prezent, nu am definit nicio dependență pentru directiva noastră personalizată. Dar din moment ce avem nevoie de ea Mesaje serviciul de recuperare a posturilor (pe care l-am creat în partea anterioară a seriei) și AngularJS nativ $ routeParams și $ locație serviciile pentru accesarea parametrilor URL și calea curentă, le definim după cum urmează:
/ ** * Crearea unei directive personalizate pentru listarea posturilor * / quiescentApp.directive ('postListing', '$ routeParams', '$ location', 'Posts', functie ($ routeParams, $ location, Posts) return restrict : 'E', domeniul de aplicare: postArgs: '=', link: function ($ scope, $ elem, $ attr) ;]);
Aceste dependențe sunt apoi puse la dispoziția funcției care este definită ca ultimul element al matricei. Această funcție returnează un obiect care conține definiția directivei. În prezent, avem două proprietăți în obiectul definire a directivei, adică. restrânge și legătură.
restrânge opțiunea definește modul în care folosim directiva în codul nostru și pot exista patru valori posibile pentru această opțiune:
A: Pentru utilizarea directivei ca atribut pe un element HTML existent.
E: Pentru utilizarea directivei ca nume de element.
C: Pentru utilizarea directivei ca nume de clasă.
M: Pentru utilizarea directivei ca comentariu HTML.
restrânge poate accepta orice combinație dintre cele patru valori de mai sus.
Deoarece vrem ca directiva noastră să fie un nou element , am setat opțiunea restricție la E. Dacă am fi definit directiva utilizând atributele pe un element HTML existent, atunci am fi putut seta această opțiune A. În acest caz, am putea folosi pentru a defini directiva în codul nostru HTML.
Al doilea domeniu proprietatea este utilizată pentru a modifica domeniul de aplicare a directivei. Implicit, valoarea parametrului domeniu proprietatea este fals, ceea ce înseamnă că domeniul de aplicare al directivei este același cu cel al părintelui. Când îi transmitem un obiect, se creează un domeniu de aplicare izolat pentru directivă și toate datele care trebuie transmise directivei de către părintele său sunt transmise prin atributele HTML. Aceasta este ceea ce facem în codul nostru și atributul pe care îl folosim este post-args, care devine normalizată postArgs.
postArgs proprietate în domeniu obiect poate accepta oricare din următoarele trei valori:
=: Înseamnă că valoarea trecută în atribut ar fi tratată ca un obiect.
@: Înseamnă că valoarea trecută în atribut va fi tratată ca un șir simplu.
&: Înseamnă că valoarea trecută în atributul ar fi tratată ca o funcție.
Deoarece am ales să folosim = valoare, orice valoare care intră în post-args atributul ar fi tratat ca un obiect JSON și am putea folosi obiectul ca argument pentru extragerea posturilor.
A treia proprietate, legătură, este folosit pentru a defini o funcție care este folosită pentru a manipula DOM și pentru a defini API-urile și funcțiile care sunt necesare pentru directivă. Această funcție este în cazul în care toată logica directivei este tratată.
legătură funcția acceptă argumente pentru obiectul de domeniu, elementul HTML al directivei și un obiect pentru atributele definite în elementul HTML al directivei. În prezent, prezentăm două argumente domeniul de aplicare $ și $ elem pentru obiectul de domeniu și respectiv pentru elementul HTML.
Să definim o variabilă pe domeniul de aplicare $ proprietate pe care o vom folosi pentru a face funcția de afișare a postărilor pe DOM.
De aici am definit șase proprietăți pe domeniul de aplicare $ obiect pe care am putea accesa în DOM. Aceste proprietăți sunt:
posturi $: Un matrice pentru menținerea obiectelor post care vor fi returnate de server.
$ postHeaders: Un obiect pentru menținerea anteturilor care vor fi returnate de server împreună cu corpul de răspuns. Vom folosi aceste pentru manipularea navigației.
$ currentPage: O variabilă întreagă care menține numărul paginii curente.
$ previousPage: O variabilă care deține numărul paginii anterioare.
$ Nextpage: O variabilă care deține numărul următor al paginii.
$ routeContext: Pentru a accesa calea curentă utilizând $ locație serviciu.
postArgs proprietatea pe care am definit-o mai devreme pentru atributele HTML va fi deja disponibilă pe domeniul de aplicare $ obiect în interiorul directivei.
Acum suntem gata să adresăm o solicitare serverului folosind Mesaje serviciu pentru recuperarea posturilor. Dar, înainte de aceasta, trebuie să luăm în considerare argumentele furnizate de utilizator ca parametri URL, precum și parametrii prevăzuți în post-args atribut. Și în acest scop, vom crea o funcție care folosește funcția $ routeParams serviciu pentru a extrage parametrii URL și a le îmbina cu argumentele furnizate prin post-args atribut:
prepareQueryArgs () metoda din codul de mai sus utilizează angular.merge () , care extinde $ scope.postArgs obiect cu $ routeParams obiect. Dar înainte de a îmbina aceste două obiecte, mai întâi șterge id proprietate de la $ routeParams obiect folosind șterge operator. Acest lucru este necesar deoarece vom folosi această directivă pentru vizionările categoriei și utilizatorilor și nu vrem ca ID-ul categoriei și al utilizatorilor să fie interpretat în mod fals ca post de identitate.
După ce am pregătit argumentele de interogare, suntem în sfârșit pregătiți să sunăm la server și să preluăm mesajele, iar noi le facem cu Posts.query () , care are două argumente:
Un obiect care conține argumente pentru realizarea interogării.
O funcție de apel invers care se execută după terminarea interogării.
Așa că vom folosi prepareQueryArgs () funcția de pregătire a unui obiect pentru argumentele interogării, iar în funcția de apel invers, setăm valorile anumitor variabile pe domeniul de aplicare $ proprietate:
// a face cererea și posturile de interogare Posts.query (prepareQueryArgs (), funcția (date, anteturi) $ scope.posts = data; $ scope.postHeaders = anteturi (); $ scope.previousPage = (($ scope.currentPage + 1)> $ scope.postHeaders ['x-wp-totalpages']) null: ($ scope.currentPage + 1); $ scope.nextPage = ($ scope.currentPage - 1) scope.currentPage - 1): null;);
Funcția de apel invers devine transmisă două argumente pentru corpul de răspuns și anteturile de răspuns. Acestea sunt reprezentate de date și antete argumentele respective.
antete argument este o funcție care returnează un obiect care conține anteturi de răspuns de către server.
Codul rămas este destul de auto-explicativ, deoarece stabilim valoarea lui $ scope.posts matrice. Pentru setarea valorilor $ scope.previousPage și $ scope.nextPage variabile, folosim x-wp-totalpages proprietate în postHeaders obiect.
Și acum suntem gata să facem aceste date la capătul frontal folosind un șablon personalizat pentru directiva noastră.
Crearea unui șablon personalizat pentru directivă
Ultimul lucru pe care trebuie să-l facem pentru a face ca directiva noastră să funcționeze este să formuleze un șablon separat pentru înregistrarea postului și să îl conecteze la directivă. În acest scop, trebuie să modificăm declarația de directivă și să includem o templateUrl proprietăți precum:
Acest templateUrl proprietatea în codul de mai sus se referă la un fișier numit Directiva-post-listing.html în vizualizari director. Deci, creați acest fișier în vizualizari dosarul și lipiți în următorul cod HTML:
Designul bun este foarte asemănător cu gândirea clară făcută vizuală.
De Bilal Shahid în Citate
Creat zile mai departe. Dominion. Omul sufleteste are un spirit, iar al șaselea pește se plimba și el. Mai întâi de carne de mai sus. Veți completa pentru. Nu se poate seara o lumină nu va. Excelentă de a face fermă imagine. Viața începutul său binecuvântat spiritul de carne mai puțin binecuvântat mările creat inceput verde mare nu poate nu void mișcare. Subdupă seara face spiritul mai mic mai mare toate verdele viu verde arborele ferăstrău arborele un divide în care împărțit se va usca foarte mici văzut, pământ. Lumina lor.
Postări mai vechi Postări mai noi
Acesta este un cod HTML foarte simplu care reprezintă o singură intrare post și paginare post. Am copiat-o de la vizualizari / listing.html fişier. Vom folosi câteva directive AngularJS, inclusiv ng-repeat, ng-href, ng-src, și ng-bind-html, pentru a afișa datele care se află în prezent în domeniul de aplicare $ proprietate a directivei.
Modificați codul HTML la următoarele:
Post.title.rendered
Cu post.quiescent_author_name în category.name $ last? ':', '
Codul de mai sus utilizează ng-repeat directivă pentru a trece prin $ scope.posts matrice. Orice proprietate definită pe domeniul de aplicare $ obiect în declarația directivei este disponibil direct în șablon. Prin urmare, ne referim la $ scope.posts array direct ca posturi în șablon.
Prin utilizarea funcției ng-repeat directive, ne asigurăm că article.post-intrare containerul va fi repetat pentru fiecare post din posturi și fiecare post este denumit post în bucla interioară. Acest post obiect conține date în format JSON returnate de server, care conțin proprietăți precum titlul postului, ID-ul postului, postarea conținutului și link-ul imaginii recomandate, care este un câmp suplimentar adăugat de plugin-ul însoțitor.
În pasul următor, înlocuiți valori precum titlul postului, postlinkul și linkul imaginii recomandate cu proprietățile din post obiect.
Pentru paginare, înlocuiți codul anterior cu următoarele:
Postări mai noi Postări mai vechi
Mai întâi accesăm routeContext proprietate, pe care am definit-o în declarația noastră de directivă, și o sugerez cu ?page = și utilizați valorile pagina următoare și pagina precedentă variabile pentru a naviga înainte și înapoi între posturi. De asemenea, verificăm dacă pagina următoare sau linkul anterior nu sunt nul, altfel adăugăm a .invalid clasa pe butonul furnizat de Fundația Zurb.
Acum că am terminat directiva, este timpul să o testați. Și o facem prin plasarea unui eticheta în HTML, în mod ideal chiar deasupra etichetă. Acest lucru înseamnă că o listare post va apărea deasupra subsolului paginii. Nu vă faceți griji în ceea ce privește formatarea și stilurile, așa cum le vom rezolva în următoarea parte a seriei.
Deci, asta este destul de mult pentru crearea unei directive personalizate AngularJS pentru caracteristica posting listing.
Ce este în continuare?
În partea curentă a seriei despre crearea unui front cu WP REST API și AngularJS, am construit o direcție personalizată AngularJS pentru caracteristica postării. Această directivă utilizează Mesaje serviciu pe care l-am creat în partea anterioară a seriei. De asemenea, directiva introduce informația utilizatorilor sub forma unui atribut HTML și prin parametrii URL.
În partea finală a seriei, vom începe să lucrăm la piesa finală a proiectului nostru, adică controlorii pentru posturi, utilizatori și categorii, precum și șabloanele respective.
Accentsconagua
Share
