search

Home  >  Article  >  Web Front-end  >  How to remove the # character in the URL under AngularJS_AngularJS

How to remove the # character in the URL under AngularJS_AngularJS

WBOY
WBOYOriginal
2016-05-16 15:53:541054browse

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.

  1. Configure $locationProvider
  2. Set the starting path of our relative connection

$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.

2015619153430123.jpg (567×311)
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!

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Simple way to handle radio buttons and checkboxes using AngularJS_AngularJSNext article：Simple way to handle radio buttons and checkboxes using AngularJS_AngularJS

Related articles

See more