Hi rani,
The UI-Router is a third party routing framework for AngularJS. It provides everything that the ngRoute module provides plus many additional features. These additional features are very useful for larger applications.
ui-router implements routing based on the state of the application where as ngRoute implements routing based on the route URL.
This means with ngRoute, views and routes are tied to the application URL where as with ui-router views and routes are not tied to the application URL which means parts of the site can be changed even if the URL does not change.
Check this example. Now please take its reference and correct your code.
HTML
Default Page
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.22/angular-ui-router.min.js"></script>
<script type="text/javascript">
var app = angular.module("MyApp", ["ui.router"]);
app.controller("MyController1", ['$scope', function ($scope) {
$scope.Greeting = "Controller 1";
} ]);
app.controller("MyController2", ['$scope', function ($scope) {
$scope.Greeting = "Controller 2";
} ]);
app.controller("MyController3", ['$scope', function ($scope) {
$scope.Greeting = "Controller 3";
} ]);
app.controller("MyController4", ['$scope', function ($scope) {
$scope.Greeting = "Controller 4";
} ]);
app.config(['$stateProvider', function ($stateProvider) {
$stateProvider.state("Main", {
url: "/Main",
templateUrl: "Main.htm",
controller: "MyController1"
}).state("Red", {
url: "/Red",
templateUrl: "Red.htm",
controller: "MyController2"
}).state("Green", {
url: "/Green",
templateUrl: "Green.htm",
controller: "MyController3"
}).state("Blue", {
url: "/Blue",
templateUrl: "Blue.htm",
controller: "MyController4"
});
} ]);
</script>
</head>
<body>
<div ng-app="MyApp">
<ul>
<li><a href="#!Main">Main</a></li>
<li><a href="#!Red">Red</a></li>
<li><a href="#!Green">Green</a></li>
<li><a href="#!Blue">Blue</a></li>
</ul>
<hr />
<div ng-controller="MyController1"></div>
<div ng-controller="MyController2"></div>
<div ng-controller="MyController3"></div>
<div ng-controller="MyController4"></div>
<div ui-view=""></div>
</div>
</body>
</html>
Main.htm
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<div>
<h3>{{Greeting}}</h3>
This is Main page content.
</div>
</body>
</html>
Red.htm
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<div style="background-color: Red; color: White;">
<h3>{{Greeting}}</h3>
This is Red page content.
</div>
</body>
</html>
Green.htm
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<div style="background-color: Green; color: White;">
<h3>{{Greeting}}</h3>
This is Green page content.
</div>
</body>
</html>
Blue.htm
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<div style="background-color: Blue; color: White;">
<h3>{{Greeting}}</h3>
This is Blue page content.
</div>
</body>
</html>
Screenshot
For more details on UI Routing in AngularJS refer below link.
AngularJS ui-router
