Share
Med den siste offisielle utgivelsen av Angular 2, er det en god tid å få fart på noen av de største endringene.
En ting som er forandret mye, er Angular 2-ruteren, som ble helt erstattet i oppløpet til den endelige utgivelsen. Så i disse to raske videoopplæringene fra kurset mitt på Angular 2 Routing, viser jeg deg hvordan du lager rutekonfigurasjoner og hvordan du bruker dem i en app. Du lærer om enkle ruter, omdirigering og wildcard ruter. Deretter ser du hvordan du bruker et direktiv for å konfigurere app-komponenten din for å vise rutene.
Videoene følger på fra tidligere leksjoner i kurset, men du bør kunne følge de teknikkene vi bruker. Du kan finne kildefilene for hele prosjektet på GitHub.
Det er mulig å bygge en full app i Angular 2 uten ruting. Så hvis vi kan gjøre dette, hvorfor trenger vi ruting i det hele tatt?
Hovedårsaken er at hvis vi ikke bruker ruting, vil vår app bare avhenge av navigering gjennom programkontroll. Vi må bytte ut komponenter basert på brukerinteraksjon, for eksempel når de klikker på noe.
Ved ruting vil vi kunne navigere ved å bytte webadresser. Alle komponenter vil kartlegge til en rute, slik at vi enkelt kan flytte rundt vår app.
For det første, for å gjøre rutefunksjon, må vi legge til en base href i hodet til index.html-filen vår.
Tidligere ville vi konfigurere våre ruter inne i komponenten som er vert for dem. I dette tilfellet vil dette bety at vi legger til vår ruttkonfigurasjon i vår app.component-fil. Med den nye ruteren foreslås det at vi lager vår rutekonfigurasjon i en egen fil.
Så la oss lage en fil som heter app.routes.ts i roten til app-mappen.
Det første vi legger til i denne filen er importen.
Først grip provideRouter eller RouterConfig fra vinkelrouteren. Deretter importerer du komponentene Om, Feil og Hjem fra sidemappen. Vi må importere disse slik at vi kan rute til disse komponentene.
Den neste tingen vi skal gjøre er å legge til vår rutekonfigurasjon for å holde våre ruter:
const ruter: RouterConfig = [];
Her bruker vi en konst erklæring. Dette er en av måtene vi kan erklære en variabel i TypeScript, og den representerer en verdi som ikke kan endres. I dette tilfellet bruker vi den til å holde vår RouterConfig.
Nå er det første vi legger til, en omdirigering. I et øyeblikk vil vi legge til en jokertrute for vår feilside. Dette i seg selv vil føre til at vår app starter fra feilsiden. Årsaken er at når vår app starter, har den ikke en rute. Derfor må vi spesifisere en komponent som standard rute.
Vi kan enkelt legge til komponenten vi vil starte vår app til den tomme ruten, men den foreslåtte måten å håndtere dette er med en omdirigering. Omadresseringen må komme først, eller det vil ikke fungere riktig. Slik ser det ut:
Først har vi vår bane, som er en tom rute. Dette er ruten vår app vil starte med. Deretter har vi omdirigering, som vil forandre veien til hjemmet når den møter en tom rute. Etter det har vi vår pathMatch. Jeg vil ikke gå inn i mye detalj bortsett fra å si at dette fører til at den tomme ruten stemmer overens med omadresseringen.
Da har vi vår rute som peker på AboutComponent. Banen er satt til 'handle om', som vi vil se i adressefeltet når vi navigerer til denne ruten. Komponenten som skal navigeres til, er AboutComponent. Etter det har vi HomeComponent. Stien er 'hjem', og komponenten til å starte er HomeComponent.
Dette er ruten vi skal navigere til fra omadresseringen. Så den siste ruten vi vil legge til er en jokertrute. Dette vil samsvare med eventuelle ruter som vi har definert. Dette er også grunnen til at vi lagt til omadresseringen. Hvis vi ikke gjorde det, startet vår app på denne ruten siden vi starter fra en rute som ikke er definert, en tom rute.
Etter at du har lagt til omadresseringen, vil en hvilken som helst rute vi skriver som ikke finnes, få vår feilside. Deretter eksporterer vi en annen const ved hjelp av gir rutermetoden fra Angular router. Vi bruker rutene vi konfigurerer med denne metoden.
Når vi gjør det, er våre ruter ferdig. Det siste vi må gjøre er å legge til ruting til vår app.
Gå til main.ts fil. Det første vi skal gjøre i denne filen er import myRouterProviders fra appruterfilen som vi opprettet. Da må vi legge den til vår bootstrap-funksjon. Å legge dem til her har fordelen av å gjøre ruter tilgjengelige for alle komponentene i vår app.
Når vi gjør det, er vi ferdige med å sette opp ruter. I den neste videoen vil vi fullføre rutekonfigurasjonen og forhåndsvise appen.
Så langt har vi konfigurert våre ruter og lagt dem til vår bootstrap-funksjon. Nå må vi bare konfigurere vår app-komponent for å være vert for våre ruter.
Dette er hvordan app.component.ts bør se:
Først importerer vi våre ruterdirektiver. Vi har sett dette før når en komponent trenger å bruke ruteren. Denne komponenten vil bruke rutelink og et annet direktiv av Angular 2 router uttak. Deretter fjerner vi malene og legger til et backtick for å gjøre det til en malestreng. Dette vil tillate oss å lage en multiline mal.
Først legger vi til en div for vår bootstrap nav bar. Denne navlinjen vises på hver side, siden den er en del av malen. Deretter i nav nav, legger vi til vårt merke. Dette kan være tekst eller et bilde, og det representerer merkevaren til appen din.
Deretter legger vi til en uordnet liste. Innsiden, vi legger til linkene våre for en navbar. I våre lenker, i stedet for en nettadresse for å navigere til, har vi routerLink. Slik navigerer vi til en rute under brukerinteraksjon. Her er vi satt til å navigere til hjemmeveien når vi klikker på denne knappen.
Vi kan også skrive routerLink i en annen form inne i en matrise. Vi gjør normalt dette når vi trenger å levere mer informasjon til vår rute. Da har vi også en routerLinkActive Direktivet, som vil bruke menyklassen til lenken når ruten er aktiv. Vi bruker dette til å vise en visuell indikasjon på hvilken side vi er på.
Deretter legger vi til en annen ruterkobling som navigerer til Omsiden. Da vil vi legge til ruter utløp direktiv. Det er derfor komponentene ikke trenger en velger. Når de lastes til ruting, vil dette direktivet være vert for komponentene. Mens resten av denne malen vil vises statisk på hver side, vil ruter utløp vil endres basert på hvilken rute navigeres til. Til slutt for denne filen, legger vi til ruterdirektiver.
Etter det er det siste vi må gjøre, å legge til en CSS-regel til style.css fil:
.meny bakgrunnsfarge: hvit;
Denne regelen gjelder for klassen som skal brukes når ruten knyttet til ruteren er aktiv. Bakgrunnen til lenken vil være fargen hvit. Og nå er ruting konfigurert for vår app.
Gå videre og lagre prosjektet og løp npm start i prosjektmappen.
Hvis alt ble gjort riktig, bør appen kompilere og deretter starte fra en nettleser.
Hvis du merker, er bakgrunnen for hjemmekoblingen skyggelagt i hvitt. Dette er fordi dette er den aktive ruten. Så hvis vi klikker på Handle om knappen, bør vi gå til Omsiden.
Etter det, la oss skrive en ikke-eksisterende rute inn i adressefeltet. Når vi gjør det, bør vi få en feil side.
Vi har nå ruting som fungerer i vår app, men det er så mye mer vi kan gjøre med det. I resten av kurset vil du dykke på ruting i mye mer dybde.
I hele kurset, Angular 2 Routing, vil jeg lære deg hvordan du bruker den nye Angular 2-ruteren i appene dine. Du får se hvordan du konfigurerer grunnleggende ruting til statiske sider, hvordan du trekker ut parametere fra rutebanen, og hvordan du gjør rutingen modulær. Du vil også se hvordan brukertilgangskontroll kan implementeres med Angular 2-ruteren.
Accentsconagua