Routing concepts of Angular.

In this blog, we are going to learn about the Angular Router.Routing concepts of Angular

The Angular router is an essential element of the Angular platform. It allows developers to build Single Page Applications with multiple states and views using routes and components and allows client-side navigation and routing between the various components. It’s built and maintained by the core team behind Angular development and it’s contained in the @angular/router package.

You can use the browser’s URL to navigate between Angular components in the same way you can use the usual server-side navigation.

Some features of Angular Routing:

  • The support for multiple Router outlets which helps you easily add complex routing scenario like nested routing.
  • Various path matching strategies ( prefix and full) to tell the Router how to match a specific path to a component.
  • Easy access to route parameters and query parameters, Resolvers.
  • Lazy loading of modules
  • Route guards for adding client side protection and allow or disallow access to components or modules, etc.

Routes and Paths

In Angular, a route is an object (instance of Route) that provides information about which component maps to a specific path. A path is the fragment of a URL that determines where exactly is located the resource (or page) you want to access. You can get the path by taking off the domain name from the URL

The path is a string that specifies the path of the route. path match is a string that specifies the matching strategy. It can take prefix or full. the component is a component type that specifies the component that should be mapped to the route. redirect to is the URL fragment to which you will be redirected if a route is matched.

For example, this is the definition of a route that maps the /my/path/ path to the MyComponent component:

{ path: ‘my/path/’, component: MyComponent }