What is Routing?
Angular routing is used to navigate from one page to another page in web application. Routing plays the main role to create the Single Page Application(SPA). SPA is nothing but the applications which loaded just once, and new content is added dynamically.
Routing is built and maintained by the core team behind Angular development and it’s contained in the @angular/router package.
Lets see some use cases where navigation takes place
- Suppose you entered some URL on browser and it navigates you to corresponding pages.
- On click of any link, browser navigates to new page
- On click of browser’s back and forward buttons , the browser navigates backward and forward through the history of pages.
Similarly in angular if we want to switch or navigate between the components, we can do it through the routing.
Lets understand routing by below example :
1. Create new angular project by below command –
It will ask you to add the routing in the application , so you just press ‘y’ to add the routing file.
Now it will ask for adding the css option , so you add any of the option and press enter –
After doing all these steps your application will created.
Now you can see the app.routing.module.ts file , where route array variable is created –
Here RouterModule and Routes is imported which is included in @angular/router package. And one routes array is created. The constant routes are strongly typed to Routes from the router package. It defines all the possible routes in this array. Routing is configured via the RouterModule.forRoot() method. Then we export the RouterModule to indicate that our module has a dependency on this module.
Inside the app.module.ts , you can see the dependency of AppRoutingModule.
Now whatever the content we want to render on browser for that we need to use <router-outlet> property from router itself, which specify the location where content will display.
So lets add below code in app.component.html file-
Now lets create two link inside the app.component.html file i.e home and about. For Example –
So here you can see two links home and about. Basically what we want when user will click on the home link it should navigate into home component and if user will click on about then it should navigate into about component. Thats why here routerLink is added which is basically manage the path. Now we need to create HomeComponent and AboutComponent and needs to define its path in routing file.
Lets create the HomeComponent by using below command –
Similarly create the AboutComponent –
Now lets add the Path of these two components in app.routing.module.ts file
Here you can see if path is blank or /home that time HomeComponent is loading. If path is /about then AboutComponent is loading. Now lets see the output in browser –
Navigate to /home
Navigate to /about
Conclusion : So this is how the routing works. This is the simple routing concept , there is another routing concept for lazy loaded module which is done by using the loadChildren property. If you want to see, how it works click here. In upcoming tutorials we will see the more things in routing. Like we can pass the parameter through route, get the current route details etc.
