ItSolutionStuff.com

How to Remove # from URL in AngularJS?

By Hardik Savani β€’ October 20, 2023
Angular

Hi Folks,

In this quick example, let's see angularjs # delete from url. We will look at an example of remove # from url angularjs. If you have a question about remove hash from url angularjs example then I will give a simple example with a solution. you can see angularjs remove # from route. Alright, let’s dive into the steps.

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);

}]);

Tags: Angular
Hardik Savani

Hardik Savani

I'm a full-stack developer, entrepreneur, and founder of ItSolutionStuff.com. Passionate about PHP, Laravel, JavaScript, and helping developers grow.

πŸ“Ί Subscribe on YouTube

We Are Recommending You

β˜…

How to Copy to Clipboard without Flash in AngularJS?

Read Now β†’
β˜…

AngularJS Convert Comma Separated String to Array Example

Read Now β†’
β˜…

AngularJS Display Default Image If Original Does Not Exists Example

Read Now β†’
β˜…

AngularJS Update Bind Ng-model Input Value from JQuery Example

Read Now β†’
β˜…

How to Call AngularJS Controller Function in JQuery?

Read Now β†’
β˜…

AngularJS Image Upload with Preview Example

Read Now β†’
β˜…

How to Hide Div After Some Time in AngularJS?

Read Now β†’
β˜…

How to Call Function on Page Load in AngularJS?

Read Now β†’
β˜…

AngularJS Pagination using dirPagination Directive Example

Read Now β†’
β˜…

AngularJS Simple Datepicker Directive Example Tutorial

Read Now β†’
β˜…

How to Change Date Format using Date Filter in AngularJS?

Read Now β†’
β˜…

AngularJS - How to Limit String Length using Filter?

Read Now β†’
β˜…

How to Remove HTML Tags from String in AngularJS?

Read Now β†’