April 4, 2023
Category : Angular
How to remove # from URL in AngularJS?
If you work on AngularJS web application using angular route then you notice one thing. If you click on any hyper links it makes like as bellow:
http://localhost:8000/#
http://localhost:8000/#/items
http://localhost:8000/#/users
I mean always "#" will be there, But when we live this web application then it should delete "#" from URL, because it makes issue when we share link on facebook or etc.
But should look likes:
http://localhost:8000/
http://localhost:8000/items
http://localhost:8000/users
But we can remove easily using "$locationProvider.html5Mode(true);". You can do it like as bellow simple example i did, but make sure you have to first add base tag on your head tag like as bellow:
Your root file
<head>
<base href="/">
....
</head>
Angular JS Route
var app = angular.module('main-App',['ngRoute']);
app.config(['$routeProvider','$locationProvider',
function($routeProvider, $locationProvider) {
$routeProvider.
when('/', {
templateUrl: 'templates/home.html',
controller: 'HomeController'
}).
when('/users', {
templateUrl: 'templates/users.html',
controller: 'UserController'
}).
otherwise({
redirectTo: '/'
});
$locationProvider.html5Mode(true);
}]);
Hardik Savani
I'm a full-stack developer, entrepreneur and owner of Aatman Infotech. I live in India and I love to write tutorials and tips that can help to other artisan. I am a big fan of PHP, Laravel, Angular, Vue, Node, Javascript, JQuery, Codeigniter and Bootstrap from the early stage. I believe in Hardworking and Consistency.
