By default, AngularJS will route URLs with a hashtag.
For example:
http://example.com/http://example.com/#/usershttp://example.com/#/roles
It is very easy to get clean URLs and remove the hashtag from the URL.
There are 2 things that need to be done.
- Configuring $locationProvider
- Setting our base for relative links
app.users.routes.js
(function() { 'use strict'; angular .module('app.users') .config(['$routeProvider', ', $locationProvider', function($routeProvider, $locationProvider) { $routeProvider. when('/users', { templateUrl: '/app/components/users/views/user-list.tpl.html', controller: 'UserController' }); // 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. The $locationProvider will automatically fallback to the hashbang method for browsers that do not support the HTML5 History API.
To link around your application using relative links, you will need to set a <base> in the <head> of your document.
index.html
<!DOCTYPE html> <html ng-app="app"> <head> <title></title> <meta charset="utf-8" /> <base href="/"> </head> <body> <ul> <li> <a href="#/users">Users</a> </li> <li> <a href="#/roles">Roles</a> </li> </ul> <ng-view></ng-view> <script type="text/javascript" src="/assets/libs/angular/angular.min.js"></script> <script type="text/javascript" src="/assets/libs/angular/angular-route.min.js"></script> <script type="text/javascript" src="/app/app.js"></script> <script type="text/javascript" src="/app/components/users/app.users.js"></script> <script type="text/javascript" src="/app/components/users/app.users.routes.js"></script> <script type="text/javascript" src="/app/components/users/controllers/user.controller.js"></script> <script type="text/javascript" src="/app/components/roles/app.roles.js"></script> <script type="text/javascript" src="/app/components/roles/app.roles.routes.js"></script> <script type="text/javascript" src="/app/components/roles/controllers/role.controller.js"></script> </body> </html>