Angular Router And Its Essential Concepts

 

 

 

 

 

Angular Router is a powerful JavaScript router built and maintained by the Angular core team that 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. It is an important part of the web app development paradigm. 

 

The Angular router is a core part of the Angular platform in web app development. It enables developers to build Single Page Applications with multiple views and allow navigation between these views.

 

Let’s now see the essential Router concepts in detail.

THE ROUTER-OUTLET

The Router-Outlet is a directive that’s available from the router library where the Router inserts the component that gets matched based on the current browser’s URL. You can add multiple outlets in your Angular application which enables you to implement advanced routing scenarios.

 

<router-outlet></router-outlet>

 

Any component that gets matched by the Router will render it as a sibling of the Router outlet.

ROUTES AND PATHS

Routes are definitions (objects) comprised of at least a path and a component (or a redirect path) attributes. The path refers to the part of the URL that determines a unique view that should be displayed, and the component refers to the Angular component that needs to be associated with a path. Based on a route definition that we provide (via a static RouterModule.forRoot(routes) method), the Router is able to navigate the user to a specific view.

 

Each Route maps a URL path to a component.

 

The path can be empty which denotes the default path of an application and it’s usually the start of the application.

 

The path can take a wildcard string (**). 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 or redirecting to a specific view if no match is found.

 

This is an example of a route:

 

{ path:  ‘home’, component:  HomePageComponent}

If this route definition is provided to the Router configuration, the router will render HomePageComponent when the browser URL for the web application becomes /home.

ROUTE MATCHING STRATEGIES

The Angular Router provides different route matching strategies. The default strategy is simply checking if the current browser’s URL is prefixed with the path.

 

For example our previous route:

 

{ path:  ‘home’, component:  HomePageComponent}

Could be also written as:

{ path:  ‘home’,pathMatch: ‘prefix’, component:  ContactListComponent}

The patchMath attribute specifies the matching strategy. In this case, it’s the prefix that is the default.

The second  matching strategy is full. When it’s specified for a route, the router will check if the path is exactly equal to the path of the current browser’s URL:

{ path:  ‘home’,pathMatch: ‘full’, component:  HomePageComponent}

ROUTE PARAMS

Creating routes with parameters is a common feature in web apps. Angular Router allows you to access parameters in different ways:

• Using the ActivatedRoute service,

• Using the ParamMap observable available starting with v4.

•  

You can create a route parameter using the colon syntax. This is an example route with an id parameter:

{ path:  ‘home/:id’, component:  HomeDetailComponent}

ROUTE GUARDS

A route guard is a feature of the Angular Router that allows developers to run some logic when a route is requested, and based on that logic, it allows or denies the user access to the route. It’s commonly used to check if a user is logged in and has the authorization before he can access a page.

 

You can add a route guard by implementing the CanActivate interface available from the @angular/router package and extending the canActivate() method which holds the logic to allow or deny access to the route. For example, the following guard will always allow access to a route:

 

class MyGuard implements CanActivate {

  canActivate() {

    return true;

  }

}

You can then protect a route with the guard using the canActivate attribute:

{ path:  ‘home/:id, canActivate:[MyGuard], component:  HomeDetailComponent}

NAVIGATION DIRECTIVE

The Angular Router provides the router link directive to create navigation links. This directive takes the path associated with the component to navigate to. For example:

<a [routerLink]=”‘/Home'”>Home Page</a>

MULTIPLE OUTLETS AND AUXILIARY ROUTES

Angular Router supports multiple outlets in the same application.

A component has one associated primary route and can have auxiliary routes. Auxiliary routes enable developers to navigate multiple routes at the same time.

To create an auxiliary route, you’ll need a named router outlet where the component associated with the auxiliary route will be displayed.

<router-outlet></router-outlet>  

<router-outlet  name=”outlet1″></router-outlet> 

• The outlet with no name is the primary outlet.

• All outlets should have a name except for the primary outlet.

• You can then specify the outlet where you want to render your component using the outlet attribute

• { path: “home”, component: HomeComponent, outlet: “outlet1” }

 

Conclusion 

 

The angular router is mostly used for creating dashboards, for front-end developments. It can be a perfect choice for any kind of web application due to its stylish design and responsive layout.

 

 Lia Infraservices the best Mobile app development company in Chennai uses angular routers which allows us to access parameters in different ways. To know more about Lia infraservices the best web and Android app development company in Chennai visit our website.