Il secondo tutorial di questa serie ti ha insegnato come memorizzare i dati all'interno dell'app Angular e accedervi utilizzando una classe di servizio. In questo tutorial, creeremo il HomeComponent per la nostra app Angolare.

La homepage o il HomeComponent che stiamo creando elencherà i primi tre paesi in diverse categorie come popolazione e area. I dati per determinare l'ordine di classificazione saranno presi dal PAESI array che abbiamo creato nel tutorial precedente.

Creazione della classe HomeComponent

Per creare il HomeComponent, cambia la directory nella console nella cartella dell'app ed esegui il seguente comando:

ng genera il componente home

Questo creerà una cartella chiamata home all'interno di src / app cartella con quattro file al suo interno. Per questa app, dobbiamo solo occuparci di tre file nominati home.component.ts, home.component.css, e home.component.html. Il home.component.ts il file conterrà tutta la logica per il componente e i file CSS e HTML controlleranno l'aspetto e la struttura del componente.

Iniziamo modificando il home.component.ts file. Il HomeComponent si suppone che mostri i primi tre paesi più popolati, i tre paesi più grandi ei tre paesi con il più alto PIL immagazzinato nel PAESI schieramento. 

Importeremo entrambi Nazione classe e il CountryService classe che abbiamo creato nell'ultimo tutorial. Importeremo anche Componente e OnInit a partire dal @ Angolare / core. Il OnInit dipendenza fornisce un hook ciclo di vita che viene chiamato subito dopo l'inizializzazione delle proprietà legate ai dati di una direttiva.

Dopo aver importato tutte le dipendenze necessarie, definiremo il nostro decoratore di componenti. Il decoratore di componenti viene utilizzato per fornire le informazioni sui metadati necessarie relative al nostro componente. Imposteremo un valore per il selettore, TemplateURL, e styleUrls all'interno del decoratore. 

Il selettore viene utilizzato per specificare il tag che verrà utilizzato per identificare il nostro componente. Il TemplateURL viene utilizzato per fornire l'URL per il modello da rendere quando Angular incontra il selettore fornito. Il styleUrls la proprietà viene utilizzata per specificare diversi fogli di stile che devono essere applicati al modello specificato. Ecco il codice all'interno home.component.ts fino a questo punto:

import Component, OnInit da '@ angular / core'; importa Paese da '... / Paese'; import CountryService da '... /country.service'; @Component (selector: 'app-home', templateUrl: './home.component.html', styleUrls: ['./home.component.css'])

Ora inizieremo a definire il HomeComponent classe con diverse proprietà e metodi per aiutarci a mostrare i dati del Paese agli utenti. Il HomeComponent la classe avrà tre proprietà differenti, che accetteranno una serie di paesi come valore. Possiamo iniettare una dipendenza nel costruttore del componente specificando un parametro costruttore con il tipo di dipendenza. È così che inietteremo il CountryService classe dentro la nostra HomeComponent. 

Ecco il resto del codice per il home.component.ts file:

classe export HomeComponent implementa OnInit populatedCountries: Country [] = []; largestCountries: Country [] = []; gdpCountries: Country [] = []; costruttore (private countryService: CountryService)  ngOnInit () this.setPopulatedCountries (); this.setLargestCountries (); this.setGDPCountries ();  setPopulatedCountries (): void this.populatedCountries = this.countryService.getPopulatedCountries ();  setLargestCountries (): void this.largestCountries = this.countryService.getLargestCountries ();  setGDPCountries (): void this.gdpCountries = this.countryService.getGDPCountries (); 

Abbiamo creato tre metodi che utilizzano il CountryService classe per ottenere i paesi con la più grande area, la più alta popolazione e il più alto PIL. Gli array restituiti da diversi CountryService i metodi vengono quindi assegnati alle proprietà corrispondenti di HomeComponent classe.

Si dovrebbe notare che tutti questi metodi che impostano il valore di populatedCountries, largestCountries, e gdpCountries sono chiamati all'interno del ngOnInit () metodo in modo che i loro valori possano essere utilizzati non appena viene creato il componente.

Creazione del modello HomeComponent

