Angular Routing Example

The following two tabs change content below.
Prasad Kharkar is a java enthusiast and always keen to explore and learn java technologies. He is SCJP,OCPWCD, OCEJPAD and aspires to be java architect.

Latest posts by Prasad Kharkar (see all)

In previous article we learned about angular services. Now we will go further and create an angular routing example. Routing helps us navigate between different pages of app.

Angular Routing Example:

Our objective is to enhance our bikes store to use routing.

  • On home page, we will simply have a link to bikes page.
  • On bikes page we are going to show list of bikes
  • On click on each bike in list, app should navigate to a different url.
  • It should be able to show bike information.

From Design perspective:

  • We will separate out bikes related stuff from AppComponent.
  • We will create a bikes component which deals with getting and showing bikes.
  • We will create a bike-info component which should be used for displaying individual bike information.
  • A module named app-routing will have information about all routes used in application.

 

Create a new module named app-routing using angular CLI.

generate app routing module

generate app routing module

Create bikes component. We are going to use it to show list of bikes.

generate bikes component

generate bikes component

 

Now let us get started with angular routing code. You can checkout the repository https://github.com/theJavaGeek/angular/ and checkout branch angular-routing .

app-routing.module.ts:

  • routes is a variable of type Routes which defines path and corresponding components.
  •  { path: ‘information/:id’, component: BikeInfoComponent } means whenever information/:id is accessed, angular should load BikeInfoComponent.
  • RouterModule.forRoot(routes) : Creates a module which contains all routes and routing service.

app.component.ts:

Nothing significant to be done here right now. AppComponent simply specifies the template which should be loaded on home page.

app.component.html:

This will simply show text “Bikes” which invokes /bikes url. <router-outlet> specifies that whatever is result of above link, it should show it here.

Notice that we have included AppRoutingModule.

We are done with routing part. Now we need to code our services, component and html views. Let us get started with angular routing example.

bike.ts:

bike-store.ts:

bike-service.ts:

  • Notice the newly added getBike(id: number) method which returns a Promise of type Bike.
  • Note that it accepts a number parameter which is coming from :id parameter in /information/:id. 
  • getBike() method simply finds the bike with matching id.

bikes.component.html:

This simply iterates bikes from BikesComponent and shows in browser. On click of each bike, it calls showInfo() method passing current bike as parameter

bikes.component.ts:

  • We have included Router from angular router module.
  • We have injected router and bikeService so that it can be used by other methods in class.
  • in showInfo() method, we are assigning bike passed to method to selectedBike and passing id as path parameter using router.navigate method.

bike-info.component.ts:

  • We have injected bikeService and route in constructor so that it can be used in angular routing example.
  • ngOnInit() : method simply finds a bike with matching bike id. Forget about all the switchMap right now. We will get back to it later. Simply keep in mind that assigns the bike found with matching id to bike variable in BikeInfoComponent, so that its information can be shown in html

bike-info.component.html:

This will simply display all information of bike held by BikeInfoComponent.

Run Angular Routing Example:

Fire up your server from command line using npm start and open localhost:4200. You should see a link “Bikes” . Click on it and you should be able to view below screen.

bikes screen

bikes screen

Now click on any bike and you will see address bar url is changed and bike information is displayed.

bike details screen

bike details screen

I hope the angular routing example helped to get understanding of how routing works. We will look into more advanced topics in this tutorial series.

Share Button

3 comments for “Angular Routing Example

  1. José Gregorio Castillo Pacheco
    June 11, 2017 at 4:24 pm

    Mr Prasad Kharkar,

    Great tutorial series and I leraning a lot with them, but I have a problem showing the bikes info. I follow every step of your tutorial and found a method in bites.component.ts that is showInfo(), but I don´t know where is used. May that´s the reason I can´t show the bike´s info. Please let me know what to do in order to undertand this behaviour.

    • June 12, 2017 at 10:24 am

      Hi Jose, can you please post the error you are getting in comments? I will definitely look at it and try to solve.

  2. October 10, 2017 at 8:50 pm

    Great Article.

    One more great article about Angular 4 Router Outlet
    http://thetechieshouse.com/angular-4-router-outlet/

Leave a Reply

Your email address will not be published. Required fields are marked *