Deep dive into Routing
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1255386/images/6995410/angular.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1255386/images/6995411/profile_pic.jpg)
Angular Raleigh Meetup
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1255386/images/6995412/Twitter_Social_Icon_Circle_Color.png)
Hey, I'm Udhay (OO-dhy)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1255386/images/6995433/angular_solidBlack__1_.png)
Routing
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1255386/images/6995412/Twitter_Social_Icon_Circle_Color.png)
![](https://media2.giphy.com/media/yhdKi9jOYoNSE/giphy.gif)
A way taken in getting from starting point to a destination.
Routing
![](https://media3.giphy.com/media/l41YvpiA9uMWw5AMU/giphy.gif)
It's the process of moving packets across a network from one host to a another.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1255386/images/6995412/Twitter_Social_Icon_Circle_Color.png)
Routing in Angular
Angular routing enables navigation from one view to another based on User's actions.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1255386/images/6995412/Twitter_Social_Icon_Circle_Color.png)
Navigation in browser..
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.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1255386/images/6995412/Twitter_Social_Icon_Circle_Color.png)
Angular Routing basics..
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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1255386/images/6995412/Twitter_Social_Icon_Circle_Color.png)
Angular Routing basics.. (contd)
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.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1255386/images/6995412/Twitter_Social_Icon_Circle_Color.png)
Angular Routing basics.. (contd)
<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.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1255386/images/6995412/Twitter_Social_Icon_Circle_Color.png)
Angular Routing basics.. (contd)
<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 }
];
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1255386/images/6995412/Twitter_Social_Icon_Circle_Color.png)
Any questions?
![](https://media0.giphy.com/media/8mndEBLsg9Whg2Sduv/giphy.gif)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1255386/images/6995412/Twitter_Social_Icon_Circle_Color.png)
Let's get our hands dirty..
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1255386/images/6995412/Twitter_Social_Icon_Circle_Color.png)
Goal 1
Create new module for Routing while creating Angular project and configure HomeComponent.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1255386/images/6995412/Twitter_Social_Icon_Circle_Color.png)
This command will create a new Angular project along with default routing module added..
ng n cookbook --routing=true
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1255386/images/7071288/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1255386/images/6995412/Twitter_Social_Icon_Circle_Color.png)
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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1255386/images/6995412/Twitter_Social_Icon_Circle_Color.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1255386/images/7071545/pasted-from-clipboard.png)
Run app, you should be seeing this..
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1255386/images/6995412/Twitter_Social_Icon_Circle_Color.png)
Goal 2
Create Child components and configure Child routes.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1255386/images/6995412/Twitter_Social_Icon_Circle_Color.png)
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
}
]
}
];
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1255386/images/6995412/Twitter_Social_Icon_Circle_Color.png)
![](https://media3.giphy.com/media/5noddpPJQxDNDaPWaP/giphy.gif)
Refer Goal 2 in the Deep dive into Angular Routing guide.
For code and other instructions..
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1255386/images/6995412/Twitter_Social_Icon_Circle_Color.png)
If everything goes fine, you should be seeing this..
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1255386/images/7071763/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1255386/images/6995412/Twitter_Social_Icon_Circle_Color.png)
You achieved TWO goals so far..
![](https://media1.giphy.com/media/BlVnrxJgTGsUw/giphy.gif)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1255386/images/6995412/Twitter_Social_Icon_Circle_Color.png)
Goal 3
Create Route Param in Route Module and render Recipe component based on Meal ID
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1255386/images/6995412/Twitter_Social_Icon_Circle_Color.png)
What you need to do?
Create a component:
Recipe
Configure route:
{ path: "recipe/:id", component: RecipeComponent },
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1255386/images/6995412/Twitter_Social_Icon_Circle_Color.png)
![](https://media3.giphy.com/media/5noddpPJQxDNDaPWaP/giphy.gif)
Refer Goal 3 in the Deep dive into Angular Routing guide
For code and other instructions..
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1255386/images/6995412/Twitter_Social_Icon_Circle_Color.png)
Questions?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1255386/images/6995412/Twitter_Social_Icon_Circle_Color.png)
ng thanks!
Hope the session was helpful to you to get learn more about Routing in Angular.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1255386/images/6995412/Twitter_Social_Icon_Circle_Color.png)