How to Remove # from URL in AngularJS?

By Hardik Savani June 15, 2023 Category : 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

Read Also: PHP AngularJS Populate Dynamic Dropdown Example
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 :

We are Recommending you

Popular Posts

Categories

Latest Posts