Udhayakumar G
Am a seasoned Full stack java developer, have close to 11 years experience in developing software systems (both frontend and backend). Love to share my knowledge with community. Happy coding!
Angular Raleigh Meetup
Hey, I'm Udhay (OO-dhy)
A way taken in getting from starting point to a destination.
It's the process of moving packets across a network from one host to a another.
Angular routing enables navigation from one view to another based on User's actions.
1. Enter a URL in the address bar and the browser navigates to a corresponding page.
2. Click links on the page and the browser navigates to a new page.
3. Click the browser's back and forward buttons and the browser navigates backward and forward through the history of pages you've seen.
1. Add base tag in index.html to let know Routing how to compose navigation URLs
<base href="/">
import { RouterModule, Routes } from '@angular/router';
2. Import RouterModule and Routes from @angular/router library in app.module.ts
const appRoutes: Routes = [
{ path: '', component: HomeComponent },
{ path: 'dashboard', component: DashboardComponent },
{ path: '**', component: PageNotFoundComponent }
];
@NgModule({
imports: [
RouterModule.forRoot(
appRoutes,
{ enableTracing: true } // <-- debugging purposes only
)
// other imports here
],
...
})
export class AppModule { }
3. Configure paths in appRoutes obect and assign it to RouterModule.forRoot() method in imports array of NgModule.
<router-outlet></router-outlet>
4. Add router-outlet directive, acts like a placeholder that marks the spot in the template where the router should display the components for the matching path in URL.
<app-root>
<router-outlet>
<app-home>
<app-root>
<router-outlet>
<app-dashboard>
http://localhost:4200/
http://localhost:4200/dashboard
const appRoutes: Routes = [
{ path: '',
component: HomeComponent },
{ path: 'dashboard',
component: DashboardComponent },
{ path: '**',
component: PageNotFoundComponent }
];
Goal 1
Create new module for Routing while creating Angular project and configure HomeComponent.
This command will create a new Angular project along with default routing module added..
ng n cookbook --routing=true
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
So we just need to configure the Paths and Components, most of the boiler plate code is handled by Angular itself.
Create HomeComponent and configure the path in routes as: {path: "", component: HomeComponent}
Refer Goal 1 in the Deep dive into Angular Routing
Run app, you should be seeing this..
Goal 2
Create Child components and configure Child routes.
What you need to do?
Create six components:
1. Cuisine
2. American
3. Chinese
4. Indian
5. Mexican
6. Recipes
Create service:
1. Recipe
Configure routes:
const routes: Routes = [
{ path: "", component: HomeComponent },
{
path: "cuisine",
component: CuisineComponent,
children: [
{
path: "American",
component: AmericanComponent
},
{
path: "Chinese",
component: ChineseComponent
},
{
path: "Indian",
component: IndianComponent
},
{
path: "Mexican",
component: MexicanComponent
}
]
}
];
Refer Goal 2 in the Deep dive into Angular Routing guide.
For code and other instructions..
If everything goes fine, you should be seeing this..
Goal 3
Create Route Param in Route Module and render Recipe component based on Meal ID
What you need to do?
Create a component:
Recipe
Configure route:
{ path: "recipe/:id", component: RecipeComponent },
Refer Goal 3 in the Deep dive into Angular Routing guide
For code and other instructions..
Hope the session was helpful to you to get learn more about Routing in Angular.
By Udhayakumar G
This presentation talks about: Angular Routing and different ways to implement it efficiently in Angular apps.
Am a seasoned Full stack java developer, have close to 11 years experience in developing software systems (both frontend and backend). Love to share my knowledge with community. Happy coding!