Routing and navigating is the essential function of any kind of application. Therefore, I will explain how to configure routing and navigating in angular with example.
Angular Router is a powerful javascript router and can be installed from the @angular/router package. It provides a complete routing library with the possibility to have multiple router outlets, different path matching strategies, easy access to route parameters and route guards to protect components from unauthorized access.
Angular router is a core part of the Angular platform. It enables developers to build Single Page Applications with multiple views and allow navigation between these views.
Let’s take an example for how to set up a route in angular:
First, you need to add <base> tag in index.html file as the first child of <head> tag to tell the router how to compose navigation URLs.
For example,
| <base href=”/”> |
Subsequently, you need to import the router package using @angular/router in your component module file. You can access router functionality from it as you would do it for other packages.
For Ex,
| import {RouterModule, Routes } from ‘@angular/router’; |
Now let’s see an example of how we can define all routes in the route file.
This is a simple example of a routes and configures the router via the RouterModule.forRoot() method.
|
const routes: Routes = [ { path: ‘ ’ , component : HomeComponent } { path: ‘mediaList’ , component : MediaListComponent } { path: ‘media/:id’ , component : MediaComponent } { path: ‘**’ , component: NotFoundComponent } ]; export const AppRoutes: ModuleWithProvides = RouterModule.forRoot(routes); |
In above example, path refers to the part pf the URL that define unique view that should be displayed, and component refers to the Angular component that needs to be associated with a path.
You can see, we have defined different types of paths in each route.
Let’s discuss what is the meaning of that.
First, the path is empty. This is the default route of the application. It is usually the start of the application.
If your route is like that, then the router will render MediaListComponent when browser URL for the web application becomes /medalist.
Third, This is a route parameter. You can create a route parameter using the colon syntax. You can see, we have passed the id parameter in our example.
Moreover, an Angular router allows you to access parameters using ActivatedRoute service.
Forth, This is the wildcard route. The router will select this route if the requested URL doesn’t match any paths for the defined routes. This can be used for displaying a “Not Found” view.
There is one extra attribute which is path match. It specifies the matching strategy.
For an example,
| { path : ‘media’ , pathMatch: ‘full’ , component: ‘MediaComponent’} |
A pathMatch attribute router will check if the path is exactly equal to the path of the current browser’s URL.
Note: Order of the routes in the configuration matters because Angular uses the first-match wins strategy.
Router-Outlet:
Now, it’s time to add the <router-outlet> tag in the application component template file.
| <router-outlet></router-outlet> |
Router-outlet is a directive from the router library. It is used as a component. It acts as a placeholder that marks the spot in the template where the router should display the components for that outlet.
In the above example, it will run when the browser URL matches our router path in the configuration file. It will render the corresponding component.
For instance, in our configuration file, it will render MediaComponent when browser URL becomes /media, and it will match to route path media.
In addition, you can define multiple Router-outlets.
Router-Links:
We can also navigate one page to another using Router-Links. It gives functionality like an anchor tag.
We can declare Router-Links in the same place as we have declared Router-outlet.
Example:
| <a routerLink=”/media” routerLinkActive=”active”>Media</a> |
The routerLinkActive directive toggles css classes for active RouterLink bindings based on the current RouterState.
Conclusion:
In this article, we have learned how to use Angular Router to add routing and navigation in our application. Similarly, we have seen different concepts like Router-outlet, Router-Links and routes and paths. We will see Route Guards in our next topic.