Routing in Angular js and remove # in URL
Main.js:
var app = angular
.module("demo", ["ngRoute"])
.config(function ($routeProvider, $locationProvider) {
<!--$routeProvider.caseInsensitiveMatch = true;-->
$routeProvider
.when("/home", {
templateUrl: "UI/home.html",
controller: "homeController"
})
.when("/courses", {
templateUrl: "UI/courses.html",
controller: "coursesController"
})
.when("/students", {
templateUrl: "UI/students.html",
controller: "studentsController"
})
.when("/students/:id", { <!--using a parameter in routing-->
templateUrl: "/UI/studentsdetails.html",
controller: "studentsdetailsController"
})
.otherwise({
redirectTo: "/home"
})
$locationProvider.html5Mode(true);
})
.controller("homeController", function ($scope) {
$scope.message = "Home Page";
})
.controller("coursesController", function ($scope) {
$scope.message = "courses Page";
})
.controller("studentsController", function ($scope) {
$scope.message = "Student Page";
})
.controller("studentsdetailsController", function ($scope, $routeParams) {
$scope.message = "Student details Page" + $routeParams.id; <!--get a parameter value -->
}
Index.html :
<!DOCTYPE html>
<html ng-app="demo">
<head>
<title></title>
<meta charset="utf-8" />
<base href="/" /> <!--this base href is alwase top of style sheets and js file -->
<script src="RoutingApp/angular.js"></script>
<script src="RoutingApp/angular-route.js"></script>
<script src="RoutingApp/main.js"></script>
<link href="RoutingApp/Styles.css" rel="stylesheet" />
</head>
<body>
<table style="font-family: Arial">
<tr>
<td colspan="2" class="header">
<h1>
WebSite Header
</h1>
</td>
</tr>
<tr>
<td class="leftMenu">
<a href="home">Home</a>
<a href="courses">Courses</a>
<a href="students">Students</a>
<a href="students/1">Students using param</a> <!--pass a parameter in url -->
</td>
<td class="mainContent">
<ng-view></ng-view>
</td>
</tr>
<tr>
<td colspan="2" class="footer">
<b>Website Footer</b>
</td>
</tr>
</table>
</body>
</html>
Partial HTML Pages:
home.html:
<h1>{{message}}</h1>
courses.html:
<h1>{{message}}</h1>
studentsdetails.html:
<h1>{{message}}</h1>
student.html:
<h1>{{message}}</h1>
Write a rules in Web config:
<system.webServer>
<!--Routing URl rules start here-->
<rewrite>
<rules>
<rule name="RewriteRules" stopProcessing="true">
<match url=".*" />
<conditions logicalGrouping="MatchAll">
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
<add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
</conditions>
<action type="Rewrite" url="/index.html" />
</rule>
</rules>
</rewrite>
<!--Routing URl rules End here-->
</system.webServer>
Main.js:
var app = angular
.module("demo", ["ngRoute"])
.config(function ($routeProvider, $locationProvider) {
<!--$routeProvider.caseInsensitiveMatch = true;-->
$routeProvider
.when("/home", {
templateUrl: "UI/home.html",
controller: "homeController"
})
.when("/courses", {
templateUrl: "UI/courses.html",
controller: "coursesController"
})
.when("/students", {
templateUrl: "UI/students.html",
controller: "studentsController"
})
.when("/students/:id", { <!--using a parameter in routing-->
templateUrl: "/UI/studentsdetails.html",
controller: "studentsdetailsController"
})
.otherwise({
redirectTo: "/home"
})
$locationProvider.html5Mode(true);
})
.controller("homeController", function ($scope) {
$scope.message = "Home Page";
})
.controller("coursesController", function ($scope) {
$scope.message = "courses Page";
})
.controller("studentsController", function ($scope) {
$scope.message = "Student Page";
})
.controller("studentsdetailsController", function ($scope, $routeParams) {
$scope.message = "Student details Page" + $routeParams.id; <!--get a parameter value -->
}
Index.html :
<!DOCTYPE html>
<html ng-app="demo">
<head>
<title></title>
<meta charset="utf-8" />
<base href="/" /> <!--this base href is alwase top of style sheets and js file -->
<script src="RoutingApp/angular.js"></script>
<script src="RoutingApp/angular-route.js"></script>
<script src="RoutingApp/main.js"></script>
<link href="RoutingApp/Styles.css" rel="stylesheet" />
</head>
<body>
<table style="font-family: Arial">
<tr>
<td colspan="2" class="header">
<h1>
WebSite Header
</h1>
</td>
</tr>
<tr>
<td class="leftMenu">
<a href="home">Home</a>
<a href="courses">Courses</a>
<a href="students">Students</a>
<a href="students/1">Students using param</a> <!--pass a parameter in url -->
</td>
<td class="mainContent">
<ng-view></ng-view>
</td>
</tr>
<tr>
<td colspan="2" class="footer">
<b>Website Footer</b>
</td>
</tr>
</table>
</body>
</html>
Partial HTML Pages:
home.html:
<h1>{{message}}</h1>
courses.html:
<h1>{{message}}</h1>
studentsdetails.html:
<h1>{{message}}</h1>
student.html:
<h1>{{message}}</h1>
Write a rules in Web config:
<system.webServer>
<!--Routing URl rules start here-->
<rewrite>
<rules>
<rule name="RewriteRules" stopProcessing="true">
<match url=".*" />
<conditions logicalGrouping="MatchAll">
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
<add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
</conditions>
<action type="Rewrite" url="/index.html" />
</rule>
</rules>
</rewrite>
<!--Routing URl rules End here-->
</system.webServer>
No comments:
Post a Comment