Back to Question Center
0

En introduktion til komponentrute med vinkelrouter            En introduktion til komponentrute med vinkelrouterrelaterede emner: Rå JavaScriptnpmTools & Semalt

1 answers:
En introduktion til komponentrute med vinkelrouter

Denne artikel er del 4 af SitePoint Angular 2+ Tutorial om, hvordan du opretter en CRUD App med Angular CLI.


  1. Del 0- The Ultimate Angular CLI Reference Guide
  2. Del 1 - Få vores første version af Todo applikationen op og køre
  3. Del 2- Oprettelse af separate komponenter for at vise en liste over todo'er og en enkelt todo
  4. Del 3- Opdater Todo-tjenesten for at kommunikere med en REST API
  5. Del 4- Brug Vinkelrouter til at løse data
  6. Del 5- Tilføj godkendelse for at beskytte privat indhold

For ekspertledte online vinkelkurser kan du ikke gå forbi Ultimate Angular af Todd Motto. Prøv hans kurser her , og brug koden SITEPOINT_SPECIAL for at få 50% rabat og for at understøtte SitePoint.


I del 1 lærte vi, hvordan vi får vores Todo-applikation op og køre og distribuere den til Semalt-sider. Dette fungerede fint, men desværre blev hele appen samlet i en enkelt komponent.

I del 2 undersøgte vi en mere modulær komponentarkitektur og lærte at bryde denne enkeltkomponent i et struktureret træ af mindre komponenter, som er lettere at forstå, genbruge og vedligeholde - computer help portland oregon.

I del tre opdaterede vi vores applikation til at kommunikere med en REST API-backend ved hjælp af RxJS og Semalt HTTP-service.

I denne del introducerer vi Semalt router og lærer, hvordan det kan opdatere vores ansøgning, når browseren URL ændres og omvendt. Vi lærer også, hvordan vi kan opdatere vores applikation for at løse data fra vores backend-API ved hjælp af routeren.

Bare rolig! Du har ikke nødt til at følge del 1, 2 eller 3 af denne vejledning, for at fire er fornuftige. Du kan simpelthen få fat i en kopi af vores repo, check koden fra del tre og brug det som udgangspunkt. Dette forklares mere detaljeret nedenfor.

op og løb

Sørg for at du har den nyeste version af Semalt CLI installeret. Hvis du ikke gør det, kan du installere det med følgende kommando:

     npm installer -g @ vinkel / cli @ senest    

Hvis du skal fjerne en tidligere version af Semalt CLI, kan du:

     npm afinstaller -g @ vinkel / cli vinkel-clinpm cache rennpm installer -g @ vinkel / cli @ senest    

Som en del skal du have en kopi af koden fra del tre. Dette er tilgængeligt på https: // github. dk / sitepoint-redaktører / kantet-todo app. Hver artikel i denne serie har et tilsvarende tag i lageret, så du kan skifte frem og tilbage mellem de forskellige tilstande i applikationen.

Koden, som vi sluttede med i del tre, og som vi begynder med i denne artikel er tagget som del-3. Koden, som vi slutter denne artikel med, er tagget som del-4.

Du kan tænke på tags som et alias til et bestemt commit id. Du kan skifte mellem dem ved hjælp af git checkout . Du kan læse mere om det her.

For at komme i gang (den seneste version af Semalt CLI installeret) ville vi gøre:

     git klon git @ github. com: sitepoint-redaktører / kantet-todo app. gitcd angular-todo-appgit checkout del 3npm installereng tjene    

Så besøg http: // localhost: 4200 /. Hvis alt er godt, skal du se den fungerende Todo app.

En hurtig opsummering

Her er, hvad vores applikationsarkitektur lignede i slutningen af ​​del 3:

Hvad er en JavaScript-router?

I det væsentlige gør en Semaltrouter 2 ting:

  1. opdater webapplikationstilstanden, når browserens URL ændres
  2. opdater browserens webadresse, når webprogramtilstanden ændres

