În prezent, este o practică destul de obișnuită când aplicațiile web interacționează între ele folosind API-ul. De exemplu, atunci când cumpărați un bilet de film online, site-ul accesează un API la distanță pentru a verifica informațiile despre cardul dvs. de credit. În această lecție voi arăta cum, folosind AngularJS, se fac cereri HTTP la un API la distanță și se procesează răspunsurile JSON, actualizând vizualizarea.
Ca urmare, trebuie să obținem acest lucru:
Codul proiectului este disponibil pe GitHub. și, de asemenea, puteți vedea demo-ul de lucru pe CodePen.
Structura proiectului
Vom folosi următoarea structură de fișiere și foldere în proiect:
Fișierul index.html va conține vizualizarea principală a aplicației. Practic, totul este standard aici, dar să aruncăm o privire mai atentă:
După cum puteți vedea, am folosit directiva ng-model pentru a conecta câmpul de introducere (aici utilizatorul va introduce numele filmului) cu modelul de căutare (pe care îl vom declara în controler). De asemenea, am folosit directiva schimbare ng, astfel încât ori de câte ori se modifică conținutul câmpului de intrare, este apelată funcția change () din controler. Această funcție va fi responsabilă pentru inițierea interacțiunii cu API-ul la distanță. Blocurile principale de informare și rezultatele asociate vor fi utilizate pentru a afișa informații despre filmul curent și o listă a filmelor aferente. Informațiile vor fi afișate în șabloanele care vor fi primite, compilate și inserate în vizualizare utilizând directiva ng-include.
Apelarea API pentru a prelua date
Să aruncăm o privire la fișierul app.js - inima aplicației noastre. Transmitem domeniul de aplicare $ și parametrii $ http ca parametri la constructorul controlerului. Astfel, declarăm o dependență de obiectul scopului și de serviciul http.
Când pagina a fost încărcată, modelul de căutare este nedefinit. Prin urmare, am setat valoarea implicită a "Sherlock Holmes" și sunăm metoda de preluare, care interacționează cu API-ul și asigură că inițializarea este afișată.
Apoi, definim metoda de modificare. Va încărca rezultatele atunci când se va modifica valoarea din câmpul de căutare. Vrem ca rezultatele să fie descărcate abia după 800 de milisecunde după ce utilizatorul nu mai scrie. Acest lucru va împiedica apelurile inutile API în aplicație. De asemenea, dorim să vedem rezultatul de îndată ce intrați (fără a apăsa pe Enter sau pe butonul de căutare).
Acum, luați în considerare preluarea funcției. Această funcție face apelul API și procesează răspunsul JSON. Vom folosi în aplicația noastră OMDb API - un serviciu gratuit care vă permite să obțineți informații despre filme. Dacă sunteți interesat de modul în care API funcționează, puteți vedea documentația completă de pe linkul de mai sus.
În aplicațiile de gestionare a succesului, stocăm rezultatele în detaliu și în modelele aferente.
Apoi, uita-te la funcția de actualizare. Se numește când utilizatorul face clic pe titlul filmului conectat în vizualizare. Este nevoie de un obiect (conținând informații despre filmul selectat), setând titlul filmului ca valoare a câmpului de căutare, în timp ce se solicită metoda de schimbare, iar cererea noastră obține informații despre acest film.
În cele din urmă, pentru mai multă ușurință, am adăugat funcția selectare, care se numește atunci când utilizatorul plasează cursorul în câmpul de introducere.
Procesarea răspunsurilor
Acum, să aruncăm o privire la fișierul partials / main-info.html.
Utilizăm directiva ng-if pentru a afișa mesajul "Încărcare rezultate. "Dacă datele nu sunt încă încărcate, verificăm expresia details.Response ===" Adevărat "pentru a vă asigura că API a găsit o potrivire și a returnat rezultatul.
Dacă rezultatul este, vom folosi directiva ng-src pentru a verifica valoarea details.Poster și fie încărcați o imagine, care este în acest domeniu, sau o imagine implicită de afișare în cazul în care imaginea nu este disponibilă.
După aceea, vom afișa restul filmului, inclusiv alte patru linkuri în partea de jos a paginii pe site-uri externe, unde utilizatorul poate obține mai multe informații despre film. Noi afișa aceste link-uri folosind directiva ng-href, deoarece utilizarea de expresie unghiulară în atributul href, iar în cazul în care utilizatorul face clic pe link-ul înainte de substitut angular valorile expresii, totul se rupe.
Acum, uitați-vă la fișierul cu partials / related-results.html.
Aici vom folosi din nou directiva ng-if pentru a verifica dacă a venit răspunsul. Apoi, folosind directiva ng-repeat, trecem prin proprietățile de căutare ale modelului asociat, care conține (cu excepția altor lucruri) o listă cu rezultate de căutare similare.
De asemenea, folosim directiva ng-click pentru a apela metoda controlerului de actualizare făcând clic pe titlul filmului. După cum sa menționat mai sus, această funcție selectează și afișează informații despre noul film.
Sarcini finale
Iată rezultatul!
Rețineți că am ascuns rezultatele similare în demonstrația încorporată datorită lipsei de spațiu. Pentru a le vedea, trebuie doar să te uiți la demo-ul de pe CodePen (în orice caz, este o idee bună, deoarece demo-ul acolo funcționează mai repede).
concluzie
În această lecție am arătat cum, folosind AngularJS, puteți solicita un API la distanță și cum să utilizați legarea datelor pentru a actualiza imediat vizualizarea cu rezultate. Dezvoltarea proiectului este o modalitate excelentă de a învăța limba sau o particularitate a cadrului, așa că vă încurajez să înclinați depozitul și să îmbunătățiți aplicația.
Ați găsit o greșeală? Orphus: Ctrl + Enter
Articole similare
Trimiteți-le prietenilor: