Angular Routing
This series aims to change that, by giving you, the developer, a deeper understanding of the router.
This introductory article will provide an overview of the router’s architecture, as well as some useful models for gaining an second sight of how routing works in Angular.
Routing
The angular Router is the main part of Angular platform. It allows developers to build single-page applications with multiple views and allow navigation between views.
Angular supports SPA using routing module ngRoute. The routing module acts based on the URL. It works as a browser navigation’s bar, and it was navigating between the pages.
- Enter URL in the address bar, and then the browser will navigate to the corresponding page.
- Click on the link to the page and the browser will navigate to the new page.
- Click on the browser on the back or forward, and the browser will navigate backward or forward according to the history pages.
Working of Router:
The Angular Router uses to navigate between views or pages that trigger by the user actions. Its a standard behavior in the web application. The navigation or view changes happen when the user clicks on the link, click on the button, or enter the URL from the browser address bar.
When we run an Angular application and serve it on a port number say ( 4200 ), we get our application running at http://localhost:4200
This is the only path our browser understands, and hence it can’t serve different destinations on different paths such as http://localhost:4200/items.
How to Set-up routing in Angular:
Routing could be easily added to a project. Now we have the message,“ Would you like to add angular routing?”(Y/N),if we answered by Y. The angular Router was set up in our project without having added it manually.
Otherwise, if we have no option like that, then we have to import it manually in our project.
- Firstly open our project where we have to import or add the routing module.
- In the same directory, we have to write the command ng g module app-routing
The concept related to the Router are:
The Router-outlet
The router-outlet is a directive that’s available from the @angular/router package and is used by the router to mark where in a template, a matched component should be inserted. We can add multiple outlets in our angular application, which enables us to implement advanced routing scenarios.
<router-outlet></router-outlet>
Routes And Paths
The path mention to the part of the URL that determines a unique view that can be displayed, and refer to the Angular component that needs to be associated with a path.
The path could take a string (**). The Router selects this route if the called URL doesn’t match the explained routes. It can be used for displaying a “Not Found” view or redirecting to a specific view if there is no match.
{path:’contacts’, component: ContactListComponent}
If the route definition is provided to the router configuration, the router will render ContactListComponent when the browser URL for the web application /contacts.
Defining the Routes
After creating and implementing the components of our application, now you need to add them to the router.
Open the src/app/app -routing.module.ts file and start by importing your components:
For example;
RouterLink :
If we want to navigate between routes, we use the RouterLink directive. So if we wanted to link to our login and dashboard page from a navigation, we could change our view above to something like this:
The argument to router-link is an array with the route name as the first element This indicates which route to navigate to when we click the element. Notice that we put the name of the route here and not the URL.
Locating the imports
To find all of the constants we used above, we use the following:
There we go! That’s more-or-less all the basics you need to know to get routing up and running for Angular.
I hope this guide has been helpful for you.