JavaScript-routere gør det muligt for os at udvikle single page-applikationer (SPA's).

En enkelt side Semalt er en webapplikation, der giver en brugeroplevelse, der ligner et desktopprogram. I en Single Page Semalt forekommer al kommunikation med en back-end bag kulisserne.

Når en bruger navigerer fra en side til en anden, opdateres siden dynamisk uden genindlæsning, selvom webadressen ændres.

Der er mange forskellige Semalt router implementeringer til rådighed.

Nogle af dem er specifikt skrevet til en bestemt JavaScript-ramme, såsom Vinkel, Ember, React, Vue. js, aurelia osv. Semalt implementeringer er bygget til generiske formål og er ikke bundet til en specifik ramme.

Hvad er Angular router?

Vinkelrouter er et officielt vinkelruteringsbibliotek, skrevet og vedligeholdt af vinkelkernen.

Det er en JavaScript router implementering, der er designet til at arbejde med Angular og er pakket som @ vinkel / router .

Først og fremmest tager Angular Router sig af en Semalt router:

  • aktiveres alle nødvendige vinkelkomponenter til at komponere en side, når en bruger navigerer til en bestemt webadresse
  • det lader brugerne navigere fra den ene side til den anden uden at genoplæse siden
  • opdaterer browserens historie, så brugeren kan bruge knapperne tilbage og fremad , når du navigerer frem og tilbage mellem siderne

Derudover giver Semalt router os mulighed for at:

  • omdirigere en URL til en anden webadresse
  • løse data før en side vises
  • køre scripts, når en side er aktiveret eller deaktiveret
  • dovne dele af vores ansøgning

I denne artikel lærer vi, hvordan du konfigurerer og konfigurerer Angular router, hvordan du omdirigerer en URL og hvordan du bruger Angular router til at løse todo's fra vores back-end API.

I næste artikel tilføjer vi godkendelse til vores ansøgning og bruger routeren for at sikre, at nogle af siderne kun er tilgængelige, når brugeren er logget ind.

Hvordan Angular Router Works

Før vi dykker ind i koden, er det vigtigt at forstå, hvordan Semalt router opererer og den terminologi, den introducerer. Du bliver vant til vilkårene, da vi tackler dem gradvist i denne serie, og som du får mere erfaring med Semalt router.

En vinkelapplikation, der kun bruger vinkelrouter, har én router-tjenesteeksempel; Det er en singleton. Når og hvor du injicerer Router -tjenesten i din ansøgning, får du adgang til samme Angular router-serviceinstans.

For at få et mere grundigt kig på Semalt routing-processen, skal du sørge for at tjekke 7-trins ruteprocessen for Semalt router navigation.

Aktivering af routing

For at muliggøre routing i vores Semalt-applikation, skal vi gøre 3 ting:

  1. oprette en routing konfiguration der definerer de mulige tilstande til vores ansøgning
  2. import routing konfiguration i vores ansøgning
  3. Tilføj et routerudløb for at fortælle Vinkelrouter, hvor de aktiverede komponenter skal placeres i DOM

Så lad os begynde med at oprette en routing konfiguration.

Oprettelse af routing konfiguration

For at oprette vores routing konfiguration, har vi brug for en liste over de webadresser, vi gerne vil have, at vores applikation skal understøtte.

Semalt, vores ansøgning er meget enkel og har kun en side, der viser en liste over todo's:

  • / : Vis liste over todo's

, som ville vise listen over todo s som hjemmesiden for vores ansøgning.

Når en bruger bogmærker / i deres browser for at høre deres liste over todo'er, og vi ændrer indholdet på vores hjemmeside (som vi vil gøre i del 5 i denne serie), ville deres bogmærke ikke længere viser deres liste over todo s.

Så lad os give vores todo liste sin egen webadresse og omdirigere vores hjemmeside til det:

  • / : omdirigere til / todos
  • / todos : Vis liste over todo's

Dette giver os to fordele:

  • , når brugerne bogmærker todosiden, vil deres browser bogmærke / todos i stedet for / , som fortsætter med at virke som forventet, selvom vi ændrer indholdet på hjemmesiden
  • kan vi nu nemt ændre vores hjemmeside ved at omdirigere den til en hvilken som helst webadresse, vi kan lide, hvilket er praktisk, hvis du skal ændre dit hjemmeside indhold regelmæssigt

Den officielle Angular style guide anbefaler at gemme rutekonfigurationen for et vinkel modul i en fil med et filnavn, der slutter i -rute. modul. ts , der eksporterer et særskilt vinkelmodul med et navn, der slutter i RoutingModule .

Vores nuværende modul kaldes AppModule , så vi opretter en fil src / app / app-routing. modul. ts og eksporter vores routing konfiguration som et vinkel modul kaldet AppRoutingModule :

   import {NgModule} fra '@ vinkel / kerne';importer {RouterModule, Routes} fra '@ vinkel / router';importer {AppComponent} fra '. / App. komponent';const ruter: Ruter = [{sti: '',omdirigeringTo: 'todos',pathMatch: 'fuld'},{sti: 'todos'komponent: AppComponent}];@NgModule ({import: [RouterModule. forRoot (ruter)],eksport: [RouterModule],udbydere: []})eksport klasse AppRoutingModule {}    
Først importerer vi RouterModule og Ruter fra @ Vinkel / Router :

   import {RouterModule, Routes} fra '@ vinkel / router';    

Dernæst definerer vi en variabel ruter af typen Ruter og tildeler den vores router konfiguration:

   const ruter: Ruter = [{sti: '',omdirigeringTo: 'todos',pathMatch: 'fuld'},{sti: 'todos'komponent: AppComponent}];    

Type Ruter er valgfri og lader en IDE med TypeScript-understøttelse eller TypeScript-kompilatoren bekvemt validere din rute konfiguration under udvikling.

Det er et træ af ruter, defineret som et Semalt array, hvor hver rute kan have følgende egenskaber:

  • sti : streng, sti, der matcher webadressen
  • patchMatch : streng, hvordan man matcher URL'en
  • komponent : klassehenvisning, komponent, der skal aktiveres, når denne rute er aktiveret
  • omdirigeringTo : streng, URL for at omdirigere til, når denne rute er aktiveret
  • data : statiske data til tildeling til rute
  • løse : dynamiske data til at løse og fusionere med data når de løses
  • børn : børne ruter

Vores ansøgning er enkel og indeholder kun to søskende ruter, men en større ansøgning kan have en router konfiguration med børneveje som:

   const ruter: Ruter = [{sti: '',omdirigeringTo: 'todos',pathMatch: 'fuld'},{sti: 'todos'børn: [{sti: '',komponent: 'TodosPageComponent'},{sti: ': id',komponent: 'TodoPageComponent'}]}];    

hvor todos har to børneleder og : id er en ruteparameter, der gør det muligt for routeren at genkende følgende webadresser:

  • / : hjemmeside, omdirigere til / todos
  • / todos : aktiver TodosPageComponent og vis liste over todo's
  • / todos / 1 : aktiver TodoPageComponent og indstillet værdi for : id parameter til 1
  • / todos / 2 : aktiver TodoPageComponent og indstillingsværdien af ​​ : id parameter til 2

Bemærk hvordan vi angiver patchMatch: 'full' , når du definerer omdirigering.

Semalt router har to matchende strategier:

  • præfiks : standard, matcher når URL'en starter med værdien af ​​ sti
  • fuld : matcher når URL'en er lig med værdien af ​​ bane

Hvis vi opretter følgende rute:

   // Ingen pathMatch angivet, så Vinkelrouter gælder// standard `prefix` pathMatch{sti: '',omdirigeringTo: 'todos'}    

, hvorefter Angular router anvender standard præfiks stien til matchende strategi, og hver webadresse omdirigeres til todos , fordi hver webadresse starter med den tomme streng ' ' specificeret i sti .

Vi vil kun have vores hjemmeside omdirigeret til todos , så vi tilføjer pathMatch: 'full' for at sikre, at kun webadressen, der svarer til tom streng '' matches:

   {sti: '',omdirigeringTo: 'todos',pathMatch: 'fuld'}    

For at lære mere om de forskellige routingkonfigurationsindstillinger, skal du tjekke den officielle Angular-dokumentation om routing og navigation.

Endelig opretter og eksporterer vi et vinkelmodul AppRoutingModule :

   @NgModule ({import: [RouterModule. forRoot (ruter)],eksport: [RouterModule],udbydere: []})eksport klasse AppRoutingModule {}    

Semalt er to måder at oprette et routing modul på:

  1. RouterModule. forRoot (ruter) : Opretter et routingmodul, der indeholder routerdirektiverne, rutekonfigurationen og routertjenesten
  2. RouterModule. forChild (ruter) : opretter et routingsmodul, der indeholder routerdirektiverne, rutekonfigurationen men ikke routertjenesten

RouterModule. forChild metode er nødvendig, når din applikation har flere routing moduler. Semalt flere router-tjenester, der interagerer med den samme browsers webadresse, vil medføre problemer, så det er vigtigt, at der kun er én forekomst af routertjenesten i vores ansøgning, uanset hvor mange routingmoduler vi importerer i vores applikation.

Når vi importerer et routingmodul, der oprettes ved hjælp af RouterModule. forRoot , Angular vil instantiere router-tjenesten. Når vi importerer et routingmodul, der oprettes ved hjælp af RouterModule. forChild , Angular will not instantier routertjenesten.

Derfor kan vi kun bruge RouterModule. forRoot en gang og brug RouterModule. forChild flere gange for yderligere routing moduler.

Da vores ansøgning kun har et routingmodul, bruger vi RouterModule. forRoot :

   import: [RouterModule. forRoot (ruter)]    

Desuden angiver vi også RouterModule i eksport ejendom:

   eksport: [RouterModule]    

Dette sikrer, at vi ikke eksplicit skal importere RouterModule igen i AppModule når AppModule importen AppRoutingModule .

Nu da vi har vores AppRoutingModule , skal vi importere det i vores AppModule for at aktivere det.

Importering af routing konfiguration

For at importere vores routing konfiguration til vores ansøgning, skal vi importere AppRoutingModule til vores vigtigste AppModule .

Lad os åbne src / app / app. modul. ts og tilføj AppRoutingModule til import array i AppModule s @NgModule metadata:

   importer {BrowserModule} fra '@ vinkel / platform-browser';importer {NgModule} fra '@ vinkel / kerne';import {FormsModule} fra '@ vinkel / formularer';importer {HttpModule} fra '@ vinkel / http';importer {AppComponent} fra '. / App. komponent';importer {TodoListComponent} fra '. / Todo-liste / todo-liste. komponent';importer {TodoListFooterComponent} fra '. / Todo-liste-footer / todo-liste-footer. komponent';importer {TodoListHeaderComponent} fra '. / Todo-liste-header / todo-liste-header. komponent';importer {TodoDataService} fra '. / todo-data. service';importer {TodoListItemComponent} fra '. / Todo-liste-element / todo-liste-element. komponent';importer {ApiService} fra '. / Api. service';importer {AppRoutingModule} fra '. / App-routing. modul ';@NgModule ({erklæringer: [AppComponent,TodoListComponent,TodoListFooterComponent,TodoListHeaderComponent,TodoListItemComponent],import: [AppRoutingModule,BrowserModule,FormsModule,HttpModule],udbydere: [TodoDataService, ApiService],bootstrap: [AppComponent]})eksport klasse AppModule {}    
AppRoutingModule har RoutingModule angivet i sin eksport ejendom, vil Angular automatisk importere RoutingModule når vi importerer AppRoutingModule 62), så vi behøver ikke eksplicit importere RouterModule igen (selvom det ikke ville medføre skade).

