Yogesh Chauhan's Blog

How Routing works in Angular?

in Angular on May 9, 2020

Introduction to Angular concepts Part 3

Routing

The Angular Router NgModule provides a service that lets you define a navigation path among the different application states and view hierarchies in your app.

It is modeled on the familiar browser navigation conventions:

=> Enter a URL in the address bar and the browser navigates to a corresponding page.

=> Click links on the page and the browser navigates to a new page.

=> Click the browser's back and forward buttons and the browser navigates backward and forward through the history of pages you've seen.

The router maps URL-like paths to views instead of pages.

When a user performs an action, such as clicking a link, that would load a new page in the browser, the router intercepts the browser's behavior, and shows or hides view hierarchies.

If the router determines that the current application state requires particular functionality, and the module that defines it hasn't been loaded, the router can lazy-load the module on demand.

The router interprets a link URL according to your app's view navigation rules and data state.

You can navigate to new views when the user clicks a button or selects from a drop box, or in response to some other stimulus from any source.

The router logs activity in the browser's history, so the back and forward buttons work as well.

To define navigation rules, you associate navigation paths with your components.

A path uses a URL-like syntax. It integrates your program data, in much the same way that template syntax integrates your views with your program data.

In response to user input and your own access rules, you can then apply program logic to choose which views to show or to hide.

Credit: Angular.io


Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #3 How to add Read More Read Less Button using JavaScript? #4 How to uninstall Cocoapods from the Mac OS? #5 PHP Login System using PDO Part 1: Create User Registration Page #6 How to Use SQL MAX() Function with Dates?

Recently Posted

#Aug 15 Is PHP still good for back-end programming? #Aug 10 How to create a multisite network in WordPress? #Aug 3 How to create a circle that follows a cursor using JavaScript and CSS? #Aug 3 How to make a curtain slider using jQuery and CSS? #Aug 2 How to progressively load images and add a blurry placeholder? #Aug 1 How to create a placeholder loader (throbber) using CSS?
You might also like these
What are Class Constants in PHP?PHPClasses in JavaScript: The BasicsJavaScriptHow to create a link tag button using CSS?CSSThe Differences Between HAVING Clause and WHERE Clause in SQLSQL/MySQLLearn how to use Self JOIN in SQL and MySQLSQL/MySQLSQL Left JoinSQL/MySQL