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
– 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
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
You can cover the following objectives when you compete reading this tutorial
Now you can follow the following steps to build simple application and understand the routing
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
Now we will create module so that we can have the products
and product
component inside it