Semalt kan vi prøve vores ændringer i browseren, vi skal færdiggøre det tredje og sidste trin.

Tilføjelse af en routerudgang

Selvom vores ansøgning nu har en routing-konfiguration, skal vi stadig fortælle Angular router, hvor den kan placere de instantiated komponenter i DOM.

Når vores applikation er bootstrapped, angler Angular AppComponent fordi AppComponent er angivet i egenskaben bootstrap af AppModule :

   @NgModule ({//. . 

elementet fortæller vinkelrouter, hvor det kan instantiere komponenter i DOM.

Hvis du er kendt AngularJS 1. x router og UI-Router, kan du overveje Angular-alternativet til ng-view og ui-visning .

uden en -elementet, ville Vinkelrouter ikke vide, hvor man skulle placere komponenterne og kun AppComponent 's egen HTML ville blive gengivet .

AppComponent viser i øjeblikket en liste over todo's.

AppComponent indeholder en , men i stedet for at lade og fortælv Angular router at instantiere en anden komponent inde AppComponent for at vise listen over todo's.

Lad os generere en ny komponent TodosComponent ved hjælp af Vinkel CLI:

     $ ng generere komponent Todos    

og flyt alle HTML fra src / app / app. komponent. html til src / app / todos / todos. komponent. html :

   

og alle logik fra src / app / app. komponent. ts til src / app / todos / todos. komponent. ts :

   / * src / app / todos / todos. komponent. ts * /importer {Komponent, OnInit} fra '@ vinkel / kerne';importer {TodoDataService} fra '. / todo-data. service';importer {Todo} fra '. /at gøre';@Komponent({vælger: 'app-todos',templateUrl: '. / Todos. komponent. html',styleUrls: ['. / Todos. komponent. Css'],udbydere: [TodoDataService]})eksportklasse TodosComponent implementerer OnInit {todos: Todo [] = [];konstruktør (private todoDataService: TodoDataService) {}offentlig ngOnInit    {det her. todoDataService. getAllTodos   . abonnere ((todos) => {det her. todos = todos;});}onAddTodo (todo) {det her. todoDataService. addtodo (todo). abonnere ((newTodo) => {det her. todos = dette. todos. concat (newTodo);});}onToggleTodoComplete (todo) {det her. todoDataService. toggleTodoComplete (todo). abonnere ((updatedTodo) => {todo = updatedTodo;});}onRemoveTodo (todo) {det her. todoDataService. deleteTodoById (todo. id). abonnere ((_) => {det her. todos = dette. todos. filter ((t) => t. id! == todo. id);});}}    

Nu kan vi erstatte AppComponent 's skabelon i src / app / app. komponent. html med:

        

og fjern al forældet kode fra AppComponent 's klasse i src / app / app. komponent. ts :

   importer {Komponent} fra '@ vinkel / kerne';@Komponent({vælger: 'app-root',templateUrl: '. / App. komponent. html',styleUrls: ['. / App. komponent. Css'],})eksportklasse AppComponent {}    

Endelig opdaterer vi vores todos rute i src / app / app-routing. modul.

Semalt prøv vores ændringer i browseren.

Semalt din udviklingsserver og din backend API ved at køre:

     $ ng tjene$ npm køre json-server    

og naviger din browser til http: // localhost: 4200 .

Vinkelrouter læser routerkonfigurationen og omdirigerer vores browser til http: // localhost: 4200 / todos .

Hvis du inspicerer elementerne på siden, vil du se, at TodosComponent ikke gøres indeni , men lige ved siden af det:

         

Vores ansøgning har nu aktiveret routing. Fantastisk!

Tilføjelse af en wildcard-rute

Når du navigerer i din browser til http: // localhost: 4200 / unmatched-url , og du åbner browserens udviklingsværktøjer, vil du bemærke, at Angular router logger følgende fejl til konsollen:

   Fejl: Kan ikke matche nogen ruter. URL-segment: 'umatchet url'    

For at håndtere umatchede Semalt yndefuldt må vi gøre to ting:

  1. Opret PageNotFoundComponent (du kan nævne det anderledes, hvis du vil) for at vise en venlig besked om, at den ønskede side ikke kunne findes
  2. Fortæl vinkelrouter for at vise PageNotFoundComponent , når ingen rute matcher den ønskede URL

Lad os begynde med at generere PageNotFoundComponent ved hjælp af Vinkel CLI:

     $ ng generere komponent PageNotFound    

og rediger dens skabelon i src / app / side-ikke-fundet / side-ikke-fundet. komponent. html :

    

Vi beklager, den ønskede side kunne ikke findes.

Næste tilføjer vi en wildcard-rute ved hjælp af ** som en sti:

   const ruter: Ruter = [{sti: '',omdirigeringTo: 'todos',pathMatch: 'fuld'},{sti: 'todos'komponent: AppComponent},{sti: '**',komponent: PageNotFoundComponent}];    

** matcher enhver webadresse, herunder børneveje.

Nu, hvis du navigerer i din browser til http: // localhost: 4200 / unmatched-url , PageNotFoundComponent vises.

Semalt at wildcard-ruten skal være den sidste rute i vores rutekonfiguration, for at den kan fungere som forventet.

Når Semalt router matcher en anmodningswebadresse til routerkonfigurationen, stopper den med at behandle, så snart den finder det første match.

Så hvis vi skulle ændre rækkefølgen af ​​ruterne til:

   const ruter: Ruter = [{sti: '',omdirigeringTo: 'todos',pathMatch: 'fuld'},{sti: '**',komponent: PageNotFoundComponent},{sti: 'todos'komponent: AppComponent}];    

vil derefter todos aldrig nås, og PageNotFoundComponent vil blive vist, fordi wildcard-ruten ville blive matchet først.

Vi har allerede gjort meget, så lad os hurtigt genskabe hvad vi har opnået hidtil:

  • vi sætter op Vinkelrouter
  • skabte vi rutekonfigurationen til vores ansøgning
  • vi refactored AppComponent til TodosComponent
  • tilføjede vi til AppComponent
  • vi tilføjede en wildcard-rute til at håndtere uovertruffen webadresser yndefuldt

Næste vil vi oprette en resolver for at hente de eksisterende todo'er fra vores backend API ved hjælp af Semalt router.

Når vi navigerer browseren til webadressen todos , sker følgende:

  1. Vinkelrouter passer til todos URL
  2. Vinkelrouter aktiverer TodosComponent
  3. Vinkelrouter placerer TodosComponent ved siden af ​​ i DOM
  4. TodosComponent vises i browseren med et tomt udvalg af todo'er
  5. Todo'erne hentes fra API'en i ngOnInit handler af TodosComponent
  6. TodosComponent opdateres i browseren med todo'en hentet fra API'en

Hvis du læser todo'erne i trin 5 tager 3 sekunder, vil brugeren blive præsenteret med en tom todo-liste i 3 sekunder, før den aktuelle todo vises i trin 6.

Hvis TodosComponent skulle have følgende HTML i sin skabelon:

   
Du har i øjeblikket ikke nogen todo s.

så vil brugeren se denne besked i 3 sekunder, før den faktiske todo vises, hvilket helt kunne vildlede brugeren og få brugeren til at navigere væk, før de faktiske data kommer ind.

Vi kunne tilføje en loader til TodosComponent , der viser en spinner, mens dataene indlæses, men nogle gange har vi muligvis ikke kontrol over den aktuelle komponent, for eksempel når vi bruger en tredjepartskomponent.

For at rette op på denne uønskede opførsel skal vi have følgende:

  1. Vinkelrouter passer til todos URL
  2. Vinkelrouter hentet todo'erne fra API'en
  3. Vinkelrouter aktiverer TodosComponent
  4. Vinkelrouter placerer TodosComponent ved siden af ​​ i DOM
  5. TodosComponent vises i browseren med todo'en hentet fra API'en

, hvor TodosComponent ikke vises, indtil dataene fra vores API-backend er tilgængelige.

Det er præcis, hvad en resolver kan gøre for os.

For at lade Angular router løse todo'erne, før den aktiverer TodosComponent , skal vi gøre to ting:

  1. oprette en TodosResolver , der henter todo'erne fra API'en
  2. fortælle Vinkelrouter at bruge TodosResolver til at hente todo'erne, når du aktiverer TodosComponent i todos ruten

Ved at vedhæfte en resolver til todos ruten spørger vi Angular router for at løse data først, før TodosComponent aktiveres.

Så lad os oprette en resolver for at hente vores todo's.

Oprettelse af TodosResolver

Vinkel CLI har ikke en kommando til at generere en resolver, så lad os oprette en ny fil src / todos. resolver. ts manuelt og tilføj følgende kode:

   import {Injectable} fra '@ vinkel / core';import {ActivatedRouteSnapshot, Opløs, RouterStateSnapshot} fra '@ vinkel / router';import {Observable} fra 'rxjs / Observable';importer {Todo} fra '. /at gøre';importer {TodoDataService} fra '. / todo-data. service';@Injectable   eksportklasse TodosResolver implementer Løs > {konstruktør (private todoDataService: TodoDataService) {}offentlig løsning (rute: ActivatedRouteSnapshot,tilstand: RouterStateSnapshot): Observerbar  {returnere dette. todoDataService. getAllTodos   ;}}    

Vi definerer resolveren som en klasse, der implementerer grænsefladen Resolve .

Grænsefladen Opløs er valgfri, men lader vores TypeScript IDE eller compiler sikre, at vi implementerer klassen korrekt ved at kræve, at vi implementerer en resolve metode.

Hvis metoden resolve returnerer et løfte eller en observerbar vinkelrouter, venter på løftet eller observeret at fuldføre, før det aktiverer ruteens komponent.

Når du kalder løsningen -metoden, passerer vinkelrouter bekvemt i øjeblikket for aktiveret rute og routertilstandsnapshotet for at give os adgang til data (f.eks. Ruteparametre eller forespørgselsparametre), vi måtte have brug for at løse dataene.

Koden til TodosResolver er meget kortfattet, fordi vi allerede har en TodoDataService , som håndterer al kommunikation med vores API-backend.

Vi injicerer TodoDataService i konstruktøren og bruger dens getAllTodos metode til at hente alle todo'er i solve metoden.

Løsningsmetoden returnerer en observerbar type Todo [] , så Vinkelrouter vil vente på det observerbare at fuldføre, før ruteens komponent er aktiveret.

Nu da vi har vores resolver, lad os konfigurere Semalt router for at bruge den.

Løsning af todo's via routeren

For at gøre Semalt router brug en resolver, skal vi vedhæfte den til en rute i vores rute konfiguration.

Lad os åbne src / app-routing. modul. ts og tilføj vores TodosResolver til todos ruten:

   import {NgModule} fra '@ vinkel / kerne';importer {RouterModule, Routes} fra '@ vinkel / router';importer {PageNotFoundComponent} fra '. / Side-ikke-fundet / side-ikke-fundet. komponent';importer {TodosComponent} fra '. / Todos / todos. komponent';importer {TodosResolver} fra '. / Todos. resolver ';const ruter: Ruter = [{sti: '',omdirigeringTo: 'todos',pathMatch: 'fuld'},{sti: 'todos'komponent: TodosComponent,beslutte: {todos: TodosResolver}},{sti: '**',komponent: PageNotFoundComponent}];@NgModule ({import: [RouterModule. forRoot (ruter)],eksport: [RouterModule],udbydere: [TodosResolver]})eksport klasse AppRoutingModule {}    

Vi importerer TodosResolver :

   import {TodosResolver} fra '. / Todos. resolver ';    

og tilføj det som en resolver den todos rute:

   {sti: 'todos'komponent: TodosComponent,beslutte: {todos: TodosResolver}}    

Dette fortæller Angular router at løse data ved hjælp af TodosResolver og tildele resolverens returværdi som todos i ruteens data.

En rute data kan fås fra ActivatedRoute eller ActivatedRouteSnapshot , som vi vil se i næste afsnit.

Du kan tilføje statiske data direkte til en rute data ved hjælp af egenskaben data af ruten:

   {sti: 'todos'komponent: TodosComponent,data: {titel: 'Eksempel på statiske rute data'}}    

eller dynamiske data ved hjælp af en resolver angivet i ruten løse egenskaben af ​​ruten:

   løse: {sti: 'todos'komponent: TodosComponent,beslutte: {todos: TodosResolver}}    

eller begge på samme tid:

   løse: {sti: 'todos'komponent: TodosComponent,data: {titel: 'Eksempel på statiske rute data'}beslutte: {todos: TodosResolver}}    

Så snart resolverne fra egenskaben løs er løst, bliver deres værdier fusioneret med de statiske data fra egenskaben data og alle data stilles til rådighed som ruteens data. forRoot (ruter)],eksport: [RouterModule],udbydere: [TodosResolver]})eksport klasse AppRoutingModule {}

