Creați un App Finder Library în unghiular serviciul de bibliotecă și rutare

Într-una din seriile anterioare de tutorial angular, am acoperit elementele de bază ale sistemului Angular, începând de la instalarea CLI-ului și apoi discutând despre modul de creare a componentelor de bază și implementarea rutei. Consultați articolul meu despre Crearea primului dvs. aplicație angulară: Noțiuni de bază, pentru o actualizare a instalării CLI-ului unghiular și a altor instrumente recomandate pentru a crea cu ușurință o aplicație Angular.

Aplicația de informații despre țară pe care am creat-o în această serie a fost bună pentru a începe cu Angular, dar nu avea câteva caracteristici. De exemplu, am stocat informația pe care am dorit să o afișăm utilizatorilor noștri într-un matrice. Cu toate acestea, în acest tutorial, vom trece dincolo de un set mic de date și lăsăm utilizatorilor să caute baza de date bibliotecă disponibilă de la CDNJS.

Iată aplicația pe care o vom construi:

În tutorialul introductiv al acestei serii, am menționat că vom obține toate datele bibliotecii noastre cu ajutorul API-ului CDNJS. Am menționat, de asemenea, că două componente din aplicația noastră ar folosi datele din răspunsul returnat pentru a afișa utilizatorilor informații utile.

În acest post, vom scrie tot codul necesar pentru a accesa informații despre diferite biblioteci într-un singur fișier numit library.service.ts. 

Am creat un fișier similar într-un alt tutorial numit crearea primei aplicații Angulare: stocarea și accesarea datelor. În acest caz, am stocat datele local într-un matrice și apoi am scris câteva metode în cadrul clasei de servicii pentru a accesa informațiile dintr-o locație centrală. Vom face ceva similar și de data aceasta.

Crearea unui LibraryService Clasă

Lucrurile vor fi puțin diferite de ultima dată când am definit o clasă de servicii. În acel moment, datele au fost stocate local, astfel încât să putem accesa imediat. De data aceasta, vom primi datele de pe un server, deci trebuie să importem un alt set de dependențe.

De asemenea, va trebui să modificăm metodele pe care le folosim pentru a accesa datele noastre, deoarece informațiile nu vor fi disponibile instantaneu de data aceasta. Ținând cont de aceste lucruri, să începem să scriem codul LibraryService.

Vom importa două dependențe pentru noi LibraryService clasă. injectabil dependența disponibilă în interior @ Unghiular / core ne va permite să ne injectăm LibraryService clasa în interiorul altor componente care au nevoie de ea.

De asemenea, vom importa httpclient din @ Unghiular / component / http. Această clasă injectabilă ne oferă acces la diferite metode care pot fi utilizate pentru a face cereri HTTP. Vom folosi obține() din această clasă pentru a prelua toate datele din bibliotecă.

Vom defini două metode în interiorul nostru LibraryService clasa care va primi fie datele despre o anumită bibliotecă, fie o listă cu mai multe biblioteci. Iată codul complet:

import Injectable de la '@ angular / core'; import HttpClient de la '@ angular / common / http'; Clasa de export injectabilă () din clasa de export LibraryService constructor (privat http: HttpClient)  showLibrary (libraryName) const url = 'https://api.cdnjs.com/libraries/' + encodeURI (libraryName); returnați acest.http.get (url) .toPromise ();  căutareLibrări (searchTerm) const url = 'https://api.cdnjs.com/libraries?search=' + encodeURI (searchTerm) + '& fields = versiune, descriere'; returnați acest.http.get (url) .toPromise ();  

În interiorul showLibrary () și searchLibraries () metode, folosim același format pentru a construi adresa URL pe care am discutat-o ​​în tutorialul anterior. Pentru searchLibraries (), primim doar versiunea și descrierea fiecărei biblioteci. Pentru showLibrary (), nu specificăm un anumit domeniu, astfel încât să obținem totul, inclusiv linkul către pagina de pornire, depozit etc..

Apoi, folosim a promite() - metoda de conversie Observabil returnat de către obține() metoda într-o promisiune. Promisiunile ne fac mai ușor să scriem cod asincron. Odată ce o promisiune a fost îndeplinită sau respinsă, aceasta vă va oferi o valoare de returnare care poate fi folosită în consecință. Putem folosi atunci() metodă pe o promisiune de a adăuga persoane care îndeplinesc și îndepărtează promisiunile noastre. Acest lucru va fi acoperit într-un tutorial mai târziu, în care vom învăța cum să manipulăm datele returnate și să le arătăm utilizatorilor noștri.

Punerea în aplicare a rutei pentru aplicația noastră

Nu am creat nicio componentă din aplicația noastră de căutare pentru bibliotecă, dar știm încă ce componentă trebuie afișată când.

