Î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 cum să creați componente de bază și să implementați rutarea. 

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. Aceasta nu a fost o problemă, deoarece prezentam doar informațiile câtorva țări.

În acest tutorial, vom trece dincolo de un set mic de date și lăsăm utilizatorilor să caute întreaga bază de date bibliotecă disponibilă pe CDNJS. 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.

Elementele de bază ale API CDNJS

API-ul furnizat de CDNJS poate fi folosit pentru a căuta biblioteci prin baza lor de date sau pentru a obține informații despre o anumită bibliotecă.

Puteți obține toate informațiile despre o anumită bibliotecă făcând următoarea solicitare:

https://api.cdnjs.com/libraries/[name]

Aici, Nume este numele bibliotecii ale cărei informații doriți să le accesați. Nu uitați că numele trebuie să se potrivească exact cu un nume stocat în baza de date CDNJS. De exemplu, veți obține informații despre jQuery setând numele la jquery. În mod similar, veți obține informații despre Chart.js setând numele la Chart.js. După cum puteți vedea, numele unei biblioteci din baza de date poate fi fie o potrivire exactă a numelui actual al bibliotecii, fie poate avea un caz diferit.

De asemenea, puteți obține o listă a tuturor bibliotecilor cu un anumit termen de căutare în titlul lor, făcând următoarea solicitare:

https://api.cdnjs.com/libraries?search=[query]

În mod implicit, lista de biblioteci returnate de CDNJS ca răspuns la această solicitare va conține, de asemenea, toate informațiile despre fiecare dintre aceste biblioteci. Putem solicita CDNJS să returneze numai anumite informații prin specificarea numelui câmpurilor diferite:

https://api.cdnjs.com/libraries?search=[query]&fields=version,description

Iată o listă a tuturor câmpurilor a căror valoare poate fi solicitată din baza de date: versiune, Descriere, pagina principala, Cuvinte cheie, licență, repertoriu, Actualizare automată, autor, și bunuri.

Următorul exemplu al răspunsului returnat de CDNJS vă va ajuta să obțineți o idee grosolană despre modul în care informațiile pot fi utilizate în aplicația noastră Angulară.

Solicitarea pe care am făcut-o este:

https://api.cdnjs.com/libraries?search=[sweet%20alert]&fields=version,description&output=human

Răspunsul pe care l-am primit înapoi este:

"rezultate": "nume": "sweetalert", "latest": "https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css" : "1.1.3", "descriere": "Un înlocuitor frumos pentru JavaScript", "" name ":" bootstrap-sweetalert "," latest ":" https://cdnjs.cloudflare.com /ajax/libs/bootstrap-sweetalert/1.0.1/sweetalert.min.js "," versiune ":" 1.0.1 "," descriere ":" O înlocuire frumoasă pentru alerta JavaScript ", " name " : "angular-sweetalert", "recent": "https://cdnjs.cloudflare.com/ajax/libs/angular-sweetalert/1.1.2/SweetAlert.min.js", "versiune": "1.1.2" , "descriere": "Învelișul AngularJS pentru SweetAlert", "name": "limonte-sweetalert2", "latest": "https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.13.3 /sweetalert2.min.js "," versiunea ":" 7.13.3 "," descriere ":" Un înlocuitor frumos, receptiv, personalizabil și accesibil (WAI-ARIA) "total": 4

Interogarea de căutare "alertă dulce" ne-a dat doar patru rezultate. Numărul de rezultate returnate va depinde de numărul de fișiere cu un nume similar. O mulțime de rezultate sunt returnate pentru jQuery.

Rezumatul aplicației pentru aplicația de căutare a Bibliotecii

Acum că am acoperit elementele de bază ale API-ului CDNJS, este timpul să vă oferim o imagine de ansamblu a aplicației de găsire a bibliotecii pe care o vom crea.