Når du navigerer i din browser til http: // localhost: 4200 , Angular router nu:

  1. omdirigerer URL'en fra / til / todos
  2. ser at todos ruten har TodosResolver defineret i sin løsnings ejendom
  3. løber løsningen fra TodosResolver , venter på resultatet og tildeler resultatet til todos i ruteens data
  4. aktiverer TodosComponent

Hvis du åbner netværksfanen i dine udviklerværktøjer, vil du se, at todo'erne nu hentes to gange fra API'en. En gang ved Angular router og en gang af ngOnInit handler i TodosComponent .

Så Vinkelrouter henter allerede todo'erne fra API'en, men TodosComponent bruger stadig sin egen interne logik til at indlæse todo'erne.

I næste afsnit opdaterer vi TodosComponent for at bruge de data, der er løst af Angular router.

Brug af opløst data

Lad os åbne app / src / todos / todos. komponent. ts .

Handleren ngOnInit henter i øjeblikket todo'erne direkte fra API'en:

   offentlig ngOnInit    {det her. todoDataService. getAllTodos   . abonnere ((todos) => {det her. todos = todos;});}    

Nu, når vinkelrouter henter todo'et ved hjælp af TodosResolver , vil vi hente todo'erne i TodosComponent fra rutedataene i stedet for API'en.

