Share
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. 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à.
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. Tuttavia, in questo tutorial, andremo oltre una piccola serie di dati e consentiremo agli utenti di cercare nel database della libreria disponibile da CDNJS.
Ecco l'app che costruiremo:
Nel tutorial introduttivo di questa serie, ho detto che avremmo ottenuto tutti i dati della nostra biblioteca con l'aiuto dell'API CDNJS. Ho anche detto che due componenti della nostra app utilizzerebbero i dati della risposta restituita per mostrare all'utente informazioni utili.
In questo post, scriveremo tutto il codice necessario per accedere alle informazioni sulle diverse librerie in un singolo file chiamato library.service.ts.
Abbiamo creato un file simile in un'altra esercitazione chiamata crea la tua prima app Angolare: archiviazione e accesso ai dati. In quel caso, abbiamo memorizzato i dati localmente all'interno di una matrice e poi abbiamo scritto alcuni metodi all'interno della classe di servizio per accedere alle informazioni da una posizione centrale. Anche stavolta faremo qualcosa di simile.
Accentsconagua
LibraryService ClasseLe cose saranno leggermente diverse rispetto all'ultima volta in cui abbiamo definito una classe di servizio. A quel tempo, i dati sono stati archiviati localmente in modo che potessimo accedervi all'istante. Questa volta, riceveremo i dati da un server, quindi dobbiamo importare un diverso insieme di dipendenze.
Dovremo inoltre modificare i metodi che utilizziamo per accedere ai nostri dati perché queste informazioni non saranno disponibili all'istante questa volta. Tenendo presente queste cose, iniziamo a scrivere il codice per LibraryService.
Importeremo due dipendenze per il nostro LibraryService classe. Il iniettabili dipendenza disponibile all'interno @ Angolare / core ci permetterà di iniettare il nostro LibraryService classe dentro altri componenti che ne hanno bisogno.
Importeremo anche HttpClient a partire dal @ Angolare / component / http. Questa classe iniettabile ci dà accesso a diversi metodi che possono essere usati per fare richieste HTTP. Useremo il ottenere() metodo da questa classe per recuperare tutti i dati della nostra libreria.
Definiremo due metodi all'interno del nostro LibraryService classe che otterrà i dati su una particolare libreria o otterrà un elenco di più librerie. Ecco il codice completo:
import Injectable da '@ angular / core'; importare HttpClient da '@ angular / common / http'; @Injectable () classe di esportazione LibraryService costruttore (http: HttpClient privato) showLibrary (libraryName) const url = 'https://api.cdnjs.com/libraries/' + encodeURI (libraryName); ritorna this.http.get (url) .toPromise (); searchLibraries (searchTerm) const url = 'https://api.cdnjs.com/libraries?search=' + encodeURI (searchTerm) + '& fields = version, description'; ritorna this.http.get (url) .toPromise ();
Dentro il showLibrary () e searchLibraries () metodi, usiamo lo stesso formato per costruire il nostro URL che abbiamo discusso nel precedente tutorial. Per searchLibraries (), otteniamo solo la versione e la descrizione di ogni libreria. Per showLibrary (), non specifichiamo nessun campo particolare, quindi otteniamo tutto, incluso il link alla homepage, il repository, ecc.
Dopo ciò, usiamo il promettere() metodo per convertire il Osservabile restituito dal ottenere() metodo in una promessa. Le promesse ci rendono più facile scrivere codice asincrono. Una volta che una promessa è stata soddisfatta o rifiutata, ti darà un valore di ritorno che può essere utilizzato di conseguenza. Possiamo usare il poi() metodo su una promessa per aggiungere i gestori di adempimenti e respingimenti alla nostra promessa. Questo sarà trattato in un prossimo tutorial in cui impareremo come manipolare i dati restituiti e mostrarli ai nostri utenti.
Non abbiamo creato alcun componente dalla nostra app di ricerca delle biblioteche, ma sappiamo ancora quale componente deve essere mostrato quando.
Per scrivere il nostro codice di instradamento, creeremo un file chiamato app-routing.module.ts e aggiungi il seguente codice al suo interno:
import NgModule da '@ angular / core'; importare RouterModule, Routes da '@ angular / router'; import HomeComponent da './home/home.component'; import LibraryDetailsComponent da './library-details/library-details.component'; import LibraryListComponent da './library-list/library-list.component'; const routes: Routes = [path: ", redirectTo: '/ home', pathMatch: 'full', percorso: 'home', componente: HomeComponent, percorso: 'detail /: library', componente: LibraryDetailsComponent , percorso: 'lista /: ricerca', componente: LibraryListComponent]; @NgModule (importazioni: [RouterModule.forRoot (percorsi)], esporta: [RouterModule]) classe di esportazione AppRoutingModule
Iniziamo importando diverse dipendenze Angolari come altri componenti che creeremo in seguito. Ogni volta che gli utenti visitano un percorso specificato all'interno di itinerari array, renderemo il componente corrispondente per loro.
Il colon (:) presente nel terzo e nel quarto percorso viene utilizzato per indicare che entrambi biblioteca e ricerca sono segnaposti per nomi di librerie e termini di ricerca più specifici. In questo modo, possiamo evitare di definire nuovi percorsi per ogni libreria e utilizzare solo un percorso generale da cui possiamo facilmente estrarre il nome della libreria oi termini di ricerca.
Dopo aver creato il nostro LibraryService classe e implementando la logica di routing, tutto ciò che dobbiamo fare è aggiornare il app.module.ts file. Questo file è utilizzato da Angular per costruire e avviare la nostra app. Se apri questo file, noterai che non è vuoto. Angular ha già importato alcune dipendenze di cui abbiamo bisogno per creare la nostra app. Angular aggiornerà questa app in un secondo momento quando creeremo i nostri componenti utilizzando la CLI angolare. Per ora, inserisci il seguente codice all'interno di app.module.ts file.
importare BrowserModule da '@ angular / platform-browser'; import HttpClientModule da '@ angular / common / http'; import NgModule da '@ angular / core'; importare AppComponent da './app.component'; import LibraryService da './library.service'; import AppRoutingModule da './app-routing.module'; @NgModule (dichiarazioni: [AppComponent], importa: [BrowserModule, HttpClientModule, AppRoutingModule], provider: [LibraryService], bootstrap: [AppComponent]) classe di esportazione AppModule
Devi importare BrowserModule per ogni app Angolare che verrà eseguita nel browser. Importazione HttpClientModule ci dà accesso a HttpClient e altri servizi associati che abbiamo usato all'interno del nostro LibraryService classe per ottenere le informazioni su diverse librerie. Angular ha già importato il AppComponent classe per noi. Ora, dobbiamo solo importare i nostri LibraryService classe e AppRoutingModule che abbiamo definito nella sezione precedente.
Dopo aver importato le dipendenze necessarie, usiamo il @NgModule decoratore che prende un oggetto di metadati per dire ad Angular come compilare e lanciare la nostra applicazione.
Il dichiarazioni array viene utilizzato per specificare tutte le classi di componenti necessarie per la nostra app. Cercando di utilizzare un componente senza elencarlo qui per primo si verificherà un errore. In questo momento, il dichiarazioni l'array contiene solo una singola classe. Una volta generati più componenti utilizzando la CLI Angolare, questi verranno automaticamente aggiunti a questo elenco.
Il importazioni array è usato per specificare tutti i moduli di cui la nostra app ha bisogno. Dovresti solo aggiungere NgModule classi all'interno dell'array delle importazioni. Nel nostro caso, queste classi sono BrowserModule, HttpClientModule, e AppRoutingModule.
Tu usi il fornitori array per consentire all'applicatore delle dipendenze di conoscere diversi servizi di cui la nostra app avrà bisogno. In questo caso, stiamo solo aggiungendo il LibraryService classe dentro la nostra fornitori schieramento.
Abbiamo creato tre file diversi in questo tutorial. Il library.service.ts è usato per definire a LibraryService classe con metodi diversi per ottenere i dati su varie librerie. Il app-routing.module.ts il file viene utilizzato per memorizzare la logica di routing della nostra app. Memorizziamo le informazioni su diversi percorsi e i componenti corrispondenti che devono essere caricati per ogni percorso all'interno di itinerari array. Infine, abbiamo aggiornato il app.module.ts file per includere il LibraryService classe e il AppRoutingModule disponibile per l'intera app.
Nel prossimo tutorial, creerai il HomeComponent per la nostra app Angolare per consentire agli utenti di specificare un termine di ricerca o un nome di libreria. Se c'è qualcosa che vorresti che chiarissi in questo tutorial, fammi sapere nei commenti.
