Før du går videre med denne opplæringen, er det en god ide å oppsummere alt vi har gjort så langt for å unngå forvirring og feil. Hvis du har gått glipp av noen av trinnene fra de tre siste opplæringen, er det en god ide å gå tilbake og gjøre de nødvendige endringene.

I den andre opplæringen opprettet vi tre forskjellige filer som heter country.ts, country-data.ts, og country.service.ts. De country.ts filen brukes til å lagre Land klasse definisjon slik at vi kan importere den til forskjellige filer. De country-data.ts filen brukes til å lagre en opptatt gruppe LAND. 

Denne gruppen lagrer alle landobjektene vi vil vise i vår app. De country.service.ts filen brukes til å definere a CountryService klasse med alle metodene vi skal bruke for å få tilgang til informasjonen om forskjellige land på ett sted. Metodene til CountryService Klassen brukes til å få de beste landene basert på kriterier som befolkning og område eller finne informasjon om et land med fornavn.

I den tredje opplæringen skapte vi HomeComponent for vår app. Dette ble gjort ved hjelp av tre forskjellige filer som heter home.component.ts, home.component.html, og home.component.css. De home.component.ts filen inneholdt definisjonen av HomeComponent klasse med ulike metoder og egenskaper for å få tilgang til og lagre informasjon om alle land. 

Metodene inne i HomeComponent Klassen stod på metodene som er definert i country.service.ts for å få alle dataene. De home.component.html filen brukes til å lagre malen som vil bli brukt når alle data vises som er tilgjengelige med metoder som er definert i home.component.ts fil. De home.component.css filen brukes til å gi forskjellige stilregler som vil kontrollere utseendet til forskjellige elementer i vår mal.

I den fjerde opplæringen opprettet vi to komponenter til vår app. For Alle land komponent, vi opprettet filer som heter alle-countries.component.ts, all-countries.component.html, og all-countries.component.css. For CountryDetail komponent, vi opprettet filer som heter country-detail.component.ts, country-detail.component.html, og country-detail.component.css. Akkurat som HomeComponent, de .ts Filene inneholdt logikken for våre komponenter, .html filer inneholdt malen, og .css filer inneholdt forskjellige regler som ble brukt på elementene i malfiler.

I denne opplæringen vil vi implementere ruting i vår app. På den måten kan brukerne enkelt navigere fra en komponent til en annen.

Endre applikasjonsskallet

Nå må vi bare gjøre endringer i applikasjonsskallet for appen vår for å begynne å jobbe. De app.component.ts filen vil forbli nøyaktig den samme som den var i den første opplæringen.

