Voordat je verder gaat met deze tutorial, is het een goed idee om alles wat we tot nu toe hebben gedaan samen te vatten om verwarring en fouten te voorkomen. Als je een van de stappen van de laatste drie tutorials hebt gemist, is het een goed idee om terug te gaan en de nodige wijzigingen aan te brengen.

In de tweede zelfstudie hebben we drie verschillende bestanden met de naam gemaakt country.ts, country-data.ts, en country.service.ts. De country.ts bestand wordt gebruikt om de land klassendefinitie, zodat we deze in verschillende bestanden kunnen importeren. De country-data.ts bestand wordt gebruikt om een ​​array met de naam op te slaan LANDEN. 

Deze array slaat alle landobjecten op die we in onze app willen weergeven. De country.service.ts bestand wordt gebruikt om een ​​te definiëren CountryService klas met alle methoden die we gaan gebruiken om toegang te krijgen tot de informatie over verschillende landen op één plek. De methoden van de CountryService class worden gebruikt om de toplanden te krijgen op basis van criteria zoals populatie en regio of om informatie te vinden over een land met een bepaalde naam.

In de derde zelfstudie hebben we het HomeComponent voor onze app. Dit gebeurde met behulp van drie verschillende bestanden met de naam home.component.ts, home.component.html, en home.component.css. De home.component.ts bestand bevatte de definitie van de HomeComponent klas met verschillende methoden en eigenschappen om informatie over alle landen te openen en op te slaan. 

De methoden in de HomeComponent klasse vertrouwde op de methoden die zijn gedefinieerd in country.service.ts om alle gegevens te krijgen. De home.component.html bestand wordt gebruikt om de sjabloon op te slaan die zal worden gebruikt bij het weergeven van alle gegevens waartoe toegang wordt verkregen door methoden die zijn gedefinieerd in de home.component.ts het dossier. De home.component.css bestand wordt gebruikt om verschillende stijlregels te bieden die het uiterlijk van verschillende elementen in onze sjabloon bepalen.

In de vierde zelfstudie hebben we nog twee componenten voor onze app gemaakt. Voor de Alle landen component hebben we bestanden met de naam gemaakt all-countries.component.ts, all-countries.component.html, en all-countries.component.css. Voor de CountryDetail component hebben we bestanden met de naam gemaakt country-detail.component.ts, country-detail.component.html, en country-detail.component.css. Net als de HomeComponent, de .ts bestanden bevatten de logica voor onze componenten, de .html bestanden bevatten de sjabloon en de .css bestanden bevatten verschillende regels die werden toegepast op de elementen in de sjabloonbestanden.

In deze zelfstudie zullen we routing in onze app implementeren. Op deze manier kunnen gebruikers gemakkelijk navigeren van de ene naar de andere component.

De toepassingsshell aanpassen

Nu moeten we alleen de shell van de toepassing wijzigen om onze app te laten werken. De app.component.ts bestand blijft precies hetzelfde als in de eerste zelfstudie.

