Angular Routing

Routing in a single-page application gives a feel to the user that the user will be just seeing HTML upgradation and new data rendering, this is a faster approach for avoiding the timespan of loading a whole new page from the server. Here only the view will be updated and for updating the view from one to another Angular Routing is used. The Router enables navigation by interpreting a browser URL as an instruction to change the view.

Angular Router

• Angular Router is a powerful Javascript router built and maintained by the Angular Core team and it can be installed by installing  @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.

Router Outlet

• The router-outlet is a directive available from the router Library which helps to change components based on the URL
• A single application can contain multiple router outlets
• For adding router outlets you need to add the following code in the HTML file

Routes and Paths

• Routes are comprised of a path and a component 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 the route definition provided router will navigate the user to a specific view
• Each route maps a URL path to a component
• The path can be empty which is a default path and is generally used at the start of the application

Wildcard routes

• Wildcard routes are defined by string (**)
• This route will be executed if the requested URL is not defined in the routes
• These routes are generally used to define Not Found routes
• For example,

Routes matching strategies

• Each route can have different matching strategies. Default strategies would be just matching routes in the browser URL which is just matching the route path’s prefix.
• For example, the default path definition can also be written as,

• Here the patchMath attribute specifies the matching strategy. In this case, it’s the prefix that is the default.
• Another 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:

Route Params

• For passing data between multiple components angular routes will help
• Angular Router allows you to access parameters in different ways:
• ActivatedRoute
• ParamMap
• For passing route params you can use colon syntax, For example:

Route Guards

• Developers can set the route guards to set a logic whenever a route is accessed.
• This logic will define whether the user should be able to access the component or not
• For example, If the developer wants to check if the user is logged in or not at that time route guard will not allow non logged in user to access private pages
• 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.
• Route guard example,

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

Navigation using HTML

• For creating navigation links, the angular router provides routerLink directives.
• This directive takes the path associated with the component to navigate to. For example:

Using multiple router outlets

• Using an angular router we can add multiple router outlets in a single 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.
• All outlets should have a name instead of the primary outlet.
• For example,

• Then you can specify the outlet in the routing file where you want your component to be rendered

Conclusion

This tutorial demonstrated how to use the Angular Router to add routing and navigation to our application. We covered concepts like router-oulet, routes, and paths.

Blog Ref: https://www.smashingmagazine.com/2018/11/a-complete-guide-to-routing-in-angular/