Routing in AngularJS enables us to implement Multiple SPA Single Page Applications. A Multiple Application contains more than one View.Routing helps you to divide your application into logical views and bind different views to the controller.
In HTML templates, where each template is associated with a specific route and dynamically loads the result of the user’s action. Clicking on the link and typing the specific URL in the browser, all this is possible only through the use of routing.
AngularJS Application can show different Material on which Way is selected. Roots is basically for Specific Ingredients Angular JS Application of Bookmark Enabled url. Routing helps you to divide your application into Logical Views and also binds different Views for Controllers.
Routing is one of the main features in AngularJS. In AngularJS Routing Examples, we will create a variety of small single pages that will show you how Routing works in AngularJS.
Example..
<!DOCTYPE html>
<html>
<head>
<title>Angular Routing Example</title>
<script src =
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js">
</script>
<script src =
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js">
</script>
</head>
<body ng-app="myApp">
<p><a href="#/!">Main</a></p>
<a href="#!maroon">Green</a>
<a href="#!navy">Pink</a>
<a href="#!purple">Red</a>
<div ng-view></div>
<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "main.htm"
})
.when("/red", {
templateUrl : "green.htm"
})
.when("/green", {
templateUrl : "pink.htm"
})
.when("/blue", {
templateUrl : "red.htm"
});
});
</script>
<p>Plz Click on the links</p>
</body>
</html>
Output..
Plz Click on the links