Component importeren vanuit '@ angular / core'; @Component (selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css']) exportklasse AppComponent title = 'Leuke weetjes over landen '; 

We zullen echter wijzigingen aanbrengen in de app.component.html het dossier. Het HTML-bestand zou nu de volgende code moeten hebben:

titel
  

Eerder toonden we alleen de titel van de app. Nu hebben we ook navigatie aan de sjabloon toegevoegd. De routerLink richtlijn wordt gebruikt om koppelingen naar verschillende secties of pagina's van uw app te bieden. Angular bepaalt het onderdeel dat moet worden weergegeven met behulp van de routerLink richtlijn. De positie waar deze componenten worden weergegeven, wordt beheerd met behulp van routerOutlets. De componenten worden weergegeven na de router-uitlaat labels.

Nadat het sjabloonbestand is gemaakt, zullen we de volgende CSS toevoegen app.component.css om de navigatielinks en de kop te stylen:

nav margin: 0px; text-align: center;  h1 font-family: 'Lato'; kleur: # 999; text-align: center;  h2 font-size: 2em; margin-top: 0; padding-top: 0;  nav a padding: 10px; tekstdecoratie: geen; marge: 10px 0px; weergave: inline-block; achtergrondkleur: zwart; kleur wit; grensradius: 5px; font-family: 'Lato';  nav a: hover background-color: grey;  nav a.active color: # 039be5;  

Nu zullen we Angular vertellen welke componenten moeten worden weergegeven voor een bepaalde route of pad. Maak een bestand met de naam app-routing.module.ts binnen in de src / app map en plaats de volgende code erin:

import NgModule uit '@ angular / core'; import RouterModule, Routes vanuit '@ angular / router'; importeer HomeComponent uit './home/home.component'; import AllCountriesComponent uit './all-countries/all-countries.component'; importeer CountryDetailComponent uit './country-detail/country-detail.component'; const routes: Routes = [path: ", redirectTo: '/ home', pathMatch: 'full', path: 'home', component: HomeComponent, path: 'detail /: name', component: CountryDetailComponent , path: 'all-countries', component: AllCountriesComponent]; @NgModule (imports: [RouterModule.forRoot (routes)], exporteert: [RouterModule]) exportklasse AppRoutingModule  

We beginnen met het importeren van alle benodigde afhankelijkheden, inclusief de componenten die we voor verschillende routes willen renderen. Daarna specificeren we verschillende paden en de componenten die moeten worden weergegeven wanneer gebruikers die paden bezoeken. Je kunt ook paden omleiden, zoals we deden voor deze landinformatie-app. Telkens wanneer gebruikers http: // localhost: 4200 / bezoeken, worden ze omgeleid naar http: // localhost: 4200 / home. Houd er rekening mee dat het opgeven van omleidingsroutes vereist dat u een waarde opgeeft voor de pathMatch eigenschap om de router te vertellen hoe deze een URL moet koppelen aan het pad van een route.

Als gebruikers http: // localhost: 4200 / all-countries bezoeken, zullen we renderen AllCountriesComponent na de router-uitlaat tag in de app.component.html bestand om een ​​lijst met alle landen weer te geven.

We hebben de routerLink richtlijn binnen de sjablonen voor AllCountriesComponent net zoals HomeComponent om een ​​link te bieden waarop gebruikers kunnen klikken om meer over elk land te lezen. De waarde van routerLink voor elk land dat binnen die sjablonen wordt gerenderd, volgt het formaat routerLink = "/ detail / country.name". De waarde van de pad eigenschap voor weergave CountryDetailComponent is opgegeven als detail /: naam, de waarde van de routerLink richtlijn in gedachten. De :naam een deel van dat pad wordt gebruikt om de naam van het land te identificeren.

Het bestand app.module.ts bijwerken

Het laatste dat we moeten doen om een ​​volledig functionerende Angular app te hebben, is de update app.module.ts het dossier. Als u dit bestand in een teksteditor opent, merkt u dat alle drie componenten die we met de Angular CLI hebben gegenereerd, al in het bestand zijn geïmporteerd. Voordat we wijzigingen aanbrengen, is uw app.module.ts bestand moet de volgende code hebben:

import BrowserModule vanuit '@ angular / platform-browser'; import NgModule uit '@ angular / core'; importeer AppComponent van './app.component'; import CountryService uit './country.service'; importeer HomeComponent uit './home/home.component'; import AllCountriesComponent uit './all-countries/all-countries.component'; importeer CountryDetailComponent uit './country-detail/country-detail.component'; @NgModule (declarations: [AppComponent, HomeComponent, AllCountriesComponent, CountryDetailComponent], import: [BrowserModule], providers: [CountryService], bootstrap: [AppComponent]) exportklasse AppModule  

Er zijn slechts twee wijzigingen die we moeten aanbrengen in de app.module.ts het dossier. Eerst moeten we het importeren AppRoutingModule klas uit de app-routing.module.ts bestand dat we in het vorige gedeelte hebben gemaakt. Ten tweede, voeg de klasse toe aan de @ NgModule.providers matrix. Na deze wijzigingen, uw app.module.ts bestand zou er zo uit moeten zien.

import BrowserModule vanuit '@ angular / platform-browser'; import NgModule uit '@ angular / core'; importeer AppComponent van './app.component'; import CountryService uit './country.service'; importeer HomeComponent uit './home/home.component'; import AllCountriesComponent uit './all-countries/all-countries.component'; importeer CountryDetailComponent uit './country-detail/country-detail.component'; importeer AppRoutingModule van './app-routing.module'; @ NgModule (declarations: [AppComponent, HomeComponent, AllCountriesComponent, CountryDetailComponent], import: [BrowserModule, AppRoutingModule], providers: [CountryService], bootstrap: [AppComponent]) exportklasse AppModule  

Als u naar uw projectdirectory gaat en de volgende opdracht in de console typt, wordt uw app geladen en weergegeven HomeComponent.

ng serveren - open

U kunt op verschillende landenblokken klikken of op de navigatielinks om verschillende componenten te laden.

Laatste gedachten

In deze serie wilde ik lezers die nog nooit Angular hebben gebruikt, leren hoe ze een eenvoudige Angular-app kunnen maken. De app is pas goed gaan werken nadat we onze laatste zelfstudie hebben voltooid. Dit was opzettelijk omdat ik wilde voorkomen dat ik heen en weer ging tussen dezelfde bestanden die wijzigingen aanbrachten die in latere tutorials moesten worden overschreven. Dit kan erg verwarrend zijn voor een beginner, dus hebben we alle wijzigingen in een bestand in één keer gemaakt.

Voor de praktijk kunt u proberen meer componenten te maken die de informatie over de landen in een ander formaat weergeven. 

Bovendien, als het niet duidelijk is, is JavaScript een van de de facto talen van het web geworden. Het is niet zonder zijn leercurven, en er zijn genoeg kaders en bibliotheken om je bezig te houden, zoals Angular heeft aangetoond in deze tutorial. Als u op zoek bent naar extra middelen om te studeren of om te gebruiken in uw werk, kijk dan wat we beschikbaar hebben op de Envato-markt.

Als u vragen hebt over deze of een andere zelfstudie van de serie, kunt u reageren.