Angular Routing

• In Angular, Routing is used for navigating between page and displaying appropriated component/page on browser.

• Angular Framework is mainly focused and good for the SPA (Single Page Application). Routing loads a single full HTML page and dynamically loads or updates the partial pages as per user request. And, that can be achieved with the help of router. A set of partial page loading rule  and urls is defined  in router to render or load partial pages based on user request. 

• In Angular, Routing helps navigation across the application from one view to another view. Routing also allows us to maintain the state, implement modules and load the modules based on the role of the user.

• An Angular application that uses Angular Router  only has one router service instance it’s a singleton. Whenever and wherever you  inject the Router service in your application, you’ll get  access to the same  Angular Router service instance.

Why Routing

• We access our application through one URL such as  http://localhost:4200 and our application is not aware of any other URL such as http://localhost:4200/login.

• Most Web application need to support different URLs to navigate users to different pages in the application.

Angular Router

• Angular Router is an official  Angular routing library, written and maintained by the Angular Core Team.

• Angular Router allows us to redirect a  URL to another URL.

• It Resolves a data before a page is displayed. 

• It run scripts when a page is activated or deactivated.

• Lazy load parts of our application.

Router Link

• With the help of routerLink directive, we can link to routes of our application right from the HTML template. Just add the directive to an HTML-Element. When the user clicks on that  element, angular navigates to the specified location.

• The routerLink is the selector for the RouterLInk directive that turns user clicks into router navigations. We can assing a string to the routerLink.

Router Link - Client Side
 

• <div><a [routerLink]=”[‘/student’]”>Student</a></div>
<router-outlet></router-outlet>

Router Link - Server Side

• To work with server-side rendering, we need to import the angular router.

  Import { Router }  from ‘@angular/router’;
constructor(private router: Router) {}

• Once we have that router, navigation is quite simple just call the navigate function  of Router.THis function takes an array. The first entry of the array  defines the string of the route that we want  to navigate. The second is optional and allows us to pass in a route parameter.

  this.router.navigate([‘/student’, 234]);

Use the CLI to generate it - 
 

Wildcard Route

• Wildcard route used to intercept invalid URLs and handle them gracefully. 

• A wildcard route has a path consisting of two asterisks (* *).

• It matches every URL, the router  will select this route if it can’t match a route  earlier in the configuration. A wildcard route can navigate to a custom “404 Not Found”  component or redirect to an existing route.

• If the entire router configuration is processed and there is not match, router navigation fails and an error is logged.

• If you add a wildcard route as the first route, no other routes would be reached and the wildcard  route would always be matched. As a result, you should always add a wildcard route as the last route in your router configuration.

  { path:  ‘**’, component: PageNotFoundComponent }

Child Route

• To create nested routing, you need to create a routing submodule for the module you want to provide routing, you next need to define a parent route and its child routes and provide them to the router configuration via a forChild() method.

• You can create a nested routing by defining child routes using the children property of a route.

  const routes: Routes = [
  {
    path: '',
    children: [
      { path: '', redirectTo: 'student', pathMatch: 'full' },
      { path: 'student', component: StudentComponent },
      { path: 'data', component: DataComponent }
    ]
  },
];

 Router Outlet

• Router Outlet is a dynamic component that the router uses to display views  based on router navigations.

• The role of  <router-outlet> is to mark where the router displays a view.
  (This is the location where  Angular  will insert the component that we want to route to on the view.)

• The <router-outlet> tells the router  where to display routed views.

• The RouterOutlet is one of the router directives that became available to the AppComponent because AppModule imports AppRoutingModule which exported RouterModule.

How Routing works in angular?

• Set <base href=”/”> in index.html.

• Import the RouterModule into the application root module  AppModule.

• It Configure the application routes.

• Routing Specify where you want the routed component view template to be displayed using the
  <router-outlet> directive.

• Create a navigation menu and tie the configured routes with menu using the routerLink directive.