Înainte de a merge mai departe cu acest tutorial, este o idee bună să rezumăm tot ceea ce am făcut până acum pentru a evita orice confuzie și erori. Dacă ați ratat oricare dintre pașii din ultimele trei tutoriale, este o idee bună să vă întoarceți și să efectuați modificările necesare.

În cel de-al doilea tutorial, am creat trei fișiere diferite numite country.ts, Country-data.ts, și country.service.ts.  country.ts fișierul este utilizat pentru a stoca Țară pentru a putea fi importate în fișiere diferite. Country-data.ts fișierul este utilizat pentru a stoca un șir denumit ȚĂRI. 

Această matrice stochează toate obiectele țării pe care dorim să le afișăm în aplicația noastră. country.service.ts fișierul este utilizat pentru a defini a CountryService clasa cu toate metodele pe care le vom folosi pentru a accesa informațiile despre diferite țări într-un singur loc. Metodele CountryService clasa sunt folosite pentru a obține țările de vârf pe baza unor criterii precum populația și zona sau pentru a găsi informații despre o țară cu un nume dat.

În al treilea tutorial, am creat HomeComponent pentru aplicația noastră. Acest lucru a fost făcut cu ajutorul a trei fișiere numite home.component.ts, home.component.html, și home.component.css. home.component.ts fișier conținea definiția HomeComponent clasa cu diferite metode și proprietăți pentru a accesa și a stoca informații despre toate țările. 

Metodele din interiorul HomeComponent clasa sa bazat pe metodele definite în country.service.ts pentru a obține toate datele. home.component.html fișierul este utilizat pentru a stoca șablonul care va fi utilizat la afișarea tuturor datelor accesate prin metodele definite în secțiunea home.component.ts fişier. home.component.css fișierul este folosit pentru a oferi reguli de stil diferite care vor controla aspectul diferitelor elemente din interiorul șablonului nostru.

În cel de-al patrulea tutorial, am creat două componente pentru aplicația noastră. Pentru Toate tarile componentă, am creat fișiere numite toate-countries.component.ts, all-countries.component.html, și all-countries.component.css. Pentru CountryDetail componentă, am creat fișiere numite Country-detail.component.ts, țară-detail.component.html, și țară-detail.component.css. La fel ca și HomeComponent, .ts fișiere conțin logica pentru componentele noastre, .html fișierele conținând șablonul și .css fișierele conțin reguli diferite care au fost aplicate elementelor din fișierele șablon.

În acest tutorial, vom implementa rutarea în aplicația noastră. În acest fel, utilizatorii vor putea naviga ușor de la o componentă la alta.

Modificarea Shell-ului aplicației

Acum, trebuie doar să facem modificări în shell-ul aplicației pentru ca aplicația noastră să înceapă să funcționeze. app.component.ts fișierul va rămâne exact la fel ca în primul tutorial.

import Component de la '@ angular / core'; @Component (selector: 'app-root', templateUrl:'/app.component.html ', styleUrls: [' ./app.component.css ']) clasa de export AppComponent title =' Fun Facts About Countries „; 

Cu toate acestea, vom face modificări la app.component.html fişier. Fișierul HTML trebuie să aibă acum următorul cod:

titlu
  

Mai devreme, am afișat doar titlul aplicației. Acum, am adăugat și navigarea în șablon. routerLink directiva este utilizată pentru a furniza linkuri către diferite secțiuni sau pagini ale aplicației dvs. Angular determină componenta pe care este nevoie să o afișeze cu ajutorul funcției routerLink directivă. Poziția în care sunt redate aceste componente este controlată utilizând routerOutlets. Componentele sunt redate după router-ieșire Etichete.

După crearea fișierului șablon, vom adăuga următorul CSS app.component.css pentru stilul legăturilor de navigare și titlul:

nav margine: 0px; text-align: centru;  h1 font-family: "Lato"; culoare: # 999; text-align: centru;  h2 font-size: 2; marginea superioară: 0; padding-top: 0;  nav a padding: 10px; text-decoration: nici unul; margine: 10px 0px; afișare: inline-block; fundal-culoare: negru; culoare albă; raza de graniță: 5px; font-familie: 'Lato';  nav a: hover fundal-culoare: gri;  nav a.active culoare: # 039be5;  

Acum vom spune Angular care componente trebuie să fie redate pentru o anumită rută sau cale. Creați un fișier numit app-routing.module.ts în interiorul src / app și introduceți în el următorul cod:

import NgModule de la '@ angular / core'; import RouterModule, Routes de la '@ unghiular / router'; import HomeComponent de la "./home/home.component"; import AllCountriesComponent din "./all-countries/all-countries.component"; import CountryDetailComponent din "./country-detail/country-detail.component"; const: Trasee = [path:, redirectTo: '/ home', pathMatch: 'full', path: 'home', component: HomeComponent, path: 'detail /: name', component: CountryDetailComponent , path: 'toate țările', componenta: AllCountriesComponent]; @NgModule (import: [RouterModule.forRoot (trasee)], exporturi: [RouterModule]) AppRoutingModule  

