How to remove # from URL in AngularJS

This article shows you how to remove # from URL in AngularJS. The content is concise and easy to understand. It will definitely brighten your eyes. I hope you can gain something through the detailed introduction of this article.

By default, AngularJS will use a # sign to route URL.

For example:

Http://example.com/

Http://example.com/#/about

Http://example.com/#/contact

It is easy to get a clean URL and remove the pound sign from the URL.

Just finish two things.

Configure $locationProvider

Set the starting path of our relative connection

$location service

In Angular, the $location service parses the URL in the address bar and makes changes to your application, and vice versa.

I highly recommend reading through the official Angular $location documentation to get an idea of the $location service and the features it provides.

$locationProvider and html5 mode (html5Mode)

We will use the $locationProvider module and set html5Mode to true.

We will do this when you define Angular applications and configure your routing.

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 HTML5 History API? It is the standard way to use a script to manipulate browser history. With it, you can let Angular change the route and URL of the page without refreshing the page. For more information, here is a good HTML5 History API article.

Set for relative links

In order to use relative links throughout the application, you will need to set one in your document.

There are plenty of ways to configure this, and setting HTML5Mode to true automatically parses relative links. This method always works with me. If the root of your application is different from url, for example, / my-base, use that as your starting path.

Callback of the old browser

The $location service automatically calls back the hashbang method for browsers that do not support HTML5 browsing history API.

Everything that happens is transparent to you, and you don't need to do anything about it. From the Angular $location document, you can see how the callback method works.

This is an easy way to get a nice URL and remove the hash tag in an Angular application.

The above is how to remove # from URL in AngularJS. Have you learned any knowledge or skills? If you want to learn more skills or enrich your knowledge reserve, you are welcome to follow the industry information channel.