Pentru a scrie codul de rutare, vom crea un fișier numit app-routing.module.ts și adăugați în el următorul cod:

import NgModule de la '@ angular / core'; import RouterModule, Routes de la '@ unghiular / router'; import HomeComponent de la "./home/home.component"; import LibraryDetailsComponent de la "./library-details/library-details.component"; import LibraryListComponent din "./library-list/library-list.component"; const: path: ', redirectTo:' / home ', pathMatch:' full ', path:' home ', component: HomeComponent, path:' detail /: library ', component: LibraryDetailsComponent , path: 'list /: search', component: LibraryListComponent]; @NgModule import: [RouterModule.forRoot (trasee)], export: [RouterModule] 

Începem prin a importa dependențe angulare diferite și alte componente pe care le vom crea ulterior. Ori de câte ori utilizatorii vizitează o cale specificată în interiorul rute array, vom face componenta corespunzătoare pentru ei.

Colonul (:) prezent în a treia și a patra cale este folosit pentru a indica că ambele bibliotecă și căutare sunt placeholderi pentru nume de biblioteci mai specifice și termeni de căutare. În acest fel, putem evita să definim noi căi pentru fiecare bibliotecă și să folosim doar o cale generală de la care putem extrage cu ușurință numele bibliotecii sau termenii de căutare.

Actualizarea mesajului app.module.ts Fişier

După ce ne-a creat LibraryService clasa și implementarea logicii de rutare, tot ce trebuie să facem este actualizarea app.module.ts fişier. Acest fișier este folosit de Angular pentru a construi și a porni aplicația noastră. Dacă deschideți acest fișier, veți observa că acesta nu este gol. Angular a importat deja anumite dependențe de care trebuie să creăm aplicația noastră. Angular va actualiza, de asemenea, această aplicație mai târziu atunci când vom crea propriile noastre componente folosind CLI Angular. Pentru moment, introduceți următorul cod în interiorul app.module.ts fişier.

import BrowserModule din '@ unghiular / platform-browser'; import HttpClientModule de la '@ angular / common / http'; import NgModule de la '@ angular / core'; importați AppComponent din "./app.component"; import LibraryService de la "./library.service"; importați AppRoutingModule din "./app-routing.module"; @NgModule (declarații: [AppComponent], importă: [BrowserModule, HttpClientModule, AppRoutingModule], furnizori: [LibraryService], bootstrap: [AppComponent]) 

Trebuie să importați BrowserModule pentru fiecare aplicație unghiulară care va rula în browser. Importul HttpClientModule ne oferă acces httpclient și alte servicii asociate pe care le-am folosit în interiorul nostru LibraryService pentru a obține informații despre diferitele biblioteci. Angular a importat deja AppComponent clasa pentru noi. Acum trebuie să ne importăm LibraryService clasă și AppRoutingModule pe care am definit-o în secțiunea anterioară.

După importarea dependențelor necesare, folosim @NgModule decorator care ia un obiect de metadate pentru a spune Angular cum să compileze și să lanseze aplicația noastră.

declaraţii array este folosit pentru a specifica toate clasele de componente pe care aplicația noastră le va avea nevoie. Încercarea de a utiliza o componentă fără să o înscrieți aici va duce mai întâi la o eroare. Chiar acum, declaraţii array conține doar o singură clasă. Odată ce vom genera mai multe componente utilizând CLI Angular, acestea vor fi adăugate automat în această listă.

importuri array este folosit pentru a specifica toate modulele de care are nevoie aplicația noastră. Trebuie doar să adăugați NgModule clase în matricea importurilor. În cazul nostru, aceste clase sunt BrowserModule, HttpClientModule, și AppRoutingModule.

Folosiți furnizorii de pentru a lăsa injectorul de dependență să știe despre diferitele servicii pe care aplicația noastră le va avea nevoie. În acest caz, adăugăm doar LibraryService clasă în interiorul nostru furnizorii de mulțime.

Gândurile finale

Am creat trei fișiere diferite în acest tutorial. library.service.ts este folosit pentru a defini a LibraryService clasa cu diferite metode pentru a obține datele despre diferite biblioteci. app-routing.module.ts fișierul este utilizat pentru a stoca logica de rutare a aplicației noastre. Stocăm informațiile despre diferite căi și componentele corespunzătoare care trebuie încărcate pentru fiecare cale din interiorul rute matrice. În cele din urmă, am actualizat app.module.ts fișier pentru a include LibraryService clasa și AppRoutingModule disponibil pentru întreaga aplicație.

În următorul tutorial, veți crea HomeComponent pentru aplicația noastră Angulară, care permite utilizatorilor să specifice un termen de căutare sau un nume de bibliotecă. Dacă există ceva pe care doriți să-l clarificați în acest tutorial, spuneți-mi în comentariile.