Un ghid complet pentru rutare în unghiular

În cazul în care încă nu sunteți familiarizat cu Angular 7, aș dori să vă aduc mai aproape de tot ce are de oferit acest cadru frontal impresionant. Vă voi ghida printr-o aplicație demonstrativă Angular care arată diferite concepte legate de router, cum ar fi:

• Priza routerului,
• Trasee și poteci,
• Navigare.

De asemenea, vă voi arăta cum să utilizați Angular CLI v7 pentru a genera un proiect demonstrativ în care vom folosi routerul Angular pentru a implementa rutarea și navigarea. Dar mai întâi, permiteți-mi să vă prezint Angular și să trec peste unele dintre noile funcții importante din cea mai recentă versiune.

Vă prezentăm Angular 7

Angular este unul dintre cele mai populare framework-uri front-end pentru construirea de aplicații web la nivelul clientului pentru web mobil și desktop. Urmează o arhitectură bazată pe componente în care fiecare componentă este o bucată de cod izolată și reutilizabilă care controlează o parte a interfeței de utilizare a aplicației.

O componentă din Angular este o clasă TypeScript decorată cu decoratorul @Component . Are un șablon atașat și foi de stil CSS care formează vizualizarea componentei.

Angular 7, cea mai recentă versiune de Angular, a fost lansată recent cu noi funcții, în special în instrumentele și performanța CLI, cum ar fi:

• Solicitări CLI: o comandă obișnuită precum ng add și ng new poate cere acum utilizatorului să aleagă funcționalitățile de adăugat într-un proiect, cum ar fi formatul de rutare și foi de stil etc.
  
• Adăugarea derulării la Angular Material CDK (Component DevKit).
• Adăugarea suportului de glisare și plasare la Angular Material CDK.
• Proiectele sunt, de asemenea, implicite să utilizeze pachete de buget, care vor avertiza dezvoltatorii atunci când aplicațiile lor depășesc limitele de dimensiune. În mod implicit, avertismentele sunt lansate atunci când dimensiunea are mai mult de 2MB și erorile la 5MB. De asemenea, puteți modifica aceste limite în fișierul angular.json . etc.
  

Vă prezentăm Angular Router

Angular Router este un router JavaScript puternic construit și întreținut de echipa de bază Angular, care poate fi instalat din pachetul @angular/router . Oferă o bibliotecă completă de rutare cu posibilitatea de a avea mai multe prize de router, strategii diferite de potrivire a căilor, acces ușor la parametrii rutei și dispozitive de protecție a rutei pentru a proteja componentele de accesul neautorizat.

Routerul Angular este o parte centrală a platformei Angular. Le permite dezvoltatorilor să creeze aplicații cu o singură pagină cu mai multe vizualizări și să permită navigarea între aceste vizualizări.

Să vedem acum conceptele esențiale de router în mai multe detalii.

Priza de router

Router-Outlet este o directivă care este disponibilă din biblioteca routerului în care routerul inserează componenta care se potrivește pe baza adresei URL a browserului curent. Puteți adăuga mai multe prize în aplicația dvs. Angular, ceea ce vă permite să implementați scenarii avansate de rutare.

 <router-outlet></router-outlet>

Orice componentă care este potrivită de router o va reda ca un frate al prizei routerului.

Trasee și căi

Rutele sunt definiții (obiecte) compuse din cel puțin o cale și o componentă (sau o cale redirectTo). Calea se referă la partea URL-ului care determină o vizualizare unică care ar trebui să fie afișată, iar componenta se referă la componenta unghiulară care trebuie asociată cu o cale. Pe baza unei definiții de rută pe care o oferim (printr-o metodă statică RouterModule.forRoot(routes) ), routerul este capabil să navigheze utilizatorul către o anumită vizualizare.

Fiecare Route mapează o path URL către o componentă.

Calea poate fi goală, ceea ce indică calea implicită a unei aplicații și, de obicei, este începutul aplicației.

