In una delle mie precedenti serie di tutorial Angular, ho trattato i concetti di base di Angular, iniziando dall'installazione della CLI e poi discutendo su come creare componenti di base e implementare il routing. 

L'app per le informazioni sui paesi che abbiamo creato in quella serie è stata buona per iniziare con Angular, ma mancava alcune funzionalità. Ad esempio, abbiamo memorizzato le informazioni che volevamo mostrare ai nostri utenti all'interno di un array. Questo non era un problema perché stavamo solo mostrando le informazioni di alcuni paesi.

In questo tutorial, andremo oltre un piccolo insieme di dati e consentiremo agli utenti di cercare l'intero database della libreria disponibile su CDNJS. Controlla il mio post su Creazione della tua prima app angolare: Nozioni di base, per un aggiornamento sull'installazione della CLI Angolare e altri strumenti consigliati per creare un'app Angolare con facilità.

Nozioni di base dell'API CDNJS

L'API fornita da CDNJS può essere utilizzata per cercare librerie attraverso il loro database o ottenere informazioni su una particolare libreria.

È possibile ottenere tutte le informazioni su una determinata libreria effettuando la seguente richiesta:

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

Qui, nome è il nome della libreria di cui si desidera accedere alle informazioni. Ricorda solo che il nome deve corrispondere esattamente a un nome memorizzato nel database CDNJS. Ad esempio, otterrete informazioni su jQuery impostando il nome su jquery. Allo stesso modo, otterrai informazioni su Chart.js impostando il nome su Chart.js. Come puoi vedere, il nome di una libreria nel database può essere una corrispondenza esatta del nome effettivo della libreria o può avere un caso diverso.

Puoi anche ottenere un elenco di tutte le biblioteche con un termine di ricerca specifico nel loro titolo facendo la seguente richiesta:

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

Per impostazione predefinita, l'elenco di librerie restituite da CDNJS in risposta a questa richiesta conterrà anche tutte le informazioni di ciascuna di queste librerie. Possiamo chiedere a CDNJS di restituire solo determinate informazioni specificando il nome di diversi campi:

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

Ecco un elenco di tutti i campi il cui valore può essere richiesto dal database: versione, descrizione, homepage, parole chiave, licenza, deposito, Aggiornamento automatico, autore, e risorse.

Il seguente esempio della risposta restituita da CDNJS dovrebbe aiutarti a farti un'idea approssimativa di come le informazioni possano essere utilizzate nella nostra app Angular.

La richiesta che abbiamo fatto è:

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

La risposta che abbiamo ricevuto è:

