Share
În cea de-a doua parte a ghidului începătorului pentru seria de ghiduri angulare, ați aflat ce servicii sunt în Angular 4 și cum să scrieți serviciile Angulare și să le utilizați într-o componentă angulară.
În această parte a seriei tutorial, veți învăța cum să se ocupe de rutare în Angular 4.
Veți începe prin clonarea codului sursă din prima parte a seriei tutorial.
git clone https://github.com/royagasthyan/AngularComponent.git
Odată ce aveți codul sursă, navigați la directorul proiectului și instalați dependențele necesare.
cd AngularComponent npm instalare
După instalarea dependențelor, porniți aplicația tastând următoarea comandă:
ng servi
Ar trebui să aveți aplicația care rulează pe http: // localhost: 4200 /.
Atunci când un utilizator intră într-o aplicație web sau pe un site web, rutarea este mijlocul de navigare în cadrul aplicației. Pentru a trece de la o vizualizare la alta, utilizatorul face clic pe link-urile disponibile pe o pagină.
Angular oferă un Router pentru a facilita definirea rutelor pentru aplicațiile web și pentru a naviga dintr-o vizualizare într-o altă vizualizare din aplicație.
Pentru a implementa rutarea în aplicația web, veți folosi modulul Routing unghiular. Creați un fișier numit app.routing.ts în interiorul src / app pliant.
Pentru a începe cu implementarea rutei, trebuie să importați RouterModule și Rutele de la @ unghiular / router.
import RouterModule, Routes de la '@ unghiular / router';
Veți avea nevoie de asemenea ModuleWithProviders modul de implementare a rutei.
import ModuleWithProviders de la '@ angular / core / src / metadata / ng_module';
Creați și exportați o variabilă numită AppRoutes în app.routing.ts, care ar fi o colecție a tuturor căilor din aplicația Angular.
export const AppRoutes: Trasee = [];
Există două modalități de a crea modulul de rutare: RouterModule.forRoot și RouterModule.forChild.
RouterModule.forRoot este pentru crearea de rute pentru întreaga aplicație, și RouterModule.forChild este pentru crearea de rute pentru module încărcate leneș.
În acest tutorial, veți folosi RouterModule.forRoot pentru a crea rute pentru aplicația rădăcină.
Creați modulul de rutare utilizând RouterModule.forRoot în interiorul app.routing.ts fişier.
export const ROUTING: ModuleWithProviders = RouterModule.forRoot (AppRoutes);
Adăugați un traseu în interiorul AppRoutes lista pentru a ne arăta CalcComponent.
cale: 'calc', component: CalcComponent
Iată cum app.routing.ts file looks:
import RouterModule, Routes de la '@ unghiular / router'; import ModuleWithProviders de la '@ angular / core / src / metadata / ng_module'; import CalcComponent din './calc/calc.component' export const AppRoutes: Routes = [path: 'calc', component: CalcComponent]; export const ROUTING: ModuleWithProviders = RouterModule.forRoot (AppRoutes);
După cum se vede în cod, traseul care a fost adăugat este / calc, care ar face CalcComponent.
Importați Routing constant în interiorul app.module.ts fişier.
import ROUTING din "./app.routing"
Adaugă Routing la secțiunea importuri.
importurile: [BrowserModule, FormsModule, ROUTING],
Iată cum app.module.ts file looks:
import BrowserModule din '@ unghiular / platform-browser'; import NgModule de la '@ angular / core'; import ROUTING de la './app.routing' import AppComponent din './app.component'; import CalcComponent din './calc/calc.component' import FormsModule din '@ unghiular / formulare'; import RouterModule de la '@ unghiular / router'; @NgModule (declarații: [AppComponent, CalcComponent], import: [BrowserModule, FormsModule, ROUTING], furnizori: [], bootstrap: [AppComponent])
Salvați modificările de mai sus și reporniți aplicația Angular utilizând ng servi.
Punctați browser-ul dvs. la http: // localhost: 4200 / calc și veți avea CalcComponent afișat.
Cu ruta creată mai sus, veți încerca să implementați navigația. Să începem prin crearea unei componente principale pentru aplicația noastră numită HomeComponent.
Creați un dosar numit Acasă în interiorul src / app pliant. În interiorul Acasă folder, creați un fișier numit home.component.ts. Iată cum arată:
import Component de la '@ angular / core'; @Component (selector: 'home', templateUrl: 'home.component.html') clasa de export HomeComponent
Creați un fișier șablon numit home.component.html. Adăugați următorul cod:
Bine ați venit pe Pagina de pornire
După cum se vede în codul de mai sus, ați folosit routerLink pentru configurarea navigării pe link-uri. routerLink este importat din RouterModule.
Adaugă HomeComponent la NgModule în app.module.ts fişier.
import BrowserModule din '@ unghiular / platform-browser'; import NgModule de la '@ angular / core'; import ROUTING de la './app.routing' import AppComponent din './app.component'; import CalcComponent din "./calc/calc.component"; import HomeComponent de la "./home/home.component"; import FormsModule din '@ unghiular / formulare'; import RouterModule de la '@ unghiular / router'; @NgModule (declarații: [AppComponent, CalcComponent, HomeComponent], import: [BrowserModule, FormsModule, ROUTING], furnizori: [], bootstrap: [AppComponent])
Deoarece veți utiliza rutarea Angulară, trebuie să afișați locația în aplicația noastră unde ruterul ar afișa vizualizările. Așa cum ați pornit-o AppComponent la timpul de execuție, adăugați următorul cod la app.component.html fişier.
Ieșirea routerului indică routerului Angular unde să afișeze vizualizările.
În interiorul app.routing.ts fișier, includeți ruta implicită pentru a fi afișată ca HomeComponent. Iată cum arată codul modificat:
path: ", component: HomeComponent
Iată cum app.routing.ts file looks:
import RouterModule, Routes de la '@ unghiular / router'; import ModuleWithProviders de la '@ angular / core / src / metadata / ng_module'; import CalcComponent din "./calc/calc.component"; import HomeComponent de la "./home/home.component"; exportare const AppRoutes: Routes = [path: ", component: HomeComponent, path: 'calc', component: CalcComponent];
Salvați modificările de mai sus și reporniți aplicația web. Punctați browserul la http: // localhost: 4200 / și veți avea HomeComponent afișate în mod prestabilit.
Faceți clic pe link-ul din componenta de bază și veți fi navigat la componenta calculatorului.
Acum, să adăugăm o rută pentru a gestiona cererile de rutare nedefinite. Ori de câte ori utilizatorul navighează către o rută inexistentă, veți afișa un mesaj despre faptul că ruta nu a fost găsită.
Adăugați o componentă nouă numită nu a fost gasit. Creați un dosar numit nu a fost gasit în interiorul src / app pliant. Creați un fișier numit notfound.component.ts. Adăugați următorul cod:
import Component de la '@ angular / core'; @Component (selector: 'notfound', templateUrl: 'notfound.component.html', styleUrls: ['notfound.component.css']) clasa de export NotFoundComponent
Creați un fișier numit notfound.component.html și adăugați următorul cod:
Componenta nu a fost găsită
Veți adăuga un traseu de carte wild pentru a gestiona rutele inexistente. Adăugați următorul cod la app.routing.ts fişier:
cale: '**', componentă: NotFoundComponent
Iată cum app.routing .ts file looks:
import RouterModule, Routes de la '@ unghiular / router'; import ModuleWithProviders de la '@ angular / core / src / metadata / ng_module'; import CalcComponent din "./calc/calc.component"; import HomeComponent de la "./home/home.component"; import NotFoundComponent din "./notfound/notfound.component"; exportare const AppRoutes: Routes = [path: ", component: HomeComponent, cale: 'calc', component: CalcComponent, path: '**', component: NotFoundComponent; .forRoot (AppRoutes);
Salvați modificările de mai sus și reporniți serverul. Punctați browser-ul la http: // localhost: 4200 / abc și veți vedea mesajul de excepție care nu a fost găsit.
În acest tutorial, ați învățat elementele de bază privind modul de gestionare a rutei în Angular. Ați învățat cum să definiți un traseu și să navigați printr-o aplicație Angular.
Ați învățat cum să vă ocupați de rutele inexistente definind un traseu cu carte de acces. Ai învățat cum să folosești routerLink pentru a vă conecta la altă rută.
Cum a fost experiența dvs de învățare rutare unghiulară? Dați-ne cunoștințele și sugestiile în secțiunea de comentarii de mai jos.
Codul sursă din acest tutorial este disponibil pe GitHub.
Accentsconagua