Calea poate lua un șir wildcard ( ** ). Routerul va selecta această rută dacă adresa URL solicitată nu se potrivește cu nicio cale pentru rutele definite. Aceasta poate fi folosită pentru afișarea unei vizualizări „Negăsit” sau redirecționarea către o anumită vizualizare dacă nu se găsește nicio potrivire.

Acesta este un exemplu de traseu:

 { path: 'contacts', component: ContactListComponent}

Dacă această definiție a rutei este furnizată configurației Routerului, routerul va reda ContactListComponent atunci când URL-ul browserului pentru aplicația web devine /contacts .

Strategii de potrivire a rutelor

Routerul Angular oferă diferite strategii de potrivire a rutei. Strategia implicită este pur și simplu verificarea dacă adresa URL a browserului curent este prefixată cu calea .

De exemplu traseul nostru anterior:

 { path: 'contacts', component: ContactListComponent}

Ar putea fi scris și ca:

 { path: 'contacts',pathMatch: 'prefix', component: ContactListComponent}

Atributul patchMath specifică strategia de potrivire. În acest caz, este prefixul care este implicit.

A doua strategie de potrivire este plină . Când este specificat pentru o rută, routerul va verifica dacă calea este exact egală cu calea adresei URL a browserului curent:

 { path: 'contacts',pathMatch: 'full', component: ContactListComponent}

Parametri traseu

Crearea rutelor cu parametri este o caracteristică comună în aplicațiile web. Angular Router vă permite să accesați parametrii în diferite moduri:

• Folosind serviciul ActivatedRoute,
• Folosind ParamMap observabil disponibil începând cu v4.

Puteți crea un parametru de rută folosind sintaxa două puncte . Acesta este un exemplu de rută cu un parametru id :

 { path: 'contacts/:id', component: ContactDetailComponent}

Garzi de traseu

O gardă a rutei este o caracteristică a Angular Router-ului care permite dezvoltatorilor să ruleze o anumită logică atunci când este solicitată o rută și, pe baza acelei logici, permite sau interzice utilizatorului accesul la rută. Este folosit în mod obișnuit pentru a verifica dacă un utilizator este autentificat și are autorizația înainte de a putea accesa o pagină.

Puteți adăuga o gardă de rută prin implementarea interfeței CanActivate disponibilă din pachetul @angular/router și extinde metoda canActivate() care deține logica pentru a permite sau interzice accesul la rută. De exemplu, următorul paznic va permite întotdeauna accesul la o rută:

 class MyGuard implements CanActivate { canActivate() { return true; } }