HomeComponent al bibliotecii va conține titlul aplicației noastre: Aplicația App Finder în Angular. Acesta va conține de asemenea două câmpuri de intrare diferite. Primul va fi folosit pentru a căuta întreaga bază de date care caută biblioteci cu interogarea de căutare dată în numele lor. Al doilea câmp de introducere poate fi utilizat pentru a furniza numele exact al bibliotecii pe care utilizatorul o caută în baza de date.

Sub aceste două câmpuri, va fi o secțiune cu numele bibliotecilor populare din interiorul diferitelor casete. Utilizatorii vor putea să facă clic pe oricare dintre aceste casete pentru a citi mai multe despre biblioteca respectivă.

Următoarea componentă din aplicația noastră va fi LibraryListComponent. Această componentă va avea același titlu ca și al nostru HomeComponent. Cu toate acestea, acesta va afișa o listă de diferite biblioteci sub titlul. Fiecare bibliotecă din listă va fi separată de o linie orizontală.

Numele fiecărei biblioteci se va afla într-o poziție verde mare și apoi vom oferi cea mai recentă versiune și descrierea acelei biblioteci. În cele din urmă, va exista a Consultați mai multe detalii pe care utilizatorii pot face clic dacă doresc să afle mai multe despre o anumită bibliotecă.

În cele din urmă, avem pe noi LibraryDetailsComponent care oferă utilizatorilor informații despre o anumită bibliotecă. Pentru această aplicație particulară, menționez doar numele, ultima versiune, descrierea și un link către pagina de pornire a bibliotecii. Odată ce am terminat această serie, ar trebui să încercați să adăugați mai multe câmpuri pe această pagină și să efectuați orice alte modificări doriți.

Vom crea, de asemenea, un buton înapoi în interiorul acestei componente. Acest lucru va funcționa ca și butonul din spate din aplicația de informații despre țară pe care am creat-o în seria Angular anterioară.

Setarea lucrurilor în sus

Vom încheia acest tutorial prin actualizarea fișierelor componente ale aplicației din aplicația noastră de căutare a bibliotecii.

app.component.html fișierul va avea un titlu și o priză de router pentru a afișa toate vederile noastre direcționate.

titlu
 

app.component.css fișierul va avea CSS necesar pentru a modela h1 eticheta în interiorul app.component.html fişier.

h1 font-family: 'Raleway'; text-align: centru; culoare: # 999; font-size: 2.5;  

app.component.ts fișierul oferă doar un selector, adresa URL a șablonului și calea către foaia de stil care conține CSS pentru șablonul conectat. În interiorul definiției clasei, app.component.ts fișierul stabilește numai valoarea titlu proprietate.

import Component de la '@ angular / core'; @Component (selector: 'app-root', templateUrl:'/app.component.html ', styleUrls: [' ./app.component.css ']) clasa de export AppComponent title =' App Finder Library in unghiulară ";  

Dacă nu ați creat niciodată o aplicație Angular, ar trebui să citiți mai întâi tutorialul de bază al creării primei serii de aplicații Angular. Am explicat totul în detaliu în acest tutorial.

Gândurile finale

Acest tutorial a fost menit să vă prezinte API-ul CDNJS pe care îl vom folosi pentru a crea aplicația de căutare a bibliotecilor bazate pe unghiular. După ce am acoperit elementele de bază ale bibliotecii, am trecut mai departe pentru a discuta despre o schiță grosolană a aplicației noastre. 

Aplicația de căutare a bibliotecii va avea trei componente diferite, fiecare având rolul său unic de jucat în aplicație. HomeComponent permite utilizatorilor să introducă numele oricărei biblioteci sau al unui termen de căutare pe care îl putem căuta în baza de date. LibraryListComponent listează toate bibliotecile cu un anumit termen de căutare în titlul lor. LibraryDetailsComponent permite utilizatorilor să vadă mai multe detalii despre orice bibliotecă care le interesează.

În următorul tutorial, vom crea o clasă de servicii pentru a obține informații despre diferite biblioteci. Dacă există ceva pe care doriți să-l clarificați în acest tutorial, spuneți-mi în comentariile!