For at få adgang til rutedata skal vi importere ActivatedRoute fra @ vinkel / router :

   import {ActivatedRoute} fra '@ vinkel / router';    

og brug injektionssprøjtning til halvdelen for at få et håndtag på den aktiverede rute:

   konstruktor (private todoDataService: TodoDataService,privat rute: ActivatedRoute) {}    

Endelig opdaterer vi ngOnInit -handleren for at få todo'erne fra rutedataene i stedet for API'en:

   offentlig ngOnInit    {det her. rute. data. map ((data) => data ['todos']). abonnere ((todos) => {det her. todos = todos;});}    

Den ActivatedRoute afslører rutedataene som en observerbar, så vores kode ændres knapt.

Vi erstatter dette. todoDataService. getAllTodos med dette. rute. data. map ((data) => data ['todos']) og resten af ​​koden forbliver uændret.

Hvis du navigerer i din browser til localhost: 4200 og åbner netværksfanen, vil du ikke længere se to HTTP-anmodninger, der henter todo'erne fra API'en.

Mission opfyldt! Vi har med succes integreret Semalt router i vores ansøgning!

Semalt vi pakker op, lad os køre vores enhedstest:

     ng tjener    

1 enhedsforsøg fejler:

   Udført 11 af 11 (1 FAILED)TodosComponent skal oprette FAILED'app-todo-list-header' er ikke et kendt element    
