Menu
In fact you need the # (hashtag) for non HTML5 browsers.
Otherwise they will just do an HTTP call to the server at the mentioned href. The # is an old browser shortcircuit which doesn't fire the request, which allows many js frameworks to build their own clientside rerouting on top of that.
You can use $locationProvider.html5Mode(true) to tell angular to use HTML5 strategy if available.
Here the list of browser that support HTML5 strategy: http://caniuse.com/#feat=history
If you enabled html5mode as others have said, and create an .htaccess file with the following contents (adjust for your needs):
RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_URI} !^(/index\.php|/img|/js|/css|/robots\.txt|/favicon\.ico)
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ./index.html [L]
Users will be directed to the your app when they enter a proper route, and your app will read the route and bring them to the correct "page" within it.
EDIT: Just make sure not to have any file or directory names conflict with your routes.
In Router at end add html5Mode(true);
app.config(function($routeProvider,$locationProvider) {
$routeProvider.when('/home', {
templateUrl:'/html/home.html'
});
$locationProvider.html5Mode(true);
})
In html head add base tag
<html>
<head>
<meta charset="utf-8">
<base href="/">
</head>
thanks To @plus- for detailing the above answer
try
$locationProvider.html5Mode(true)
More info at
$locationProvider
Using $location
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 hashtag
For Example:
http://www.example.com
http://www.example.com/#/about
http://www.example.com/#/contact
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 do this when defining your Angular application and configuring 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
<base> in the <head> of your document. This may be in the
root index.html file of your Angular app. Find the <base> tag, and
set it to the root URL you'd like for your app.For example: <base href="/">
Fallback for Older Browsers
In Conclusion
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With