Prima di andare avanti con questo tutorial, è una buona idea riassumere tutto ciò che abbiamo fatto finora per evitare confusione ed errori. Se hai perso qualcuno dei passaggi delle ultime tre esercitazioni, è una buona idea tornare indietro e apportare le modifiche necessarie.

Nel secondo tutorial, abbiamo creato tre diversi file chiamati country.ts, country-data.ts, e country.service.ts. Il country.ts il file viene utilizzato per memorizzare il file Nazione definizione della classe in modo che possiamo importarla in file diversi. Il country-data.ts il file è usato per memorizzare un array chiamato PAESI. 

Questo array memorizza tutti gli oggetti Paese che vogliamo visualizzare all'interno della nostra app. Il country.service.ts il file è usato per definire a CountryService classe con tutti i metodi che useremo per accedere alle informazioni su diversi paesi in un unico posto. I metodi del CountryService le classi vengono utilizzate per ottenere i migliori paesi in base a criteri come popolazione e area o trovare informazioni su un paese con un determinato nome.

Nel terzo tutorial, abbiamo creato il HomeComponent per la nostra app. Questo è stato fatto con l'aiuto di tre diversi file chiamati home.component.ts, home.component.html, e home.component.css. Il home.component.ts il file conteneva la definizione di HomeComponent classe con diversi metodi e proprietà per accedere e memorizzare informazioni su tutti i paesi. 

I metodi all'interno di HomeComponent la classe si è basata sui metodi definiti in country.service.ts per ottenere tutti i dati. Il home.component.html il file viene utilizzato per memorizzare il modello che verrà utilizzato quando si visualizzano tutti i dati a cui si accede mediante i metodi definiti nel home.component.ts file. Il home.component.css il file viene utilizzato per fornire regole di stile diverse che controlleranno l'aspetto di diversi elementi all'interno del nostro modello.

Nel quarto tutorial, abbiamo creato altri due componenti per la nostra app. Per il Tutti i paesi componente, abbiamo creato file chiamati tutti-countries.component.ts, all-countries.component.html, e all-countries.component.css. Per il CountryDetail componente, abbiamo creato file chiamati country-detail.component.ts, country-detail.component.html, e country-detail.component.css. Proprio come il HomeComponent, il .ts i file contenevano la logica per i nostri componenti, il .html i file contenevano il modello e il .css i file contenevano regole diverse applicate agli elementi nei file modello.

In questo tutorial, implementeremo il routing nella nostra app. In questo modo, gli utenti saranno in grado di navigare da un componente all'altro con facilità.

Modifica della shell dell'applicazione

Ora, abbiamo solo bisogno di apportare modifiche alla shell dell'applicazione affinché la nostra app inizi a funzionare. Il app.component.ts il file rimarrà esattamente come nel primo tutorial.