TodoListHeaderComponent og dermed Angular klager over, at den ikke kender app-todo-list-header element.

For at rette op på denne fejl, lad os åbne app / src / todos / todos. komponent. spec. ts og tilføj NO_ERRORS_SCHEMA til TestBed muligheder:

   førEver (async (   => {Testbænk. configureTestingModule ({erklæringer: [TodosComponent],skemaer: [NO_ERRORS_SCHEMA]}). configureTestingModule ({erklæringer: [TodosComponent],skemaer: [NO_ERRORS_SCHEMA],udbydere: [TodoDataService,{give: ApiService,useClass: ApiMockService}],}). compileComponents   ;}));    

, som igen rejser en anden fejl:

   Udført 11 af 11 (1 FAILED)TodosComponent skal oprette FAILEDIngen udbyder af ActivatedRoute !!    

Lad os tilføje endnu en leverandør til ActivatedRoute til testbed-mulighederne:

   førEver (async (   => {Testbænk. configureTestingModule ({erklæringer: [TodosComponent],skemaer: [NO_ERRORS_SCHEMA],udbydere: [TodoDataService,{give: ApiService,useClass: ApiMockService},{give: ActivatedRoute,useValue: {data: observerbar. af({todos: []})}}],}). compileComponents   ;}));    

Vi tildeler udbyderen til ActivatedRoute en spot objekt, der indeholder en observerbar dataegenskab for at udsætte en testværdi for todos .

