All you need to know about Angular Routing

September 13, 2018

In this article I am going to discuss all you need to know about Angular routing when you develop single page application. In Single page application you have lot of navigation between components and modules. So you can study how to route among components and how to route among modules

Why do you need routing in Angular application?

– You need to navigate in Single Page Application
– You need to organize your application properly
– You need to map URL segment to component

Angular has built-in routing library you can use to develop single page application. Angular routing comes with the package @angular/router

Things you can do with routing

Pass Data– you can pass the data to the component via router. We will discus this in details at later stage
Route Guards – You can restrict accessing certain URL path using route guards
Lazy Loading – You can use router to lazy load some of the component according to your requirements

I am going to use simple example project which can be used to manage products. Product grid will display the list of products and when you click on the product SKU you can see the single product details

You will have following URL structure

http://localhost:4200/products
This URL will display the list of products fetching from the REST API
http://localhost:4200/products/20
This URL will display the single product where product_id=20

Objectives

You can cover the following objectives when you compete reading this tutorial

  1. Understand how to create Single Page Application
  2. How to consume REST API with Angular
  3. Angular routing

Steps to follow

Now you can follow the following steps to build simple application and understand the routing

  1. Create new Angular Project
  2. Create module for products
  3. Create products component
  4. Create product component

Create new Angular Project

You can use the Angular CLI to create new project. If you are not familiar with Angular CLI you can refer this tutorial

You can run following command in your terminal.

ng new inventory --routing

Create module for products

Now we will create module so that we can have the products and product component inside it