Dopo aver scritto il codice per HomeComponent classe, è ora di creare il modello HTML per il componente. Dal momento che il codice all'interno home.component.html è principalmente HTML, spiegherò solo le parti specifiche di Angular. Ecco il codice per l'intero file:

 
Tre paesi più popolati
 
  
 
nome del paese
 
country.population | numero
 
Persone
 
  
 
 
Tre paesi più grandi (area)
 
  
 
nome del paese
 
country.area | numero km 2 
 
  
 
 
Paesi con il PIL più alto
 
  
 
nome del paese
 
country.gdp | numero USD
 
  
 
 

Come ho spiegato prima, il populatedCountries, largestCountries, e gdpCountries è stato assegnato un array di Nazione oggetti come valore. Stiamo usando il NgFor direttiva per eseguire il loop su tutti i paesi in un array specifico e mostrare i loro nomi e le rispettive proprietà. Per esempio, * ngFor = "lascia paese di villaggi popolati" loop su tutti gli oggetti del paese all'interno del populatedCountries array e assegna quel valore alla variabile locale nazione. Questa direttiva rende anche il corrispondente un tag e tutti gli altri tag al suo interno per ciascun oggetto del paese all'interno di populatedCountries array. La stessa spiegazione vale per tutti i blocchi di paesi resi ripetendo largestCountries e gdpCountries.

Utilizziamo tubi angolari per formattare correttamente i valori di popolazione, area e PIL per diversi paesi per renderli più leggibili. Una cosa che potresti trovare confusa è la routerLink direttiva che ho usato con tutto il un tag. Ne parleremo più dettagliatamente nell'ultimo tutorial della serie quando scriviamo il codice da attraversare tra diversi componenti o sezioni dell'app. Il valore del routerLink direttiva agisce come un collegamento regolare che incontriamo sui siti web che visitiamo. L'importante differenza è che anziché caricare le pagine, caricheremo i componenti.

Creazione del file CSS per HomeComponent

Infine, puoi scrivere alcuni CSS per rendere il template HTML più presentabile. Ecco il CSS che ho usato per il HomeComponent. Tieni presente che questo CSS deve entrare nel home.component.css file.

body font-family: 'Lato';  h2, h3, h4, p font-family: 'Lato'; margine: 10px;  .country-block p margin-top: 0; margin-bottom: 0;  .country-block h4 margin-bottom: 10px;  h4 position: relativo; font-size: 1.25rem;  .container margin: 0 50px; allineamento del testo: centro;  .country-unit width: 200px; display: blocco in linea; margine: 10px;  br clear: both;  .country-block padding: 30px 0; allineamento del testo: centro; colore bianco; altezza: 150 px; background-color: # 795548; border-radius: 2px;  .country-block: hover background-color: # 9C27B0; cursore: puntatore; colore bianco;  

È importante che il CSS all'interno home.component.css si applica solo agli elementi all'interno del home.component.html file.

Potresti voler renderizzare HomeComponent all'interno della shell dell'applicazione modificando il contenuto di app.component.html file al seguente:

titolo
 

Sfortunatamente, si verificherà il seguente errore quando si tenta di farlo:

Impossibile eseguire il binding a "routerLink" poiché non è una proprietà nota di "a".

Parleremo di più sul routerLink direttiva e come sbarazzarsi di questo errore nel quinto tutorial di questa serie. In questo momento, puoi rimuovere tutte le menzioni di routerLink dal home.component.html file per eseguire la tua applicazione Angolare senza errori. Assicurati di aggiungere nuovamente tutto al file.

Pensieri finali

Se non hai mai creato un'app Angular in precedenza, prendere confidenza con i componenti richiederà del tempo. Per facilità di comprensione, puoi considerare componenti simili a iframe diversi caricati all'interno di una pagina web. Il .ts i file contengono la logica per il componente, proprio come .js i file contengono la logica per gli iframe. 

Il .html i file contengono gli elementi che vuoi rendere in un iframe o all'interno di un componente, e il .css i file contengono regole di stile diverse per questi elementi. Ammetto che questo non è un paragone molto accurato, ma dovrebbe aiutare i principianti a dare un senso ai componenti e alla relazione tra i diversi file di un componente.

Nel prossimo tutorial, creeremo altri due componenti che ti aiuteranno a capire meglio i componenti. Se hai domande sul codice relativo a HomeComponent, per favore fatemelo sapere nei commenti.