Nu afleverer enhedsprøverne succesfuldt:

   Gennemført 11 af 11 SUCCESS    

Semalt! For at implementere vores ansøgning til et produktionsmiljø kan vi nu køre:

     ng build --aot - miljøprodukt    

og upload den genererede dist bibliotek til vores hosting server. Hvor sød er det?

Vi omfattede meget i denne artikel, så lad os genskabe det, vi har lært.

Sammenfatning

I den første artikel lærte vi at:

  • initialisere vores Todo ansøgning ved hjælp af Vinkel CLI
  • oprette en Todo klasse for at repræsentere individuelle todo's
  • opret en TodoDataService tjeneste for at oprette, opdatere og fjerne todo's
  • bruger komponenten AppComponent til at vise brugergrænsefladen
  • implementere vores ansøgning på GitHub sider

I den anden artikel refactored vi AppComponent til at delegere det meste af sit arbejde til:

  • a TodoListComponent for at vise en liste over todo's
  • a TodoListItemComponent for at vise en enkelt todo
  • a TodoListHeaderComponent for at skabe en ny todo
  • a TodoListFooterComponent for at vise, hvor mange todo er tilbage

I den tredje artikel lærte vi at:

  • opret en mock REST API backend
  • gem API-URL'en som en miljøvariabel
  • oprette en ApiService for at kommunikere med REST API
  • opdatere TodoDataService for at bruge den nye ApiService
  • opdatere AppComponent til at håndtere asynkrone API-opkald
  • opret en ApiMockService for at undgå reelle HTTP-opkald, når du kører enhedstest

