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 post precedente, abbiamo creato a LibraryService classe per ottenere informazioni su diverse librerie usando l'API CDNJS. Abbiamo anche creato un app-routing.module.ts file per fornire tutta la logica di routing per la nostra app.
Nella logica di routing, potresti aver notato che diciamo ad Angular di rendere il HomeComponent quando gli utenti sono sulla home page della nostra app. Allo stesso modo, diciamo ad Angular di rendere il LibraryListComponent quando gli utenti cliccano su Elenca tutte le librerie pulsante dopo aver digitato qualcosa nel campo di immissione.
In questo tutorial, creeremo questi due componenti per la nostra app Angular. Creeremo il HomeComponent prima e poi crea il LibraryListComponent dopo.
Per creare il HomeComponent file che utilizzano la CLI Angolare, passare alla directory di biblioteca-finder app nella console. Quindi, esegui il seguente comando:
ng genera il componente home
Questo creerà una cartella chiamata casa all'interno della directory root della nostra app finder della libreria. Questa cartella avrà quattro file diversi. Tre di questi file dovrebbero essere nominati home.component.css, home.component.html, e home.component.ts.
Il file HTML conterrà il codice del modello per HomeComponent, e il file CSS conterrà le informazioni di stile per quel modello. Il file TypeScript conterrà la logica del nostro HomeComponent.
Ecco il codice per il home.component.ts file:
importare Component da '@ angular / core'; import LibraryService da '... /library.service'; @Component (selector: 'app-home', templateUrl: './home.component.html', styleUrls: ['./home.component.css']) export class HomeComponent searchTerm = "; libraryName =" ; costruttore (private libraryService: LibraryService) updateTerm (event: any): void this.searchTerm = event.target.value; updateName (event: any): void this.libraryName = event.target.value;
Se leggi la creazione della tua prima serie di app Angolare, potresti aver notato che il HomeComponent abbiamo creato nel secondo tutorial di quella serie che aveva importato il OnInit modulo dal nucleo angolare. Abbiamo anche inizializzato i valori delle diverse proprietà in quella classe all'interno di ngOnInit () metodo.
Questo modulo non è stato importato questa volta perché HomeComponent non sta ottenendo o impostando alcun valore durante l'inizializzazione. Oltre a questo, la maggior parte delle altre cose sono fatte in modo simile.
Iniziamo importando il LibraryService classe che abbiamo creato in precedenza. Dopodiché, impostiamo il valore di selettore, TemplateURL, e styleUrls all'interno del decoratore di componenti. Ricordare che è possibile fornire più fogli di stile per lo stile di un componente, ma solo un singolo file di modello per renderlo.
Dentro il HomeComponent definizione della classe, definiamo due proprietà chiamate termine di ricerca e LibraryName. I valori di entrambe queste proprietà sono impostati su una stringa vuota per impostazione predefinita. Questi valori sono aggiornati all'interno di updateTerm () e UpdateName () metodi quando gli utenti digitano qualcosa nel rispettivo campo di input.
Nostro HomeComponent avrà due campi di input e due link che fungeranno da pulsanti e porteranno gli utenti a percorsi diversi. I campi di input ascolteranno a keyup evento e aggiornare i valori del termine di ricerca e LibraryName proprietà di conseguenza.
I due collegamenti accanto ai campi di input portano gli utenti a percorsi diversi usando il routerLink direttiva. Nel primo caso, gli utenti vanno a / List / searchTerm, e nel secondo caso, vanno a / Detail / LibraryName. Il percorso viene aggiornato dinamicamente in base al valore corrente del campo di input. Ad esempio, il percorso diventa / List / bootstrap quando qualcuno digita bootstrap nel primo campo di input, e diventa / Detail / jquery quando qualcuno digita jquery nel secondo campo di input.
Ecco il codice completo per il nostro home.component.html file:
Elenca tutte le librerie
Mostra dettagli libreria
Biblioteche popolari
jQueryChart.jsSweetAlert
Abbiamo anche creato tre diverse caselle per elencare i nomi di alcune librerie popolari. Gli utenti saranno in grado di visualizzare direttamente i dettagli di queste librerie invece di digitare prima i loro nomi e quindi fare clic su Mostra libreria pulsante.
Tutti questi elementi sono stati avvolti in un contenitore div elemento per raggrupparli insieme per lo styling.
Dopo aver scritto la logica del componente e creato il file modello, non ci resta che aggiornare il file CSS per creare il nostro HomeComponent presentabile.
Ecco il CSS che ho usato per disegnare diversi elementi all'interno del file template. Puoi modificare tutte le regole di stile qui in base alle tue preferenze.
div.wrapper width: 800px; margine: 20px auto; h3 font-size: 1.5em; allineamento del testo: centro; colore: # 666; font-family: 'Lato'; a.simple background: white; colore nero; bordo: 1px solido nero; imbottitura: 5px 10px; font-size: 1.3rem; font-family: 'Lato'; font-weight: 300; border-radius: 5px; decorazione del testo: nessuna; larghezza: 200 px; display: blocco in linea; allineamento del testo: centro; input border: none; border-bottom: 2px solid # 00ccff; font-size: 1.5rem; contorni: nessuno; font-family: 'Lato'; font-weight: 300; margin-right: 100px; larghezza: 450 px; input: focus border-bottom: 2px solid # ccff00; div.library-box font-family: 'Lato'; colore bianco; sfondo: viola; larghezza: 200 px; altezza: 70 px; allineamento del testo: centro; padding-top: 30px; font-size: 2em; border-radius: 4px; display: blocco in linea; margine: 20px; div.library-box: hover background: black; cursore: puntatore;
Tutto nel file CSS è auto-esplicativo. Impostiamo la larghezza del nostro involucro div uguale a un valore fisso di 800 px. Le caselle in basso con i nomi delle librerie popolari cambiano il loro colore di sfondo in nero quando gli utenti passano il mouse sopra di loro.
Come ho detto prima, il LibraryListComponent sarà usato per elencare tutte le librerie che contengono il termine di ricerca estratto dal percorso corrente. È possibile generare rapidamente tutti i file necessari per questo componente eseguendo la seguente istruzione sulla riga di comando:
ng genera la libreria-lista dei componenti
Proprio come il nostro componente di casa, questo comando creerà una cartella chiamata biblioteca-list nella directory principale. Ci saranno quattro file all'interno della cartella, ma dobbiamo preoccuparci solo di tre di essi: biblioteca-list.component.css, biblioteca-list.component.html, e biblioteca-list.component.ts.
Cercheremo di ottenere l'elenco delle librerie relative al termine di ricerca fornito nell'URL non appena viene caricato il componente. Ciò significa che dovremo anche importare OnInit insieme a Componente a partire dal @ Angolare / core.
Importazione ActivatedRoute ci consente di lavorare con tutte le informazioni di un percorso associato al componente attualmente caricato. In questo modo, possiamo facilmente estrarre il termine di ricerca dal percorso corrente. Dopo aver importato diverse dipendenze da Angular, procediamo e importiamo le nostre LibraryService classe.
Come al solito, il componente decoratore memorizza il valore del selettore, dell'URL del modello e dei percorsi del foglio di stile LibraryListComponent.
Dentro il ngOnInit () metodo, chiamiamo il getLibrary () metodo. Il getLibrary () il metodo usa ulteriormente il searchLibraries () metodo da LibraryService per ottenere tutti i nostri risultati. Questi risultati vengono quindi memorizzati all'interno di librerie array dichiarato nella parte superiore della nostra definizione di classe.
Accentsconagua
import Component, OnInit da '@ angular / core'; import ActivatedRoute da '@ angular / router'; import LibraryService da '... /library.service'; @Component (selector: 'app-library-list', templateUrl: './library-list.component.html', styleUrls: ['./library-list.component.css']) classe di esportazione LibraryListComponent implementa OnInit libraries = []; costruttore (route privata: ActivatedRoute, library privatoService: LibraryService) ngOnInit () this.getLibrary (); getLibrary (): void const library: string = this.route.snapshot.paramMap.get ('search'); this.libraryService.searchLibraries (library) .then ((data: any) => data.results.forEach (function (result) this.libraries.push ('name': result.name, 'version': result .version, 'description': result.description);, this);); In questo tutorial, abbiamo creato con successo il HomeComponent della nostra app finder della biblioteca. Ciò consentirà agli utenti di cercare diverse librerie nel database CDNJS. Il HomeComponent non è molto utile da solo. Quindi creeremo altri due componenti chiamati LibraryListComponent e LibraryDetailsComponent.
Abbiamo già aggiornato il file TypeScript per il nostro LibraryListComponent. Aggiorneremo il modello HTML e i file CSS nel prossimo tutorial. Se hai domande relative a questo tutorial, fammelo sapere nei commenti.
