This article mainly introduces the removal of the Angularjs URL in the # character method, Angularjs is a highly popular JavaScript library, the need for friends can refer to the
Angularjs will use a # number to route the URL 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 well number from the URL.
Just do two things.
Configuration $locationProvider
Set the start path of our relative connection
$location Services
In angular, $location service resolves URLs in the address bar and makes changes to your application, and vice versa.
I strongly recommend that you read through the official Angular $location documentation for an understanding 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 the angular application and configure your routing.
?
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20-21 | Angular.module (' Scotchy ', []). config (function ($routeProvider, $locationProvider) {$routeProvider. When ('/', {Templa Teurl: ' partials/home.html ', Controller:maincontroller}). When ('/about ', {templateurl: ' partials/about.html ', contro Ller: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 the standard way to use a script to manipulate the history of a browser. With it, you can change the routing and URL of the page without refreshing the page angular. For more information, here's a nice HTML5 History API article.
Set for relative links
To use relative links throughout your application, you will need to set one in your document .
?
| 1 2 3 4 5 6 7 | <!doctype html> |
There are a number of ways to configure this thing, and setting Html5mode to true automatically resolves relative links. It always works in my place. If your application's roots are different than URLs, such as/my-base, use that as your starting point.
Callback of the old browser
$location Service will automatically callback Hashbang methods for browsers that do not support HTML5 browsing history APIs.
All that happens is transparent to you, and you don't have to do any configuration about it. From the angular $location document, you can see how the callback method has worked.
Summarize
This is a simple way to get a nice URL in a angular application and remove the hash mark. Enjoy the super clean, super fast angular application!
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