importer Komponent fra '@ vinkel / kjerne'; @Component (selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css']) eksportklasse AppComponent title = 'Morsomme fakta om land '; 

Vi vil imidlertid gjøre endringer i app.component.html fil. HTML-filen skal nå ha følgende kode:

tittel
  

Tidligere viste vi bare tittelen på appen. Nå har vi også lagt til navigasjon til malen. De routerLink Direktivet brukes til å gi lenker til ulike seksjoner eller sider i appen din. Angular bestemmer komponenten som den må vise ved hjelp av routerLink direktiv. Plasseringen der komponentene blir gjengitt, styres ved bruk routerOutlets. Komponentene blir gjengitt etter ruter utløp tags.

Etter å ha opprettet malfilen, legger vi til følgende CSS til app.component.css å stile navigasjonslinkene og overskriften:

nav margin: 0px; tekst-align: center;  h1 font-family: 'Lato'; farge: # 999; tekst-align: center;  h2 font-size: 2em; margin-topp: 0; polstring: 0;  nav a padding: 10px; tekst-dekorasjon: ingen; margin: 10px 0px; display: inline-block; bakgrunnsfarge: svart; farge: hvit; border-radius: 5px; font-familie: 'Lato';  nav a: svever bakgrunns-farge: grå;  nav a.active farge: # 039be5;  

Nå skal vi fortelle Angular hvilke komponenter som skal gjengis for en bestemt rute eller vei. Opprett en fil som heter app-routing.module.ts inne i src / app katalog og legg inn følgende kode i den:

importer NgModule fra '@ vinkel / kjerne'; importer RouterModule, Routes fra '@ vinkel / router'; importer HomeComponent fra './home/home.component'; importer AllCountriesComponent fra './all-countries/all-countries.component'; importer CountryDetailComponent fra './country-detail/country-detail.component'; const routes: Ruter = [sti: ", omdirigeringTo: '/ hjem', stiMatch: 'full', sti: 'hjem', komponent: HomeComponent, sti: 'detalj /: navn', komponent: CountryDetailComponent , path: 'all-countries', komponent: AllCountriesComponent]; @NgModule (import: [RouterModule.forRoot (ruter)], eksport: [RouterModule]) eksportklasse AppRoutingModule  

Vi begynner med å importere alle nødvendige avhengigheter, inkludert komponentene som vi vil gjengi for forskjellige ruter. Deretter spesifiserer vi forskjellige baner og komponentene som skal gjengis når brukere besøker disse stiene. Du kan også omdirigere baner, som vi gjorde for denne landet informasjonen app. Når brukere besøker http: // localhost: 4200 /, vil de bli omdirigert til http: // localhost: 4200 / home. Vær oppmerksom på at spesifiserende omdirigeringsruter krever at du spesifiserer en verdi for pathMatch egenskap for å fortelle ruteren hvordan den skal matche en nettadresse til banen til en hvilken som helst rute.

Hvis brukere besøker http: // localhost: 4200 / all-countries, vil vi gjengi AllCountriesComponent etter ruter utløp tag inne i app.component.html fil for å vise en liste over alle land.

Vi har brukt routerLink Direktivet inne i maler for AllCountriesComponent i tillegg til HomeComponent å gi en link som brukere kan klikke på for å lese mer om hvilket som helst land. Verdien av routerLink for hvert land som gjengis i disse malene følger formatet routerLink = "/ detail / country.name". Verdien av sti eiendom for gjengivelse CountryDetailComponent har blitt spesifisert som detalj /: navn, holde verdien av routerLink direktivet i tankene. De :Navn En del i den banen brukes til å identifisere navnet på landet.

Oppdaterer app.module.ts-filen

Det siste vi må gjøre for å få en fullt fungerende Angular app, er oppdateringen app.module.ts fil. Hvis du åpner denne filen i et tekstredigeringsprogram, vil du legge merke til at alle tre komponentene vi genererte ved hjelp av Angular CLI, allerede er importert i filen. Før vi gjør noen endringer, din app.module.ts filen skal ha følgende kode:

importer BrowserModule fra '@ vinkel / plattform-nettleser'; importer NgModule fra '@ vinkel / kjerne'; importer AppComponent fra './app.component'; importer CountryService fra './country.service'; importer HomeComponent fra './home/home.component'; importer AllCountriesComponent fra './all-countries/all-countries.component'; importer CountryDetailComponent fra './country-detail/country-detail.component'; @NgModule (deklarasjoner: [AppComponent, HomeComponent, AllCountriesComponent, CountryDetailComponent], import: [BrowserModule], leverandører: [CountryService], bootstrap: [AppComponent]) eksportklasse AppModule  

Det er bare to endringer som vi må gjøre til app.module.ts fil. Først må vi importere AppRoutingModule klasse fra app-routing.module.ts fil som vi opprettet i forrige seksjon. For det andre, legg til klassen til @ NgModule.providers array. Etter disse endringene, din app.module.ts filen skal se slik ut.

importer BrowserModule fra '@ vinkel / plattform-nettleser'; importer NgModule fra '@ vinkel / kjerne'; importer AppComponent fra './app.component'; importer CountryService fra './country.service'; importer HomeComponent fra './home/home.component'; importer AllCountriesComponent fra './all-countries/all-countries.component'; importer CountryDetailComponent fra './country-detail/country-detail.component'; importer AppRoutingModule fra './app-routing.module'; @NgModule (deklarasjoner: [AppComponent, HomeComponent, AllCountriesComponent, CountryDetailComponent], import: [BrowserModule, AppRoutingModule], leverandører: [CountryService], bootstrap: [AppComponent]) eksportklasse AppModule  

Hvis du flytter til prosjektkatalogen og skriver inn følgende kommando i konsollen, vil appen laste og gjenta HomeComponent.

ng tjene --open

Du kan klikke på forskjellige landblokker eller navigasjonslinkene for å laste inn forskjellige komponenter.

Siste tanker

I denne serien ønsket jeg å lære lesere som aldri har brukt Angular før hvordan å lage en grunnleggende Angular app. Appen begynte å fungere skikkelig bare etter at vi fullførte vår siste opplæring. Dette var forsettlig fordi jeg ønsket å unngå å flytte frem og tilbake mellom de samme filene som gjør endringer som måtte overstyres i senere opplæringsprogrammer. Dette kan være veldig forvirrende for en nybegynner, så vi lagde alle endringene til en fil på en gang.

For øvrig kan du prøve å lage flere komponenter som viser informasjonen om landene i et annet format. 

Videre, hvis det ikke er klart, har JavaScript blitt et av de facto-språkene på nettet. Det er ikke uten sine lærekurver, og det er mange rammer og biblioteker for å holde deg opptatt, som Angular har demonstrert i denne opplæringen. Hvis du leter etter flere ressurser for å studere eller bruke i arbeidet ditt, sjekk ut hva vi har tilgjengelig på Envato Market.

Hvis du har spørsmål relatert til denne eller noen annen opplæring i serien, vær så snill å kommentere.