Angular Router

-

In Previous topic we have looked into HTTP Client in Angular, In this topic we will look routing mechanism in Angular. we will set up and configure router.

Routing ➤➤

Routing allow us to navigate from one component to another based on action taken by users.

The Angular router module is a separate module which is present in @angular/router package.

Configure Angular Router :

Angular Router is configured automatically when we create a new application using Angular CLI. If you want to do it manually you need to follow below steps.

1. Base href tag:

you have to place <base href="/"> inside index.html within the head tag as shown below.
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>SchoolManagementSystem</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>

2. Defining Routes :

You can create a module if not present in side app folder where you can define all the routes. After that you can create array of route object each route maps the path to the component.
Each route can have different attribute like path, component, pathMatch, children, redirectTo etc. After defining the routes you have to register the routes, import the routing module from @angular/router library. Sample code shown below

Here you can see that in routes first path is ' ' and component is LoginComponent which means if you type http://localhost:4200/ it will route to http://localhost:4200/login i.e. login page.
Similarly in last route you can see we have used special string ** which means if the requested URL doesn't match any of your defined path or route it will navigate to Error Page i.e. ErrorComponent. example : http://localhost:4200/xyz it will route to Error Page.

Now you have to import AppRoutingModule in your root module i.e. app.module.ts so that it will be globally accessible.

 Finally we need to tell angular where to display the view, this is done by <router-outlet> directive . we will add this directive in root component as shown below.
As we have configured our router now we will look into some more important properties in Router:

Angular Route Guard ➤➤

Angular Route guards are interfaces provided by Angular, when we implement it, it allows us to control accessibility of a route based on conditions provided in class implementation of that interface.

There are five different types of guards.
  • CanActivate
  • CanActivatedChild
  • CanDeactivate
  • canLoad
  • Resolve
For example we will configure canActivate in code, for that i have created one service using cmd "ng generate service router"


After creating RouterService we will implement canActivate interface, we will check if user is logged in then we can route otherwise it will route to login page. Code Below:


and same we have to use this in app routing module to route to login page if not logged in. code Below:


Router Link ➤➤

RouterLink is a directive on anchor tag. As in single page application we don't have different page to link, instead we have different view or component to display the users. 

<a routerLink="/homepage">
    Link that uses a string.
</a>

In above you can see we didn't use bracket for routerLink, by using this way it means we are hardcoded the string and it cannot be changed, it will be same throughout application.

When we are using bracket it means we are passing a bindable property, so this variable "homepage" could be defined inside your class and it should have value and we can change it as per requirement as this is dynamic.

<a [routerLink]="homepage">
    Link that uses a string.
</a>

Comments

Post a Comment

Popular posts from this blog

Introduction to Angular

-
Welcome to the  Angular Tutorial . we will create an application at the end of this tutorial. we are writing this tutorial at the time of Angular 14 release. What is Angular? Angular is a UI Framework which is used to create Desktop and Mobile web Application. Angular  is built using JavaScript . The Angular is an open-source and helps us build dynamic & single-page applications (SPAs). With Angular you can create client-side application using HTML, CSS and TypeScript. Key differences between AngularJs & Angular 1. Controller and components In AngularJs we have controllers but in Angular we have component in place of controller.  In Angular, a component represents a UI element. You can have any number of components on a single web page. Each component is independent of each other and manages a section of the page. The components can have child components and parent components. 2. Directives Syntax of Directive is different in Angular as compared to AngularJs....
Read more

Bootstrap in Angular

-
Image
Angular Components   In this topic we will look how Angular work internally and bootstrap application. When you create a new angular project using ng new 'project Name' it will generate many files like shown below: checkout  Angular Application with Angular CLI  for more...   What is Bootstrapping ? Bootstrapping is a technique of loading or initializing our angular application. Angular takes following steps to our first view. 1. Index.html gets loaded. 2. Libraries gets loaded. 3. Main.ts entry point for application. 4. Root Module. 5. Root Component. 6. Templates. Index.html Index.html is the first page to load, you can find index.html under src folder src → index.html.  you can see index.html does not contain any javascript or stylesheet file, it only contain html tag  <app-root></app-root> inside body. index.html will look as shown below: <!doctype html > <html lang = "en" > <head>   <meta charset = "u...
Read more

Angular Directives

-
Image
In this topic we will look into angular directives and you can check our previous topic on Data Binding in angular application . What are Angular Directives?  Angular Directives are the elements which are basically used to change the behavior's or appearance of DOM(Document Object Model) element, Or you can say that directives are basically use to extend the power of HTML attributes and to change the appearance and behavior of DOM element. Types of Directives ➤➤ There are three types of directives based on behavior: 1. Structural Directives   ⮚   Structural Directives will shape the HTML view by adding or removing the element from DOM. There are three structural directives available: i. NgFor (*ngFor) 🠞 ngFor is built-in directive and belongs to structural directives. It is similar to for loop used in many programing language like java. So ngFor directive is used to iterate over collection. The Syntax used for ngFor =  *ngFor=”let <value> of <collectio...
Read more