Angular Common Routing Tasks

The command uses the Angular CLI to generate the basic Angular application with an application routing module called AppRoutingModule. NgModule is used to configure your router. In the below example, the application name is routing-app.

The CLI prompts to select the CSS or a CSS pre-processor when generating a new application.

Adding Components for Routing

An application needs two components to navigate one to another to use the Angular router. To create a component by using the CLI, enter the command line where the first is the name of your Component:

If you write First-Component, your Component would be FirstComponent.

The guide works with CLI-generated Angular applications. If you are working manually, make sure your index.html file has a <base href=”..//“> in the <head>.

Importing new components

To use new components, import into the AppRoutingModule at the top of the file as given below:

  AppRoutingModule (excerpt)  content_copyimport { FirstComponent } from ‘./first/first.component’;  import { SecondComponent } from ‘./second/second.component’;  

There are three basic building blocks to building a route:

Import AppRoutingModule in AppModule and add it to the imports array.

If you create an application manually or work with an existing, non-CLI application, verify the configuration is correct or not. The following is the default AppModule that uses the CLI with the –routing flag.

1: Default CLI AppModule by the routing

  content_copyimport { BrowserModule } from ‘@angular/platform-browser’;  import { NgModule } from ‘@angular/core’;  import { AppComponent } from ‘./app.component’;  import { AppRoutingModule } from ‘./app-routing.module’;  @NgModule({    declarations: [      AppComponent    ],    imports: [      BrowserModule,      AppRoutingModule // CLI adds AppRoutingModule    ],    providers: [],    bootstrap: [AppComponent]  })  export class AppModule { }  

Import the router module to your routing module.

Angular CLI does the step automatically. The CLI also sets up a routing array for your routes and configures the import and export arrays for @NgModule ().

2: CLI application routing module

  content_copyimport { NgModule } from ‘@angular/core’;  import { Routes, RouterModule } from ‘@angular/router’; // CLI imports router    const routes: Routes = []; // sets up routes where you define your routes    // configures NgModule imports and exports  @NgModule({    imports: [RouterModule.forRoot(routes)],    exports: [RouterModule]  })  export class AppRoutingModule { }  

3: Define routes in your routes array.

Each route in the array is a JavaScript object with two properties. The first path defines the URL path. The second property, Component, defines the Component that Angular uses for relative paths.

  AppRoutingModule (excerpt)  content_copyconst route:route = [     {path: ‘first-component’, component: firstComponent},     {path: ‘second-component’, component: second-component},  ];  

Add routes to your application.

Assign the anchor tag you want to add in the route to the RouterLink attribute. When the user clicks on each link, set the attribute’s value on the Component to show. Update your component template to include <router-outlet>. The element informs Angular to update the application view with the Component for the selected route.

Template with RouterLink and router-outlet

  content_copy<h1>Angular Router App</h1>  <!– This nav gives the links to click, which tells the router to use (defined in the routes constant in  AppRoutingModule) –>  <nav>    <ul>      <li><a routerLink=”/first-component” routerLinkActive=”active”>First Component</a></li>      <li><a routerLink=”/second-component” routerLinkActive=”active”>Second Component</a></li>    </ul>  </nav>  <!– The routed views render in the <router-outlet>–>  <router-outlet></router-outlet>  

Route order

The router is important because the router uses the first match-winning strategy when matching routes, so more-specific routes are placed above less-specific routes. You can use a route to pass the type of information to your application components.

Import ActivatedRoute and ParamMap to your Component.

  content_copyimport { Router, ActivatedRoute, ParamMap } from ‘@angular/router’;  

The import statements add several important elements that the Component requires.

Router

ActivatedRoute

Inject an instance of ActivatedRoute by adding it to the application’s constructor:

ngOnInit() method is used to access the ActivatedRoute and track the id parameter:

  content_copyngOnInit() {    this.route.queryParams.subscribe(params => {      this.name = params[‘name’];    });  }  

Note: The example uses a variable name and assigns it a value based on the name parameter.

Set Wildcard Route

A well-functioning application should handle when a user tries to navigate a part of your application that doesn’t exist. To add the functionality to the application, you set up a wildcard route. The angular router selects the route when the requested URL does not match the router path.

Two asterisks, **, indicate that the definition of this route is a wildcard route. Common options include an application-specific PageNotFoundComponent, which you can define to display a 404 page to your users or redirect them to the main Component of your application.

Display 404 page

To display the 404 page, set up a wildcard route with Component property set to the component you want to use for 404 page:

  AppRoutingModule (excerpt)  content_copyconst routes: Routes = [    { path: ‘first-component’, component: FirstComponent },    { path: ‘second-component’, component: SecondComponent },    { path: ‘**’, component: PageNotFoundComponent },  // Wildcard route   ];  

The last route with a path of ** is a wildcard route. The router selects the route if the requested URL does not match any earlier paths in the list and sends the user to PageNotFound Component.

Set up redirects

It configures a route with the path you want to redirect.

  AppRoutingModule (excerpt)  content_copyconst routes: Routes = [    { path: ‘first-component’, component: FirstComponent },    { path: ‘second-component’, component: SecondComponent },    { path: ”,   redirectTo: ‘/first-component’, pathMatch: ‘full’ },    { path: ‘**’, component: PageNotFoundComponent },   ];  

In the example, the third route is a redirect where the router defaults to the first-component route.

Nesting route

You may route relative to a component other than your parent component as your application becomes more complex. Here, AppComponent has its own <nav> and another <router-outlet> in addition to First Component.

  content_copy<h2>First Component</h2>    <nav>    <ul>      <li><a routerLink=”child-a”>Child A</a></li>      <li><a routerLink=”child-b”>Child B</a></li>    </ul>  </nav>    <router-outlet></router-outlet>  

A child route is another route in that it requires both a path and a component. One difference is that you keep the child routes in the children array within the parent route.

  AppRoutingModule (excerpt)  content_copyconst routes: Routes = [    {      path: ‘first-component’,      component: FirstComponent, // It is the component with the  in the template      children: [        {          path: ‘child-a’, // child route path          component: ChildAComponent, // child route component that the router renders        },        {          path: ‘child-b’,          component: ChildBComponent,        },      ],    },  ];  

Using Relative Paths

The wildcard route comes last because it matches each URL, and the router picks it up only if no route matches first.

Get Route Information

You want the Component to retrieve the ID for the grocery item to display the correct information to the user.

You can use a route to get the type of information to the application components.

  content_copy<h2>First Component</h2>    <nav>    <ul>      <li><a routerLink=”../second-component”>Relative Route to second component</a></li>    </ul>  </nav>  <router-outlet></router-outlet>  

You can use ./ to specify the current level.

Specifying a relative route

Use the Navigation Additional relative property in the component class to specify a relative route, import the navigation extras from @angular/router.

The link parameter array containing the items set an object with the corresponding property to the active root.

RelativeTo

  content_copygoToItems() {    this.router.navigate([‘items’], { relativeTo: this.route });  }  

The goToItems() method interprets that the destination URL is relative to the active route and navigates to the item route.

Accessing Query Parameters

The feature of your application requires access to the part of the root, such as a query parameter or a fragment. The Tour of Heroes application uses a list view.

Component import statements

  content_copyimport { ActivatedRoute } from ‘@angular/router’;  import { Observable } from ‘rxjs’;  import { switchMap } from ‘rxjs/operators’;  

Next, inject the activated route service:

Configure the class to have an observable, hero$, selected to hold the hero’s id number and heroes. In ngOnInit(), add the following code to get the selected hero’s id. The code snippet assumes that you have a list of heroes, a hero service, a function to get your heroes, and HTML to render your list and description, as in the Tour of Heroes example.

Component 1

  content_copyheroes$: Observable;  selectedId: number;  heroes = HEROES;    ngOnInit() {    this.heroes$ = this.route.paramMap.pipe(      switchMap(params => {        this.selectedId = Number(params.get(‘id’));        return this.service.getHeroes();      })    );  }  

Import the following members in the component that you want to navigate.

Component 2

  content_copyimport { Router, ActivatedRoute, ParamMap } from ‘@angular/router’;  import { Observable } from ‘rxjs’;  

Inject ActivatedRoute in the constructor of the component class.

  content_copyhero$: Observable;      constructor(      private route: ActivatedRoute,      private router: Router  ) {}      ngOnInit() {      const heroId = this.route.snapshot.paramMap.get(‘id’);      this.hero$ = this.service.getHero(heroId);    }      gotoItems(hero: Hero) {      const heroId = hero ? hero.id : null;        this.router.navigate([‘/heroes’, { id: heroId }]);    }  

Lazy loading

Instead of loading all modules as required, you can configure your router to lazy load modules that Angular loads modules only when the application is launched.

Prevent unauthorized access

Use Root Guard to prevent users from navigating to certain parts of an application without authorization. The following root guards are available in Angular:

CanActivate
CanActivateChild
CanDeactivate
Resolve
CanLoad

Create a service for your guard:

The below example uses enabled to protect the route.

  Component (excerpt)  content_copyexport class YourGuard implements CanActivate {    canActivate(      next: ActivatedRouteSnapshot,      state: RouterStateSnapshot): boolean {        // your  logic goes here    }  }  

In your routing module, use the below property in the routes configuration.

  Routing module (excerpt)  content_copy{    path: ‘/your-path’,    component: YourComponent,    canActivate: [YourGuard],  }  

Link parameters array

A link parameter array contains the following content for router navigation:

The path of the destination component’s route.
Required and optional route parameters that go in the route URL.

You can bind the RouterLink directive to an array:

  src/app/app.component.ts (h-anchor)  content_copy<a [routerLink]=”[‘/heroes’]”>hero</a>  

The below is a two-element array which specifying route parameters:

  src/app/heroes/hero-list/hero-list.component.html (nav-to-detail)  content_copy<a [routerLink]=”[‘/hero’, hero.id]”>     <span class=”badge”>{{ hero.id }}</span>{{ hero.name }}  </a>  

You can provide an optional route parameter to an object, such as {foo: ‘foo’ }:

  src/app/app.component.ts (cc-query-params)  content_copy<a [routerLink]=”[‘/crisis-center’, { foo: ‘foo’ }]”>crisis center</a>  

The examples cover the needs of an application with one level of routing. However, with a child router, you create new link array possibilities.

The below minimal RouterLink example creates a specified default child route for the crisis center.

  src/app/app.component.ts (cc-anchor-w-default)  content_copy<a [routerLink]=”[‘/crisis-center’]”>crisis center</a>  

The first item in the array identifies the original route (/crisis-center).

There are no parameters for this basic route.
There’s no default for a child root, so you’ll have to choose one.

  src/app/app.component.ts (dragon-anchor)  content_copy<a [routerLink]=”[‘/crisis-center’, 1]”>Dragon Crisis</a>  

The first item in the array identifies original route (/crisis-center).

There are no parameters for this basic route.
The second item identifies the child rout
e array (1).
The resulting path is /crisis-center/1.

You can redefine the AppComponent template with crisis center routes:

  src/app/app.component.ts (template)  content_copytemplate: `    <h1 class=”title”>Angular Router</h1>    <nav>      <a [routerLink]=”[‘/crisis-center’]”>crisis center</a>      <a [routerLink]=”[‘/crisis-center/1’, { foo: ‘foo’ }]”>Dragon Crisis</a>      <a [routerLink]=”[‘/crisis-center/2’]”>Shark Crisis</a>    </nav>    <router-outlet> </router-outlet>  

The link parameter array provides the flexibility to represent any routing depth to any legal sequence of route paths, router parameters, and route parameter objects.

Location Strategy and Browser URL Styles

The router can create a “natural” URL indistinguishable from one that would require a page load.

Older browsers send page requests to the server when the URL changes unless followed by a “#” (known as a “hash”). Routers take advantage of this exception by creating an in-application route URL with a hash. Here is a “hash URL” that leads to the crisis center.

The router supports both styles with two location strategy providers:

PathLocationStrategy-the default “HTML5 pushState” style.
PathLocationStrategy-the “Hash URL” style.

You have the option to switch to HashLocationStrategy with an override during the bootstrapping process.

Choosing a Routing Strategy

Rendering critical pages on the server is a technique that significantly improves perceived responsiveness when the application first loads. An application that would otherwise take ten or more seconds to start up can be presented on a server and delivered to a user’s device in less than a second.

<base href>

The router uses the browser’s history. PushState allows you to customize in-application URL paths.

For example, localhost: 4200/crisis-center. In-application URLs may be indistinguishable from server URLs.

The developers use HTML5 URLs in two steps:

Provide the router with the appropriate APP_BASE_HREF value.
Use root URLs (with authority) for all web resources: CSS, images, scripts, and HTML files.
<base href> paths must end with “/” because browsers ignore characters in the path that follow the rightmost “/”.
If the <base href> contains a query part, the query is only used if the path to a link in the page is empty and does not contain a query. It means that a query in a <base href> is included only when using HashLocationStrategy.
If a link in the page is a root <base href> is not used.

Path Location Strategy

  src/app/app.module.ts (hash URL strategy)  content_copyimport { NgModule } from ‘@angular/core’;  import { BrowserModule } from ‘@angular/platform-browser’;  import { FormsModule } from ‘@angular/forms’;  import { Routes, RouterModule } from ‘@angular/router’;    import { AppComponent } from ‘./app.component’;  import { PageNotFoundComponent } from ‘./page-not-found/page-not-found.component’;    const routes: Routes = [    ];    @NgModule({    imports: [      BrowserModule,      FormsModule,      RouterModule.forRoot(routes, { useHash: true })  // …/#/crisis-center/    ],    declarations: [      AppComponent,      PageNotFoundComponent    ],    providers: [      ],    bootstrap: [ AppComponent ]  })  export class AppModule { }  

Next TopicAngular ng-module

Angular Common Routing Tasks

Angular Common Routing Tasks

Adding Components for Routing

Importing new components

There are three basic building blocks to building a route:

1: Default CLI AppModule by the routing

2: CLI application routing module

3: Define routes in your routes array.

Add routes to your application.

Template with RouterLink and router-outlet

Route order

Router

Note: The example uses a variable name and assigns it a value based on the name parameter.

Set Wildcard Route

Display 404 page

Set up redirects

Nesting route

Using Relative Paths

Get Route Information

Specifying a relative route

Accessing Query Parameters

Component import statements

Component 2

Lazy loading

Prevent unauthorized access

Create a service for your guard:

Link parameters array

Location Strategy and Browser URL Styles

Choosing a Routing Strategy

<base href>

The developers use HTML5 URLs in two steps:

Path Location Strategy

Angular Material Fab-Toolbar

AutoCAD Student’s Version 2020 Download

You may also like