Share
Med den senaste officiella versionen av Angular 2 är det en bra tid att få fart på några av de största förändringarna.
En sak som har förändrats mycket är Angular 2-routern, som helt ersattes i ledningen till slutspelet. Så i dessa två snabba videotutorials från min kurs på Angular 2 Routing visar jag dig hur du skapar rutekonfigurationer och hur du använder dem i en app. Du lär dig om enkla rutter, omdirigering och jokertecken. Då ser du hur du använder ett direktiv för att konfigurera din app-komponent för att visa rutorna.
Videon följer på från tidigare lektioner i kursen, men du borde kunna följa de tekniker vi använder. Du kan hitta källfilerna för hela projektet på GitHub.
Det är möjligt att bygga en hel app i Angular 2 utan att routera. Så om vi kan göra detta, varför behöver vi routing alls?
Huvudskälet är att om vi inte använder routing beror vår app endast på navigering genom programkontroll. Vi måste byta ut komponenter baserat på användarinteraktion, som när de klickar på någonting.
Med routing kan vi navigera genom att byta webbadresser. Alla komponenter kartläggs till en rutt, så att vi enkelt kan flytta runt vår app.
För det första måste vi lägga till en bas href i huvudet av vår index.html-fil för att kunna göra routing.
Tidigare skulle vi konfigurera våra rutter inuti komponenten som är värd för dem. I det här fallet skulle det innebära att vi lägger till våra rutkonfigurer i vår app.component-fil. Med den nya routern föreslås det att vi skapar vår ruttkonfiguration i en separat fil.
Så låt oss skapa en fil som heter app.routes.ts i roten av app-mappen.
Det första vi lägger till i den här filen är importen.
Först greppa provideRouter eller RouterConfig från vinklaren. Importera sedan komponenterna Om, Fel och Hem från sidans mapp. Vi måste importera dessa så att vi kan komma till dessa komponenter.
Nästa sak som vi kommer att göra är att lägga till vår ruttkonfiguration för att hålla våra rutter:
const-rutter: RouterConfig = [];
Här använder vi en const deklaration. Detta är ett sätt vi kan deklarera en variabel i TypeScript, och det representerar ett värde som inte kan ändras. I det här fallet använder vi det för att hålla vår RouterConfig.
Nu är det första vi lägger till en omdirigering. I ett ögonblick lägger vi till en jokerväg för vår fel sida. Detta kommer i sig att leda till att vår app startar från felsidan. Anledningen är att när vår app startar, har den inte en rutt. Därför måste vi ange en komponent som standardväg.
Vi kan enkelt lägga till komponenten vi vill starta vår app till den tomma rutten, men det föreslagna sättet att hantera detta är med en omdirigering. Omdirigeringen måste komma först eller det fungerar inte korrekt. Så här ser det ut:
Först har vi vår väg, som är en tom rutt. Det här är den väg som vår app kommer att lansera med. Då har vi vår omdirigering, som kommer att ändra vår väg hemma när den möter en tom rutt. Därefter har vi vår pathMatch. Jag kommer inte att gå in på mycket detaljer förutom att säga att det här medför att den tomma rutten matchar omdirigeringen.
Då har vi vår väg som pekar på AboutComponent. Banan är inställd på 'handla om', vilket är vad vi ska se i adressfältet när vi navigerar till denna rutt. Den komponent som ska navigeras till är AboutComponent. Därefter har vi HomeComponent. Banan är 'Hem', och komponenten att starta är HomeComponent.
Det här är den väg som vi kommer att navigera till från omdirigeringen. Då kommer den sista vägen vi lägger till är en jokerväg. Detta matchar alla sträckor som vi har definierat. Det är också därför vi lade till omdirigeringen. Om vi inte gjorde startade vår app på den här vägen eftersom vi startar från en rutt som inte är definierad, en tom rutt.
När vi har lagt till omdirigeringen kommer någon rutt som vi skriver att inte finns att få vår fel sida. Då exporterar vi en annan const med hjälp av tillhandahåller routerns metod från Angular router. Vi använder de rutter som vi konfigurerar med den här metoden.
När vi väl har gjort det, är våra rutter färdiga. Det sista vi behöver göra är att lägga till routing till vår app.
Gå till main.ts fil. Det första vi kommer att göra i den här filen är import myRouterProviders från app-ruttfilen som vi skapade. Då måste vi lägga till det i vår bootstrap-funktion. Att lägga till dem här har fördelen att göra resorna tillgängliga för alla komponenter i vår app.
När vi väl har gjort det, är vi färdiga med att starta våra vägar. I nästa video avslutar vi vår routing konfiguration och förhandsgranskar appen.
Hittills har vi konfigurerat våra rutter och lagt dem till vår bootstrap-funktion. Nu behöver vi bara konfigurera vår app-komponent för att vara värd för våra rutter.
Här är hur app.component.ts bör se
För det första importerar vi våra routerdirektiv. Vi har sett detta tidigare när en komponent behöver använda routerns länk. Denna komponent kommer att använda routerlänk och ett annat direktiv av Angular 2-routerns uttag. Därefter tar vi bort mallen och lägger till en backtick för att göra det till en mallsträng. Detta gör det möjligt för oss att skapa en multilinamall.
Först lägger vi till en div för vår bootstrap nav bar. Denna navraden visas på varje sida, eftersom den ingår i mallen. Sedan lägger vi in vårt varumärke i navfältet. Det här kan vara text eller en bild, och den representerar märkningen av din app.
Sedan lägger vi till en oorderad lista. Inuti lägger vi till våra länkar för en navfält. I våra länkar, i stället för en URL för att navigera till, har vi routerLink. Så här navigerar vi till en rutt under användarinteraktion. Här är vi inställda att navigera till hemvägen när vi klickar på den här knappen.
Vi kan också skriva routerLink i en annan form inom en array. Vi gör normalt det här när vi behöver ge mer information till vår väg. Då har vi också en routerLinkActive direktivet, som kommer att använda menyklassen till länken när rutten är aktiv. Vi använder detta för att visa en visuell koll på vilken sida vi är på.
Då lägger vi till en annan routerlänk som navigerar till sidan Om. Då lägger vi till router-utlopp direktiv. Det är därför som komponenterna inte behöver en väljare. När de laddas till routing kommer detta direktiv att vara värd för komponenterna. Medan resten av denna mall visas statisk på varje sida, så kommer router-utlopp kommer att ändras baserat på vilken väg som navigeras till. Slutligen för den här filen lägger vi till routerdirektiven.
Efter det är det sista vi behöver göra att lägga till en CSS-regel till style.css fil:
.meny bakgrundsfärg: vit;
Denna regel gäller för den klass som ska tillämpas när rutten som är kopplad till routerns länk är aktiv. Bakgrunden till länken kommer att vara färgvit. Och nu är routing konfigurerad för vår app.
Fortsätt och spara projektet och springa npm start i projektmappen.
Om allt var gjort korrekt borde appen kompilera och sedan startas från en webbläsare.
Om du märker, bakgrundsbakgrundsbakgrunden är skuggad i vitt. Detta beror på att detta är den aktiva vägen. Då om vi klickar på Handla om knapp, vi borde gå till sidan Om.
Låt oss sedan skriva en obefintlig rutt till adressfältet. När vi gör det borde vi få en fel sida.
Vi har nu routing som arbetar i vår app, men det finns så mycket mer vi kan göra med det. Under resten av kursen kommer du dyka in i routing på mycket mer djup.
I hela kursen, Angular 2 Routing, lär jag dig hur du använder den nya Angular 2-routern i dina appar. Du kan se hur du konfigurerar grundläggande routing till statiska sidor, hur man extraherar parametrar från ruttsökvägen och hur du gör din routing modulär. Du får också se hur användaråtkomstkontrollen kan implementeras med Angular 2-routern.
Accentsconagua