Deep dive into Routing

Angular Raleigh Meetup

Hey, I'm Udhay (OO-dhy)

Routing

A way taken in getting from starting point to a destination.

Routing

It's the process of moving packets across a network from one host to a another.

Routing in Angular

Angular routing enables navigation from one view to another based on User's actions.

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.

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

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.

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.

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 }
];

Any questions?

Let's get our hands dirty..

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..

You achieved TWO goals so far..

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: &quot;recipe/:id&quot;, component: RecipeComponent },

Refer Goal 3 in the Deep dive into Angular Routing guide

For code and other instructions..

Questions?

ng thanks!

Hope the session was helpful to you to get learn more about Routing in Angular.

Deep dive into Angular Routing

By Udhayakumar G

Deep dive into Angular Routing

This presentation talks about: Angular Routing and different ways to implement it efficiently in Angular apps.

  • 2,564