Share
În partea anterioară a acestei serii despre construirea unui front-end de tip WordPress cu WP REST API și AngularJS, am analizat cerințele de proiect, am evaluat firmele, am descărcat și am compilat pachetul HTML și am construit plugin-ul pentru WordPress, care modifică răspunsurile pentru Mesaje și Utilizatori resurse.
După ce am pus o bază solidă pentru proiectul nostru, suntem gata să începem lucrul la front și să configuram configurații de bază pentru aplicația noastră cu AngularJS.
În partea curentă a seriei, vom:
Să începem prin inițializarea aplicației AngularJS și a șabloanelor de disecare a vederilor, inclusiv postarea, postarea unică și categoriile.
Primul lucru pe care trebuie să-l facem pentru a construi aplicația noastră WP REST API este să o bootstrap cu ng-app Directivă AngularJS. ng-app directiva este utilizată pentru a încărca automat aplicația și ia numele de modul AngularJS ca valoare opțională.
Dar, înainte de a începe modificarea oricăror fișiere, asigurați-vă că ați rulat înghiţitură comanda prin navigarea în Quiescent-odihna-api-html director. Acest lucru va asigura că orice modificări pe care le faceți în / src director sunt imediat compilate în / dist directorul companiei ceas de gulp comanda. Și în plus, vă încurajez și să navigați în / dist director în altă fereastră a consolei și rulați http-server care va rula serverul HTTP Node.js pentru acel director și ați putea previzualiza site-ul în browser doar prin tastarea unei adrese web la fel de simplu ca 127.0.0.1:8080.
ng-app direcția este, de obicei, plasată în elementul rădăcină, adică în etichetă. Prin urmare, vom modifica etichetă în src / index.html fișier la următoarele:
Aici, quiescentApp este numele principalului nostru modul AngularJS pe care îl vom inițializa în continuare src / js / app.js fişier.
src / js / app.js fișierul conține în prezent doar o singură linie de cod pentru inițializarea funcției JavaScript oferită de Zurb Foundation. Putem modifica acest fișier pentru a include următorul cod pentru modulul principal al aplicației noastre AngularJS:
Accentsconagua
(funcția () / ** * Definiția modulului pentru Quiescent App * / var quiescentApp = angular.module ('quiescentApp', 'ngSanitize', 'ngRoute', 'ngResource'));));Primul lucru din codul de mai sus este funcția anonimă invocată de sine, care este reprezentată de următoarele:
(funcția () ) ();
După cum sugerează și numele, funcția de mai sus este anonim, adică nu are nume și se invocă imediat executând tot codul care se află în interiorul corpului său. Este o modalitate bună de a limita domeniul variabilelor și funcțiilor noastre, astfel încât acestea să nu fie accesibile la nivel global pentru orice manipulare.
În interiorul funcției anonime, inițializăm modulul nostru AngularJS folosind angular.module () metodă. angular.module () funcția numește modulul ca primul argument și o serie de dependențe ca al doilea argument.
Dependențele pe care le-am trecut în al doilea argument ca o matrice sunt ngRoute, ngSanitize, și ngResource. Iată ce face fiecare dintre ei:
ngRoute: Acest modul oferă servicii de rutare și de legătură profundă pentru aplicația noastră. Se găsește în unghiulare-route.js fișier din pachetul AngularJS descărcat de pe site-ul oficial.ngResource: Acest modul oferă suport pentru interacțiunea cu serviciile RESTful. Deoarece intenționăm să folosim API-ul WP REST, acesta va fi cel mai important modul din aplicația noastră, deoarece vom folosi acest modul pentru a interacționa cu resursele, inclusiv postările, categoriile și utilizatorii.ngSanitize: Acest modul oferă funcționalități pentru dezinfectarea codului HTML. Vom avea nevoie de acest modul atunci când trimitem HTML pe pagină. Exemplele includ titlul postului, conținutul mesajului și extrasul.Rețineți că, înainte de a injecta aceste module ca dependente în modulul nostru principal, fișierele respective trebuie să fie incluse în documentul HTML. Dar nu trebuie să vă faceți griji în legătură cu acest lucru, așa cum deja am configurat în cadrul nostru gulp.js fişier.
După ce puneți codul de mai sus în memoria dvs. app.js fișier, treceți la adresa furnizată de serverul HTTP Node.js. Deschideți, de asemenea, instrumentele de dezvoltare în browserul dvs. și dacă nu vedeți erori de JavaScript, suntem bine să mergem!
Acum, că am inițializat cu succes aplicația noastră AngularJS, putem lucra pe tematica templantă și putem șterge șabloane pentru diferite viziuni.
Deoarece construim o aplicație pentru o singură pagină (SPA), trebuie să configuram șabloane pentru diferite viziuni care se încarcă dinamic în pagină când cineva face clic pe un link.
În prezent, avem în paginile noastre HTML mai multe pagini, inclusiv cele ale postării, postării, autorului și categoriei. HTML-ul a fost structurat astfel încât antetul, subsolul și containerul principal să fie identice pentru toate aceste pagini. Principalul container în cazul nostru este div.columns.medium-8 în interiorul div.main.row etichetă. AngularJS ne permite să configuram diferite șabloane pentru diferite rute din aplicație. Dar, înainte de a configura configurarea rutei, trebuie să disecăm aceste șabloane din fișierele HTML existente.
Deci, în loc să folosim patru pagini diferite pentru pagina index, pentru o singură postare, pentru autor și pentru categorie, putem utiliza o pagină HTML principală și permiteți încărcarea șabloanelor pentru vizualizări diferite în funcție de ruta curentă.
Să începem prin disecarea șablonului pentru afișarea listei postărilor. Deschideți /src/index.html fișier în editorul de cod la alegerea ta și taie tot codul care este în interiorul div.columns.medium-8 container. Creați un fișier nou numit listing.html în interiorul / src / vizualizări și introduceți codul în acel fișier.
Acest șablon va servi drept vizualizare pentru pagina noastră de înregistrare. Putem repeta procedura pentru fiecare dintre ele post-single.html, author.html, și category.html fișiere. Deschideți fiecare dintre aceste fișiere în editorul de cod și tăiați conținutul div.columns.medium-8 container și le lipiți în fișiere noi create în interiorul / src / vizualizări director. Numele fișierelor șablon ar fi single.html, author.html, și category.html respectiv.
Creați un fișier nou în / src / vizualizări director pentru pagina 404 și denumiți-o 404.html. Nu trebuie să conțină nimic special, ci doar următoarea linie de cod:
404 - Nimic nu a fost găsit
Acum putem elimina în siguranță /src/post-single.html, /src/author.html, și /src/category.html fișiere. Vom păstra /src/index.html fișier, care va servi ca punct principal de intrare pentru aplicația noastră.
Ultimul lucru pe care trebuie să-l facem acum este să-i spuneți AngularJS locul unde să încărcați aceste șabloane. Și putem face acest lucru adăugând ng-view directivă în div.columns.medium-8 container în interiorul /src/index.html fişier:
ng-view directiva spune AngularJS unde să încarce conținutul fișierelor șablon.
De asemenea, putem adăuga parcurg.automată = „true“ atribut pe div.columns.medium-8 astfel încât atunci când navigăm înainte și înapoi între vizualizări, browserul ne va duce la punctul din care am plecat.
Reveniți la browser și actualizați-l și ar trebui să vedeți o pagină care conține numai antetul și subsolul. Acest lucru se datorează faptului că nu am configurat încă rutarea. Și asta vom face în continuare.
După ce am creat șabloane pentru vizualizări diferite în aplicația noastră, este timpul să le spunem AngularJS cum și când să încarce aceste șabloane. În acest scop, AngularJS furnizează o componentă furnizor numită $ routeProvider. $ routeProvider ne oferă o metodă numită .cand() care pot fi utilizate pentru a configura trasee împreună cu șabloanele lor și alte proprietăți.
Luați în considerare următorul cod:
/ ** * Configurarea rutelor pentru aplicația noastră * / quiescentApp.config (['$ routeProvider', funcția ($ route) // postarea rutei $ route.when ('/ posts', templateUrl: 'views / listing. html ', // // rută unică după .when (' / posts /: slug ', templateUrl:' views / single.html ',) // traseul profilului autorului .when (' / users /: id ' templateUrl: 'views / author.html',) // ruta profilului categoriei .when ('/ categories /: id', templateUrl: 'views / category.html',) templateUrl: 'views / 404.html');]);Aici configurem aplicația noastră folosind .config () prin injectare $ routeProvider în ea. Funcția are un argument-$ traseu-pentru $ routeProvider, și apoi îl folosim pentru configurarea diferitelor căi.
.cand() metoda configurează o nouă rută și necesită doi parametri pentru calea de $ si $ traseu respectiv. calea de $ argument este un șir reprezentând calea pentru care configurăm traseul. $ traseu argumentul este un obiect care conține informații precum adresa URL a șablonului care trebuie utilizată, controlerul, identificatorul controlerului, etc.
În codul de mai sus, am configurat patru rute pentru afișarea în funcție de postare, vizionare unică, autor și categorie. Tocmai le-am atribuit adresele URL ale șabloanelor respective, iar noi le vom configura controlorii mai târziu în această serie când le vom construi. Așadar, vom construi progresiv acest cod din acest punct.
În codul de mai sus, notați grupurile numite urmate de un colon : pentru căile unice post, autor și categorie. Acestea sunt stocate în $ routeParams serviciu și va fi pus la dispoziția oricărei directive sau a unui controlor care dorește să le utilizeze. Vom analiza acest lucru în detaliu, dar pentru moment, gândiți-vă doar la ele ca la locurile în care poate fi accesat un post slug, un ID de utilizator sau un ID de categorie, așa cum este furnizat de utilizator în URL-ul.
În afară de cele patru rute, am configurat șablonul 404 utilizând .in caz contrar() metodă. Această metodă îi spune AngularJS să redirecționeze utilizatorul la un anumit șablon dacă niciuna dintre rutele configurate nu a fost potrivită.
Puteți afla mai multe despre serviciul de rutare AngularJS și metodele și argumentele sale diferite în documentația oficială.
Acum puteți deschide oricare dintre următoarele patru adrese URL în browserul dvs. și ar trebui să vedeți șablonul corect încărcat:
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 / # / utilizatori / 10
Adresa http://127.0.0.1:8080 pot fi diferite în cazul dumneavoastră. ID-ul / slug-ul pe care îl furnizăm aici (în acest caz 10) nu contează în acest moment.
Ultimul lucru pe care trebuie să-l facem acum este să creăm servicii pentru resurse cum ar fi postări, utilizatori și categorii.
AngularJS ne oferă ngResource modul care ne permite să construim un serviciu RESTful în jurul unui anumit obiectiv final pentru o resursă. Dar, înainte de a începe să scriem orice cod pentru crearea de servicii, să creăm câteva variabile de configurare care stochează câteva informații de bază.
/ ** * Variabilele de configurare pentru aplicația * / var serverPath = 'http: // localhost / wordpress /', apiPath = 'wp-json / wp / v2 /', apiUrl = serverPath + apiPath;
Calea serverului poate fi diferită în cazul dvs. și vă recomandăm să o modificați în consecință. Declararea acestor variabile ne permite să configuram calea serverului numai într-un singur loc, în loc să îl scriem separat pentru fiecare serviciu. Codul de mai sus ar trebui să fie plasat în interiorul funcției anonime și l-am plasat imediat după mine quiescentApp modul de declarare.
Crearea unui serviciu în jurul unui punct final în AngularJS este la fel de simplă ca și codul următor:
quiescentApp.factory ("Postări", ['$ resource', funcția ($ resource) return $ resource ('http: // localhost / wordpress / wp-json / wp / v2 / posts');Codul de mai sus creează un serviciu în jurul valorii de Mesaje resursă în WP REST API. Aici, quiescentApp este numele modulului nostru principal pe care l-am definit la început.
.fabrică() metoda ia numele ca primul argument, iar al doilea argument este o matrice care conține o listă de dependențe și o funcție. Funcția acceptă argumentele transmise ca dependențe. Din moment ce am oferit resursă $ ca dependență pentru serviciul nostru, este transmis funcției ca argument, iar apoi îl folosim pentru a crea un serviciu pentru Mesaje resursă.
Am declarat deja o variabilă pentru calea API, astfel încât să putem înlocui calea cu următoarele:
quiescentApp.factory ('Posts', '$ resource', function ($ resource) retur $ resource (apiUrl + 'posts');]);Acum, că am creat un serviciu pentru Mesaje resurse, putem injecta acest serviciu ca dependență de directivele și controlorii noștri și să începem să folosim metodele sale Posts.query (), Posts.get (), etc. Vom afla mai multe despre aceste metode și ce fac în următoarele părți ale seriei, dar dacă sunteți curioși, puteți verifica întotdeauna documentația oficială.
Pentru crearea unui serviciu pentru Mesaje resurse, am furnizat / Wp / v2 / mesaje traseu. Această rută indică colectarea postărilor și poate fi utilizată și pentru crearea unei singure postări. Dar, în cererea noastră, trebuie de asemenea să preluăm un singur post bazat pe slugul său. Pentru a gestiona această funcție, putem modifica codul la următoarele:
quiescentApp.factory ("Postări", ['$ resource', funcția ($ resource) return $ resource (apiUrl + 'posts? slug =: slug');]);Acesta este numit șablon de adresare URL parametrizat, iar parametrii sunt sufițiți cu ajutorul colonului :.
Această modificare ne permite să preluăm o colecție de postări utilizând / Wp / v2 / mesaje rută, precum și recuperarea unei singure posturi de către slugul său folosind / Mesaje? Slug = argument.
În afară de postări, vom prelua categorii și utilizatori prin ID-urile lor. Deci, următorul cod creează servicii pentru Utilizatori și Categorii resurse:
/ ** * Crearea unui serviciu pentru utilizatorii * / quiescentApp.factory ('Utilizatori', ['$ resource', function ($ resource) return $ resource (apiUrl + 'users /: id'); / ** * Crearea unui serviciu pentru Categorii * / quiescentApp.factory ('Categorii', '$ resource', function ($ resource) retur $ resource (apiUrl + 'categories /: id');Prin urmare, codul pentru toate cele trei servicii este următorul:
/ ** / ** * Crearea unui serviciu pentru Posts * / quiescentApp.factory ('Posturi', ['$ resource', function ($ resource) return $ resource (apiUrl + 'posts? Slug =: slug'); ]); / ** * Crearea unui serviciu pentru utilizatorii * / quiescentApp.factory ('Utilizatori', ['$ resource', function ($ resource) return $ resource (apiUrl + 'users /: id'); / ** * Crearea unui serviciu pentru Categorii * / quiescentApp.factory ('Categorii', '$ resource', function ($ resource) retur $ resource (apiUrl + 'categories /: id');Și al nostru /src/js/app.js fișierul pare ceva de genul următor:
(funcția () / ** * Definiția modulului pentru Quiescent App * / var quiescentApp = angular.module ('quiescentApp', 'ngSanitize', 'ngRoute', 'ngResource' app * / var serverPath = 'http: // localhost / wordpress /', apiPath = 'wp-json / wp / v2 /', apiUrl = serverPath + apiPath; / ** * Configurarea rutelor pentru aplicația noastră * / quiescentApp.config ('$ route.Provider', funcția ($ route) // postarea rutei $ route.when ('/ posts', templateUrl: 'views / listing.html' (/ users /: id ', templateUrl:' views / author.html ',) / / / / / categoria profilului rutei .when ('/ categories /: id', templateUrl: 'views / category.html',) // 404 route.otherwise templateUrl: 'views / 404.html');] ); / ** * Crearea unui serviciu pentru Posts * / quiescentApp.factory ('Posts', '$ resource', function ($ resource) return $ resource (apiUrl + posts? Slug =: slug ' ] ); /** * Crearea de un serviciu pentru utilizatorii * / quiescentApp.factory ('Utilizatori', ['$ resource', function ($ resource) return $ resource (apiUrl + 'users /: id'); ]); / ** * Crearea unui serviciu pentru Categorii * / quiescentApp.factory ('Categorii', '$ resource', function ($ resource) retur $ resource (apiUrl + 'categories /: id'); ) (); $ (Document) .foundation (); .obține() Metoda pe un serviciu RESTful returnează un singur obiect folosind OBȚINE Metoda HTTP. .query () metoda folosește același lucru OBȚINE Metoda HTTP, dar returnează o matrice. Există încă trei metode predefinite furnizate de serviciu, și anume .Salvați(), .elimina(), și .șterge(), care utilizează POST și ȘTERGE metode. Dar vom rezolva doar problema .obține() și .query () metode din această serie, deoarece avem de-a face doar cu recuperarea datelor.
Și asta îmi împachetează tutorialul astăzi.
În tutorialul curent, am scris o mulțime de cod JavaScript pentru a ne lansa aplicația, configurarea rutelor și crearea serviciilor RESTful. De asemenea, am analizat șabloanele pentru diferite viziuni în aplicația noastră.
În următoarea parte a seriei, vom construi o directivă personalizată AngularJS pentru caracteristica postării prin postare Mesaje serviciul pe care l-am creat. Acest lucru ne va permite să includeți caracteristica postării în multe locații fără a ne repeta. Deci stați liniștit ...