importare Component da '@ angular / core'; @Component (selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css']) export class AppComponent title = 'Fun Facts About Countries '; 

Tuttavia, apporteremo modifiche al app.component.html file. Il file HTML dovrebbe ora avere il seguente codice:

titolo
  

In precedenza, stavamo solo mostrando il titolo dell'app. Ora, abbiamo anche aggiunto la navigazione al modello. Il routerLink direttiva viene utilizzata per fornire collegamenti a diverse sezioni o pagine della tua app. Angolare determina il componente che deve essere visualizzato con l'aiuto di routerLink direttiva. La posizione in cui tali componenti sono renderizzati è controllata usando routerOutlets. I componenti sono resi dopo il router-outlet tag.

Dopo aver creato il file modello, aggiungeremo il seguente CSS a app.component.css per modellare i link di navigazione e il titolo:

nav margin: 0px; allineamento del testo: centro;  h1 font-family: 'Lato'; colore: n. 999; allineamento del testo: centro;  h2 font-size: 2em; margin-top: 0; padding-top: 0;  nav a padding: 10px; decorazione del testo: nessuna; margine: 10px 0px; display: blocco in linea; colore di sfondo: nero; colore bianco; border-radius: 5px; font-family: 'Lato';  nav a: hover background-color: gray;  nav a.active color: # 039be5;  

Ora diremo ad Angular quali componenti devono essere resi per una particolare rotta o percorso. Crea un file chiamato app-routing.module.ts dentro il src / app directory e inserire il seguente codice:

import NgModule da '@ angular / core'; importare RouterModule, Routes da '@ angular / router'; import HomeComponent da './home/home.component'; import AllCountriesComponent da './all-countries/all-countries.component'; importare CountryDetailComponent da './country-detail/country-detail.component'; const routes: Routes = [path: ", redirectTo: '/ home', pathMatch: 'full', percorso: 'home', componente: HomeComponent, percorso: 'detail /: name', componente: CountryDetailComponent , percorso: "tutti i paesi", componente: AllCountriesComponent]; @NgModule (importazioni: [RouterModule.forRoot (percorsi)], esportazioni: [RouterModule]) classe di esportazione AppRoutingModule  

Iniziamo importando tutte le dipendenze necessarie, inclusi i componenti che vogliamo rendere per percorsi diversi. Dopodiché, specifichiamo percorsi diversi e i componenti che dovrebbero essere visualizzati quando gli utenti visitano tali percorsi. Puoi anche reindirizzare i percorsi, come abbiamo fatto per questa app di informazioni sui paesi. Ogni volta che gli utenti visitano http: // localhost: 4200 /, verranno reindirizzati a http: // localhost: 4200 / home. Tieni presente che specificare percorsi di reindirizzamento richiede di specificare un valore per pathMatch proprietà per dire al router come deve corrispondere un URL al percorso di qualsiasi percorso.

Se gli utenti visitano http: // localhost: 4200 / all-countries, eseguiremo il rendering AllCountriesComponent dopo il router-outlet tag all'interno del app.component.html file per visualizzare un elenco di tutti i paesi.

Abbiamo usato il routerLink direttiva all'interno dei modelli per AllCountriesComponent così come HomeComponent per fornire un link su cui gli utenti possono fare clic per saperne di più su qualsiasi paese. Il valore di routerLink per ogni paese reso all'interno di tali modelli segue il formato routerLink = "/ dettaglio / country.name". Il valore del sentiero proprietà per il rendering CountryDetailComponent è stato specificato come dettagli /: nome, mantenendo il valore del routerLink direttiva in mente. Il :nome parte in quel percorso è usato per identificare il nome del paese.

Aggiornamento del file app.module.ts

L'ultima cosa che dobbiamo fare per avere un'app Angolare completamente funzionante è aggiornare il app.module.ts file. Se apri questo file in un editor di testo, noterai che tutti e tre i componenti che abbiamo generato utilizzando la CLI Angular sono già stati importati all'interno del file. Prima di apportare modifiche, il tuo app.module.ts il file dovrebbe avere il seguente codice:

importare BrowserModule da '@ angular / platform-browser'; import NgModule da '@ angular / core'; importare AppComponent da './app.component'; importare CountryService da './country.service'; import HomeComponent da './home/home.component'; import AllCountriesComponent da './all-countries/all-countries.component'; importare CountryDetailComponent da './country-detail/country-detail.component'; @NgModule (dichiarazioni: [AppComponent, HomeComponent, AllCountriesComponent, CountryDetailComponent], importa: [BrowserModule], provider: [CountryService], bootstrap: [AppComponent]) classe di esportazione AppModule  

Ci sono solo due cambiamenti che dobbiamo apportare al app.module.ts file. Per prima cosa, dobbiamo importare il AppRoutingModule classe dal app-routing.module.ts file che abbiamo creato nella sezione precedente. In secondo luogo, aggiungi la classe al @ NgModule.providers array. Dopo questi cambiamenti, il tuo app.module.ts il file dovrebbe apparire così.

importare BrowserModule da '@ angular / platform-browser'; import NgModule da '@ angular / core'; importare AppComponent da './app.component'; importare CountryService da './country.service'; import HomeComponent da './home/home.component'; import AllCountriesComponent da './all-countries/all-countries.component'; importare CountryDetailComponent da './country-detail/country-detail.component'; import AppRoutingModule da './app-routing.module'; @NgModule (dichiarazioni: [AppComponent, HomeComponent, AllCountriesComponent, CountryDetailComponent], importa: [BrowserModule, AppRoutingModule], provider: [CountryService], bootstrap: [AppComponent]) classe di esportazione AppModule  

Se ti sposti nella directory del progetto e inserisci il seguente comando nella console, la tua app caricherà e renderizzerà il file HomeComponent.

ng servire --open

È possibile fare clic su vari blocchi di paese o sui collegamenti di navigazione per caricare diversi componenti.

Pensieri finali

In questa serie, volevo insegnare ai lettori che non hanno mai utilizzato Angular prima di come creare un'app Angular di base. L'app ha iniziato a funzionare correttamente solo dopo aver completato il nostro ultimo tutorial. Questo è stato intenzionale perché volevo evitare di spostarti avanti e indietro tra gli stessi file, apportando modifiche che avrebbero bisogno di essere sovrascritte nei tutorial successivi. Questo potrebbe essere molto confuso per un principiante, quindi abbiamo appena apportato tutte le modifiche a un file in una volta.

Per esercitarti, puoi provare a creare più componenti che visualizzano le informazioni sui paesi in un formato diverso. 

Inoltre, se non è chiaro, JavaScript è diventato una delle lingue di fatto del web. Non è senza le sue curve di apprendimento, e ci sono un sacco di framework e librerie per tenerti occupato, come Angular ha dimostrato in questo tutorial. Se stai cercando ulteriori risorse da studiare o da utilizzare nel tuo lavoro, dai un'occhiata a ciò che abbiamo a disposizione nel mercato Envato.

Se avete domande relative a questo o altri tutorial della serie, non esitate a commentare.