Angular Academy · Lektion

Konfigurera routes

Hantera routes effektivt i Angular-applikationer.

Lektion 1 av 310 steg

Konfigurera routes är en gratis lektion i Angular Academy på CoddyKit. Detta är lektion 1 av 3. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för Angular Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Angular Academy innehåller totalt 3 lektioner.

Konfigurera routing i Angular

Den här lektionen introducerar Angulars routing, ett sätt att navigera mellan vyer och hantera URL:er i appen.

Vad är routing?

Routing hjälper dig att navigera mellan olika komponenter eller sidor i Angular-applikationen baserat på URL:en.

Konfigurera routingmodulen

Skapa en routingmodul när du startar projektet eller senare med Angular CLI:

ng generate module app-routing --flat --module=app

Definiera routes

Routes definieras som en array med sökvägar som är kopplade till komponenter:

const routes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'about', component: AboutComponent }
];

Router Outlet

Använd <router-outlet></router-outlet> för att rendera matchande komponenter dynamiskt baserat på routen.

<router-outlet></router-outlet>

Navigera med routerLink

Navigera mellan vyer med hjälp av direktivet routerLink:

<a routerLink="/home">Home</a>

Navigera programmatiskt

Du kan också navigera programmatiskt med hjälp av tjänsten Router:

this.router.navigate(['/home']);

Wildcard-routes

Hantera odefinierade sökvägar med wildcard-routes för att visa en anpassad 404-sida:

{ path: '**', component: PageNotFoundComponent }

Sammanfattning

Nu förstår du grunderna i routing och kan konfigurera routes effektivt i Angular-appar. Bra jobbat!

Gratis att börja

Lär dig HTML med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 38
Lektioner: 144

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Konfigurera routes” gratis?

Ja – du kan läsa vilka 3 lektioner som helst i lärvägen Angular Academy, inklusive ”Konfigurera routes”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i Angular Academy innehåller totalt 3 lektioner.

Vad lär jag mig i ”Konfigurera routes”?

Hantera routes effektivt i Angular-applikationer. Ni övar på Angular Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig Angular Academy?

Du behöver inga förkunskaper. Utbildningen i Angular Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 1 av 3.

Hur lång tid tar lektionen ”Konfigurera routes”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här Angular Academy-lektionen?

Ja. Varje Angular Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

← Tillbaka till Angular Academy