Apoi puteți proteja o rută cu paznicul folosind atributul canActivate :

 { path: 'contacts/:id, canActivate:[MyGuard], component: ContactDetailComponent}

Directiva de navigație

Routerul Angular oferă directiva routerLink pentru a crea legături de navigare. Această directivă ia calea asociată cu componenta către care navigați. De exemplu:

 <a [routerLink]="'/contacts'">Contacts</a>

Prize multiple și rute auxiliare

Angular Router acceptă mai multe prize în aceeași aplicație.

O componentă are asociată o rută primară și poate avea rute auxiliare. Rutele auxiliare le permit dezvoltatorilor să navigheze pe mai multe rute în același timp.

Pentru a crea o rută auxiliară, veți avea nevoie de o priză de router numită unde va fi afișată componenta asociată cu ruta auxiliară.

 <router-outlet></router-outlet> <router-outlet name="outlet1"></router-outlet>

• Priza fără nume este priza principală.
• Toate punctele de vânzare ar trebui să aibă un nume, cu excepția prizei primare.

Puteți specifica apoi priza în care doriți să redați componenta folosind atributul priză:

 { path: "contacts", component: ContactListComponent, outlet: "outlet1" }

Crearea unui proiect demonstrativ Angular 7

În această secțiune, vom vedea un exemplu practic despre cum să configurați și să lucrați cu routerul unghiular. Puteți vedea demonstrația live pe care o vom crea și depozitul GitHub pentru proiect.

Instalarea Angular CLI v7

Angular CLI necesită Node 8.9+ , cu NPM 5.5.1+ . Trebuie să vă asigurați că aveți aceste cerințe instalate pe sistemul dvs., apoi rulați următoarea comandă pentru a instala cea mai recentă versiune de Angular CLI:

 $ npm install -g @angular/cli

Acest lucru va instala Angular CLI la nivel global.

Notă : Poate doriți să utilizați sudo pentru a instala pachete la nivel global, în funcție de configurația dvs. npm.

Crearea unui proiect Angular 7

Crearea unui proiect nou este la o comandă distanță, trebuie pur și simplu să rulați următoarea comandă:

 $ ng new angular7-router-demo

CLI vă va întreba dacă doriți să adăugați rutare (tastați N pentru Nu pentru că vom vedea cum putem adăuga rutare manual) și ce format de foaie de stil doriți să utilizați, alegeți CSS, prima opțiune, apoi apăsați Enter . CLI va crea o structură de foldere cu fișierele necesare și va instala dependențele necesare ale proiectului.

Crearea unui serviciu back-end fals

Deoarece nu avem un back-end real cu care să interacționăm, vom crea un back-end fals folosind biblioteca angular-in-memory-web-api , care este un API web în memorie pentru demonstrații și teste Angular care emulează operațiunile CRUD printr-un API REST.

Funcționează prin interceptarea solicitărilor HttpClient trimise către serverul de la distanță și le redirecționează către un depozit de date local în memorie pe care trebuie să-l creăm.

Pentru a crea un back-end fals, trebuie să urmăm următorii pași:

1. Mai întâi, instalăm modulul angular-in-memory-web-api ,
2. Apoi, creăm un serviciu care returnează date false,
3. În cele din urmă, configurați aplicația pentru a utiliza back-end-ul fals.

În terminalul dvs. rulați următoarea comandă pentru a instala modulul angular-in-memory-web-api de la npm:

 $ npm install --save angular-in-memory-web-api

Apoi, generați un serviciu back-end folosind:

 $ ng gs backend

Deschideți fișierul src/app/backend.service.ts și importați InMemoryDbService din modulul angular-in-memory-web-api :

 import {InMemoryDbService} from 'angular-in-memory-web-api'

Clasa de servicii trebuie să implementeze InMemoryDbService și apoi să suprascrie metoda createDb() :

 @Injectable({ providedIn: 'root' }) export class BackendService implements InMemoryDbService{ constructor() { } createDb(){ let contacts = [ { id: 1, name: 'Contact 1', email: '[email protected]' }, { id: 2, name: 'Contact 2', email: '[email protected]' }, { id: 3, name: 'Contact 3', email: '[email protected]' }, { id: 4, name: 'Contact 4', email: '[email protected]' } ]; return {contacts}; } }

Pur și simplu creăm o serie de contacte și le returnăm. Fiecare contact ar trebui să aibă un ID.

În cele din urmă, trebuie pur și simplu să importăm InMemoryWebApiModule în fișierul app.module.ts și să furnizăm serviciul nostru de back-end fals.

 import { InMemoryWebApiModule } from “angular-in-memory-web-api”; import { BackendService } from “./backend.service”; /* ... */ @NgModule({ declarations: [ /*...*/ ], imports: [ /*...*/ InMemoryWebApiModule.forRoot(BackendService) ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }

Apoi creați un ContactService care încapsulează codul pentru lucrul cu contactele:

 $ ng gs contact

Deschideți fișierul src/app/contact.service.ts și actualizați-l pentru a arăta similar cu următorul cod:

 import { Injectable } from '@angular/core'; import { HttpClient } from “@angular/common/http”; @Injectable({ providedIn: 'root' }) export class ContactService { API_URL: string = "/api/"; constructor(private http: HttpClient) { } getContacts(){ return this.http.get(this.API_URL + 'contacts') } getContact(contactId){ return this.http.get(`${this.API_URL + 'contacts'}/${contactId}`) } }

Am adăugat două metode:

• getContacts()
  Pentru a obține toate contactele.
• getContact()
  Pentru obținerea unui contact prin id.

Puteți seta API_URL la orice adresă URL, deoarece nu vom folosi un back-end real. Toate cererile vor fi interceptate și trimise la back-end-ul din memorie.

Crearea componentelor noastre unghiulare

Înainte de a putea vedea cum să folosim diferitele caracteristici ale routerului, să creăm mai întâi o grămadă de componente în proiectul nostru.

Mergeți la terminalul dvs. și executați următoarele comenzi:

 $ ng gc contact-list $ ng gc contact-detail

Aceasta va genera două componente ContactListComponent și ContactDetailComponent și le va adăuga la modulul principal al aplicației.

Configurarea rutei

În cele mai multe cazuri, veți folosi CLI-ul Angular pentru a crea proiecte cu setare de rutare, dar în acest caz, îl vom adăuga manual, astfel încât să ne putem face o idee mai bună cum funcționează rutarea în Angular.

Adăugarea modulului de rutare

Trebuie să adăugăm AppRoutingModule care va conține rutele aplicației noastre și o priză de router unde Angular va insera componenta potrivită în prezent, în funcție de URL-ul curent al browserului.

Vom vedea:

• Cum să creați un Modul Angular pentru rutare și să-l importați;
• Cum să adăugați rute la diferite componente;
• Cum să adăugați priza routerului.

În primul rând, să începem prin a crea un modul de rutare într-un fișier app-routing.module.ts . În interiorul src/app creați fișierul folosind:

 $ cd angular7-router-demo/src/app $ touch app-routing.module.ts

Deschideți fișierul și adăugați următorul cod:

 import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; const routes: Routes = []; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { }

Începem prin a importa NgModule din pachetul @angular/core care este un decorator TypeScript folosit pentru a crea un modul Angular.

Importăm și clasele RouterModule și Routes din pachetul @angular/router . RouterModule furnizează metode statice precum RouterModule.forRoot() pentru transmiterea unui obiect de configurare către Router.

În continuare, definim o matrice constantă de routes de tip Routes care va fi folosită pentru a păstra informații pentru fiecare rută.

În cele din urmă, creăm și exportăm un modul numit AppRoutingModule (puteți numi cum doriți) care este pur și simplu o clasă TypeScript decorată cu decoratorul @NgModule care preia un obiect meta-informații. În atributul imports al acestui obiect, numim metoda statică RouterModule.forRoot(routes) cu matricea rute ca parametru. În matricea de exports adăugăm RouterModule .

Importul modulului de rutare

În continuare, trebuie să importăm această rutare a modulului în modulul principal al aplicației care se află în fișierul src/app/app.module.ts :

 import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, AppRoutingModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }

Importăm AppRoutingModule din ./app-routing.module și îl adăugăm în matricea de imports a modulului principal.

Adăugarea prizei routerului

În cele din urmă, trebuie să adăugăm priza routerului. Deschideți fișierul src/app/app.component.html care conține șablonul principal de aplicație și adăugați componenta <router-outlet> :

 <router-outlet></router-outlet>

Aici routerul Angular va reda componenta care corespunde căii browserului curent.

Aceștia sunt toți pașii pe care trebuie să-i urmăm pentru a configura manual rutarea în interiorul unui proiect Angular.

Crearea rutelor

Acum, să adăugăm rute celor două componente ale noastre. Deschideți fișierul src/app/app-routing.module.ts și adăugați următoarele rute la matricea de routes :

 const routes: Routes = [ {path: 'contacts' , component: ContactListComponent}, {path: 'contact/:id' , component: ContactDetailComponent} ];

Asigurați-vă că importați cele două componente în modulul de rutare:

 import { ContactListComponent } from './contact-list/contact-list.component'; import { ContactDetailComponent } from './contact-detail/contact-detail.component';

Acum putem accesa cele două componente din căile /contacts și contact/:id .

Adăugarea de linkuri de navigare

În continuare, să adăugăm linkuri de navigare la șablonul nostru de aplicație folosind directiva routerLink . Deschideți src/app/app.component.html și adăugați următorul cod deasupra prizei routerului:

 <h2><a [routerLink] = "'/contacts'">Contacts</a></h2>

În continuare trebuie să afișăm lista de contacte în ContactListComponent . Deschideți src/app/contact-list.component.ts apoi adăugați următorul cod:

 import { Component, OnInit } from '@angular/core'; import { ContactService } from '../contact.service'; @Component({ selector: 'app-contact-list', templateUrl: './contact-list.component.html', styleUrls: ['./contact-list.component.css'] }) export class ContactListComponent implements OnInit { contacts: any[] = []; constructor(private contactService: ContactService) { } ngOnInit() { this.contactService.getContacts().subscribe((data : any[])=>{ console.log(data); this.contacts = data; }) } }

Creăm o matrice de contacts pentru a păstra contactele. Apoi, injectăm ContactService și apelăm metoda getContacts() a instanței (pe evenimentul de ciclu de viață ngOnInit ) pentru a obține contacte și a le atribui matricei de contacts .

Apoi deschideți fișierul src/app/contact-list/contact-list.component.html și adăugați:

 <table> <tr> <th>Name</th> <th>Email</th> <th>Actions</th> </tr> <tr *ngFor="let contact of contacts" > <td>{{ contact.name }}</td> <td>{{ contact.email }}</td> <td> <a [routerLink]="['/contact', contact.id]">Go to details</a> </td> </tr> </table>

Parcurgem contactele și afișăm numele și e-mailul fiecărei persoane de contact. De asemenea, creăm un link către componenta detaliilor fiecărei persoane de contact folosind directiva routerLink .

Aceasta este o captură de ecran a componentei:

Când facem clic pe linkul Accesați detalii , ne va duce la ContactDetailsComponent . Traseul are un parametru id , să vedem cum îl putem accesa din componenta noastră.

Deschideți fișierul src/app/contact-detail/contact-detail.component.ts și modificați codul pentru a arăta similar cu următorul cod:

 import { Component, OnInit } from '@angular/core'; import { ActivatedRoute } from '@angular/router'; import { ContactService } from '../contact.service'; @Component({ selector: 'app-contact-detail', templateUrl: './contact-detail.component.html', styleUrls: ['./contact-detail.component.css'] }) export class ContactDetailComponent implements OnInit { contact: any; constructor(private contactService: ContactService, private route: ActivatedRoute) { } ngOnInit() { this.route.paramMap.subscribe(params => { console.log(params.get('id')) this.contactService.getContact(params.get('id')).subscribe(c =>{ console.log(c); this.contact = c; }) }); } }

Injectăm ContactService și ActivatedRoute în componentă. În evenimentul de ciclu de viață ngOnInit() recuperăm parametrul id care va fi transmis de la rută și îl folosim pentru a obține detaliile contactului pe care le atribuim unui obiect de contact .

Deschideți fișierul src/app/contact-detail/contact-detail.component.html și adăugați:

 <h1> Contact # {{contact.id}}</h1> <p> Name: {{contact.name}} </p> <p> Email: {{contact.email}} </p> 

Când vizităm pentru prima dată aplicația noastră de la 127.0.0.1:4200/ , priza nu redă nicio componentă, așa că haideți să redirecționăm calea goală către calea contacts adăugând următoarea rută la matricea de rute:

 {path: '', pathMatch: 'full', redirectTo: 'contacts'}

Dorim să potrivim exact calea goală, de aceea specificăm strategia de potrivire completă .

Concluzie

În acest tutorial, am văzut cum să folosim routerul unghiular pentru a adăuga rutare și navigare în aplicația noastră. Am văzut diferite concepte, cum ar fi priza Router, rute și căi și am creat o demonstrație pentru a arăta practic diferitele concepte. Puteți accesa codul din acest depozit.