"risultati": ["nome": "sweetalert", "latest": "https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css", "versione" : "1.1.3", "description": "Una bella sostituzione per JavaScript \" alert \ "", "name": "bootstrap-sweetalert", "latest": "https://cdnjs.cloudflare.com /ajax/libs/bootstrap-sweetalert/1.0.1/sweetalert.min.js "," version ":" 1.0.1 "," description ":" Una bella 'sostituzione' per l'avviso di JavaScript ", " nome " : "angular-sweetalert", "latest": "https://cdnjs.cloudflare.com/ajax/libs/angular-sweetalert/1.1.2/SweetAlert.min.js", "version": "1.1.2" , "descrizione": "AngularJS wrapper per SweetAlert", "name": "limonte-sweetalert2", "latest": "https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.13.3 /sweetalert2.min.js "," version ":" 7.13.3 "," description ":" Un sostituto bello, reattivo, personalizzabile e accessibile (WAI-ARIA) per le finestre popup di JavaScript, supporta fork di sweetalert "], "totale": 4

La query di ricerca "avviso dolce" ci ha dato solo quattro risultati. Il numero di risultati restituiti dipenderà dal numero di file con un nome simile. Un sacco di risultati vengono restituiti per jQuery.

Panoramica dell'app Ricerca Biblioteca

Ora che abbiamo coperto le basi dell'API CDNJS, è tempo di darti una panoramica dell'app di ricerca della biblioteca che creeremo.

Il HomeComponent della biblioteca conterrà il titolo della nostra app: Library Finder App in Angular. Conterrà anche due diversi campi di input. Il primo verrà utilizzato per cercare nell'intero database alla ricerca di librerie con la query di ricerca specificata nel loro nome. Il secondo campo di input può essere utilizzato per fornire il nome esatto della libreria che l'utente sta cercando nel database.

Sotto questi due campi, ci sarà una sezione con il nome di librerie popolari all'interno di diverse caselle. Gli utenti potranno fare clic su una di queste caselle per leggere ulteriori informazioni su quella particolare libreria.

Il prossimo componente nella nostra app sarà il LibraryListComponent. Questo componente avrà lo stesso titolo del nostro HomeComponent. Tuttavia, mostrerà un elenco di diverse librerie sotto il titolo. Ogni libreria nell'elenco sarà separata da una linea orizzontale.

Il nome di ogni libreria sarà all'interno di una grande intestazione verde, dopodiché forniremo l'ultima versione e la descrizione di quella libreria. Infine, ci sarà un Vedi più dettagli pulsante che gli utenti possono fare clic se vogliono saperne di più su una particolare libreria.

Finalmente, abbiamo il nostro LibraryDetailsComponent componente, che fornisce agli utenti informazioni su una particolare libreria. Per questa particolare app, sto solo elencando il nome, l'ultima versione, la descrizione e un link alla homepage della biblioteca. Una volta completata questa serie, dovresti provare ad aggiungere più campi in questa pagina e apportare eventuali altre modifiche che ti piacciono.

Creeremo anche un pulsante indietro all'interno di questo componente. Funzionerà come il pulsante indietro dall'app delle informazioni sui paesi che abbiamo creato nella nostra precedente serie Angular.

Impostare le cose

Concluderemo questo tutorial aggiornando i file dei componenti dell'app della nostra app di ricerca delle biblioteche.

Il app.component.html il file avrà un titolo e una presa router per visualizzare tutte le nostre viste instradate.

titolo
 

Il app.component.css il file avrà il CSS necessario per lo stile h1 tag all'interno del app.component.html file.

h1 font-family: 'Raleway'; allineamento del testo: centro; colore: n. 999; font-size: 2.5em;  

Il app.component.ts il file fornisce solo un selettore, l'URL del modello e il percorso del foglio di stile che contiene il CSS per il modello collegato. All'interno della definizione della classe, il app.component.ts il file imposta solo il valore di titolo proprietà.

importare Component da '@ angular / core'; @Component (selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css']) classe di esportazione AppComponent title = 'Library Finder App in Angolare';  

Se non hai mai creato un'app Angular in precedenza, dovresti prima leggere il tutorial di base della mia creazione della tua prima serie di app Angular. Ho spiegato tutto in modo più dettagliato in quel tutorial.

Pensieri finali

Questo tutorial intendeva introdurvi all'API CDNJS che utilizzeremo per creare la nostra app di ricerca delle librerie basata su Angular. Dopo aver trattato le basi della libreria, siamo passati a discutere una bozza della nostra app. 

L'applicazione finder della libreria avrà tre diversi componenti, ognuno dei quali ha il proprio ruolo unico da giocare nell'app. Il HomeComponent consente agli utenti di inserire il nome di qualsiasi biblioteca o un termine di ricerca che possiamo cercare nel database. Il LibraryListComponent elenca tutte le librerie con un determinato termine di ricerca nel titolo. Il LibraryDetailsComponent consente agli utenti di visualizzare maggiori dettagli su qualsiasi libreria che li interessi.

Nel prossimo tutorial, creeremo una classe di servizio per ottenere informazioni su diverse librerie. Se c'è qualcosa che vorresti che chiarissi in questo tutorial, fammi sapere nei commenti!