I have been working on Single Page Application in Angularjs. When index page loads I have loaded other pages into index page by using Angular ng-include. Now it's working, But in the URL it's showing like http://localhost:8080/Index.html#/Home.html, I want to remove "#". I applied , after applying the base tag in the head tag "ng-include" not working. I tried other online stuff but I couldn't find any solution. I am using xampp server.
Thanks in Advance friends
<body ng-app="mainApp" ng-controller="mainCtrl">
<header ng-include="'navigation.html'" ng-controller="headerCtrl">
</header>
<div class="container">
<h3>{{Title}}</h3>
<div ng-include="'leftNavigation.html'" ng-controller="leftDivCtrl">
</div>
<div ng-include="'rightPage.html'" ng-controller="rightDivCtrl">
</div>
<div class="clearfix"></div>
<ng-view></ng-view>
</div>
</body>
var app = angular.module("mainApp", ["ngRoute"])
// Navigating external pages
.config(function($routeProvider, $locationProvider){
$routeProvider
// $routeProvider .when( '/', { redirectTo: '/home' })
.when("/Home", {
templateUrl: "partials/Home.html",
controller:"homeCtrl",
})
.when("/Aboutus", {
templateUrl: "partials/Aboutus.html",
controller:"AboutusCtrl",
})
.when("/Courses", {
templateUrl: "partials/Courses.html",
controller:"CoursesCtrl",
})
.when("/Contactus", {
templateUrl: "partials/Contactus.html",
controller:"ContactusCtrl",
})
.otherwise({
redirectTo:"Index.html"
})
//$locationProvider.hashPrefix('')
$locationProvider.html5Mode({
enabled:true,
//requireBase:false
})
})
.controller("homeCtrl", function($scope){
$scope.msg = "Home Page";
})
.controller("AboutusCtrl", function($scope){
$scope.msg = "Aboutus Page";
})
.controller("CoursesCtrl", function($scope){
$scope.msg = "Courses Page";
})
.controller("ContactusCtrl", function($scope){
$scope.msg = "Contactus Page";
})
app.controller("mainCtrl", ["$scope", function($scope){
$scope.Title = "Single Page Application";
}]);
// loading external pages as includes, when index page loads
app.controller("headerCtrl", ["$scope", function($scope){
}]);
app.controller("leftDivCtrl", ["$scope", function($scope){
}]);
app.controller("rightDivCtrl", ["$scope", function($scope){
}]);