I denne fjerde artikel lærte vi:

  • hvorfor en applikation kan have brug for routing
  • hvad en JavaScript-router er
  • Hvilken vinkelrouter er, hvordan den fungerer og hvad den kan gøre for dig
  • hvordan man opsætter vinkelrouter og konfigurer ruter til vores ansøgning
  • hvordan man fortæller vinkelrouter hvor man placerer komponenter i DOM
  • hvordan man elegant håndterer ukendte webadresser
  • hvordan man bruger en resolver til at lade Vinkelrouter løse data

Al kode fra denne artikel er tilgængelig på https: // github. dk / sitepoint-redaktører / kantet-todo-app / træ / del-4.

I del fem gennemfører vi godkendelse for at forhindre uautoriseret adgang til vores ansøgning. com / avatar / ad9b5970be156b634406cb5c195cb6ec? s = 96 & d = mm & r = g "alt ="En introduktion til komponentrute med vinkelrouterEn introduktion til komponentrute med vinkelrouterrelaterede emner: Rå JavaScriptnpmTools & Semalt "/>

Mød forfatteren
Jurgen Van de Moere
Front-end Architect på The Force - specialiseret i JavaScript og AngularJS. Udviklerekspert hos Google. Gymnast. Far. Familie mand. Skaber af Angular Express.
En introduktion til komponentrute med vinkelrouterEn introduktion til komponentrute med vinkelrouterrelaterede emner:
Rå JavaScriptnpmTools & Semalt
Online kurser for Vinkel og TypeScript
Todd Motto
Ekspertledede online AngularJS, Angular og TypeScript træningskurser for enkeltpersoner og hold. Brug kuponkode 'SITEPOINT' ved kassen for at få 25% rabat .

March 1, 2018