Deep dive into Routing

Angular Raleigh Meetup

@AskUdhay

Hey, I'm Udhay (OO-dhy)

Routing

@AskUdhay

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.

@AskUdhay

Routing in Angular

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

@AskUdhay

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.

@AskUdhay

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

@AskUdhay

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.

@AskUdhay

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.

@AskUdhay

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

@AskUdhay

Any questions?

@AskUdhay

Let's get our hands dirty..

@AskUdhay

Goal 1

Create new module for Routing while creating Angular project and configure HomeComponent.

@AskUdhay

This command will create a new Angular project along with default routing module added..

ng n cookbook --routing=true

@AskUdhay

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 

guide

@AskUdhay

Run app, you should be seeing this..

@AskUdhay

Goal 2

Create Child components and configure Child routes.

@AskUdhay

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

@AskUdhay

Refer Goal 2 in the Deep dive into Angular Routing guide.

For code and other instructions..

guide

@AskUdhay

If everything goes fine, you should be seeing this..

http://localhost:4200/cuisine/American

@AskUdhay

You achieved TWO goals so far..

@AskUdhay

Goal 3

Create Route Param in Route Module and render Recipe component based on Meal ID

@AskUdhay

What you need to do?

Create a component:

             Recipe

Configure route:

 

{ path: &quot;recipe/:id&quot;, component: RecipeComponent },

@AskUdhay

Refer Goal 3 in the Deep dive into Angular Routing guide

For code and other instructions..

guide

@AskUdhay

Questions?

@AskUdhay

ng thanks!

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

@AskUdhay

Deep dive into Angular Routing

By Udhayakumar G

Made with Slides.com

Deep dive into Angular Routing

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

  • 2,564

More from Udhayakumar G