Începem importând toate dependențele necesare, inclusiv componentele pe care dorim să le oferim pentru diferite rute. După aceasta, specificăm diferite căi și componente care ar trebui să fie redate atunci când utilizatorii vizitează aceste căi. De asemenea, puteți redirecționa căi, așa cum am făcut pentru această aplicație de informații pentru o țară. Ori de câte ori utilizatorii vizitează http: // localhost: 4200 /, vor fi redirecționați către http: // localhost: 4200 / home. Rețineți că specificarea rutelor de redirecționare vă solicită să specificați o valoare pentru pathMatch proprietate pentru a spune routerului cum ar trebui să se potrivească cu o adresă URL pe calea oricărui traseu.

Dacă utilizatorii vizitează http: // localhost: 4200 / toate țările, vom reda AllCountriesComponent după router-ieșire eticheta în interiorul app.component.html fișier pentru a afișa o listă cu toate țările.

Am folosit routerLink directive în interiorul șabloanelor pentru AllCountriesComponent precum și HomeComponent pentru a oferi o legătură pe care utilizatorii pot face clic pentru a citi mai multe despre orice țară. Valoarea a routerLink pentru fiecare țară furnizată în cadrul acestor șabloane urmează formatul routerLink = "/ detaliu / country.name". Valoarea lui cale proprietate pentru redare CountryDetailComponent a fost specificată ca detaliu /: numele, păstrarea valorii routerLink directivă în minte. :Nume o parte din această cale este utilizată pentru a identifica numele țării.

Actualizarea fișierului app.module.ts

Ultimul lucru pe care trebuie să-l facem pentru a avea o aplicație Angulară pe deplin funcțională este actualizarea app.module.ts fişier. Dacă deschideți acest fișier într-un editor de text, veți observa că toate cele trei componente pe care le-am generat utilizând CLI Angular au fost deja importate în fișier. Înainte de a face orice schimbări, dvs. app.module.ts fișierul trebuie să aibă următorul cod:

import BrowserModule din '@ unghiular / platform-browser'; import NgModule de la '@ angular / core'; importați AppComponent din "./app.component"; import CountryService de la "./country.service"; import HomeComponent de la "./home/home.component"; import AllCountriesComponent din "./all-countries/all-countries.component"; import CountryDetailComponent din "./country-detail/country-detail.component"; @NgModule (declarații: [AppComponent, HomeComponent, AllCountriesComponent, CountryDetailComponent], import: [BrowserModule], furnizori: [CountryService], bootstrap: [AppComponent]) 

Există doar două modificări pe care trebuie să le facem app.module.ts fişier. În primul rând, trebuie să importăm AppRoutingModule clasa de la app-routing.module.ts fișierul pe care l-am creat în secțiunea anterioară. În al doilea rând, adăugați clasa la @ NgModule.providers matrice. După aceste schimbări, dvs. app.module.ts fișierul ar trebui să arate așa.

import BrowserModule din '@ unghiular / platform-browser'; import NgModule de la '@ angular / core'; importați AppComponent din "./app.component"; import CountryService de la "./country.service"; import HomeComponent de la "./home/home.component"; import AllCountriesComponent din "./all-countries/all-countries.component"; import CountryDetailComponent din "./country-detail/country-detail.component"; importați AppRoutingModule din "./app-routing.module"; @NgModule (declarații: [AppComponent, HomeComponent, AllCountriesComponent, CountryDetailComponent], import: [BrowserModule, AppRoutingModule], furnizori: [CountryService], bootstrap: [AppComponent]) 

Dacă vă mutați în directorul de proiect și tastați următoarea comandă în consola, aplicația dvs. va încărca și va reda HomeComponent.

ng servi - deschide

Puteți să faceți clic pe diferite blocuri de țări sau pe legăturile de navigare pentru a încărca componente diferite.

Gândurile finale

În această serie, am vrut să învăț cititorii care nu au folosit niciodată Angular înainte de cum să creeze o aplicație angulară de bază. Aplicația a început să funcționeze corect numai după ce am terminat ultimul tutorial. Acest lucru a fost intenționat pentru că am vrut să evit să mă mișc înainte și înapoi între aceleași fișiere, făcând modificări care ar trebui să fie înlocuite în tutoriale ulterioare. Acest lucru ar putea fi foarte confuz pentru un începător, așa că am făcut toate modificările la un fișier deodată.

Pentru practică, puteți încerca să creați mai multe componente care să afișeze informațiile despre țări într-un alt format. 

În plus, dacă nu este clar, JavaScript a devenit una dintre limbile de facto ale web-ului. Nu este fără curbele sale de învățare și există o mulțime de cadre și biblioteci pentru a vă menține ocupați, așa cum a demonstrat Angular în acest tutorial. Dacă sunteți în căutarea unor resurse suplimentare pentru a studia sau a utiliza în munca dvs., verificați ce avem disponibil în piața Envato.

Dacă aveți întrebări legate de acest sau orice alt tutorial al seriei, vă rugăm să nu ezitați să comenteze.