Home > Article > Web Front-end > How to remove the # character in the URL under AngularJS_AngularJS
AngularJS will use a # sign to route URLs by default.
For example:
http://example.com/
http://example.com/#/about
http://example.com/#/contact
It is easy to get a clean URL and remove the hash sign from the URL.
Just complete two things.
$location service
In Angular, the $location service will resolve the URL in the address bar and make changes to your application, and vice versa.
I highly recommend reading through the official Angular $location documentation to get an understanding of the $location service and the features it provides.
$locationProvider and html5Mode
We will use the $locationProvider module and set html5Mode to true.
We will do this when you define your Angular application and configure your routes.
angular.module('scotchy', []) .config(function($routeProvider, $locationProvider) { $routeProvider .when('/', { templateUrl : 'partials/home.html', controller : mainController }) .when('/about', { templateUrl : 'partials/about.html', controller : mainController }) .when('/contact', { templateUrl : 'partials/contact.html', controller : mainController }); // use the HTML5 History API $locationProvider.html5Mode(true); });
What is the HTML5 History API? It is a standard way to manipulate browser history using a script. It allows Angular to change routes and page URLs without refreshing the page. More information here There is a pretty good HTML5 History API article.
Set dde6fb694e6711ae5e6f381704c04ae4 for relative links
In order to use relative links throughout your application, you will need to set a ace372f96ca3ec664acb3aaa2421b04c in the 93f0f5c25f18dab9d176bd4f6de5d30e of your document.
<!doctype html> <html> <head> <meta charset="utf-8"> <base href="/"> </head>
There are tons of ways to configure this, and setting HTML5Mode to true will automatically resolve relative links. This always works for me. If your application is rooted at the same URL is different, such as /my-base, then use that as your starting path.
Callbacks for old browsers
The $location service will automatically call back the hashbang method for browsers that do not support the HTML5 browsing history API.
Everything happens transparently to you, and you don’t need to do any configuration for this. From the Angular $location documentation, you can see the callback method and how it works.
Summary
This is a simple way to get pretty URLs and remove hash tags in your Angular app. Enjoy ultra-clean, ultra-fast Angular apps!