The following information is from:
https://scotch.io/quick-tips/pretty-urls-in-angularjs-removing-the-hashtag
It is very easy to get clean URLs and remove the hashtag from the URL in Angular.
By default, AngularJS will route URLs with a hashtagFor Example:
There are 2 things that need to be done.
Configuring $locationProvider
Setting our base for relative links
$location Service
In Angular, the $location service parses the URL in the address bar and makes changes to your application and vice versa.
I would highly recommend reading through the official Angular $location docs to get a feel for the location service and what it provides.
https://docs.angularjs.org/api/ng/service/$location
$locationProvider and html5Mode
- We will use the $locationProvider module and set html5Mode to true.
We will do this when defining your Angular application andconfiguring your routes.
angular.module('noHash', []).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 standardized way to manipulate the browser history using a script. This lets Angular change the routing and URLs of our pages without refreshing the page. For more information on this, here is a good HTML5 History API Article:
http://diveintohtml5.info/history.html
Setting For Relative Links
- To link around your application using relative links, you will needto set the
<base>in the<head>of your document. This may be in theroot index.html file of your Angular app. Find the<base>tag, andset it to the root URL you'd like for your app.
For example: <base href="/">
- There are plenty of other ways to configure this, and the HTML5 modeset to true should automatically resolve relative links. If your rootof your application is different than the url (for instance /my-base,then use that as your base.
Fallback for Older Browsers
- The $location service will automatically fallback to the hashbangmethod for browsers that do not support the HTML5 History API.
- This happens transparently to you and you won’t have to configureanything for it to work. From the Angular $location docs, you can seethe fallback method and how it works.
In Conclusion
- This is a simple way to get pretty URLs and remove the hashtag inyour Angular application. Have fun making those super clean and superfast Angular apps!