$ locationProvider not working on my Angular page
In my angular page I am using $locationProvider
. But it doesn't work on my webpage. I got an error in my console like this, $ location in HTML5 mode requires the tag !. so I add <base href="/" />
which also doesn't work on my angular page. This is where I mentioned my directory structure and my code.
Here's my example project link . Help me solve this problem.
my directory structure
iwa (root directory)
> js
> lib
-> angular.js
-> angular.route.js
-> app.js
> views
-> home.html
-> about.html
-> index.html
index.html
<!DOCTYPE html>
<html ng-app="inQueueWeb">
<head lang="en">
<meta charset="UTF-8">
<script src="js/lib/angular.js"></script>
<script src="js/lib/angular-route.js"></script>
</head>
<body>
<div ng-view></div>
</body>
<script src="js/app.js"></script>
</html>
app.js
var iwa = angular.module('inQueueWeb', ['ngRoute']);
iwa.config(['$routeProvider','$locationProvider', function($routeProvider,$locationProvider) {
$routeProvider
.when("/", {templateUrl: 'views/home.html'})
.when("/rest", {templateUrl: 'views/about.html'});
$locationProvider.html5Mode(true);
}]);
And also I have tried these
$locationProvider.html5Mode({enable: true, requireBase: false});
$locationProvider.html5Mode(true).hashPrefix('!');
source to share
You are on the right track. You have to add $locationProvider.html5Mode(true)
to your application .config()
and then add <base href="/">
to HTML header. I think you have already done that.
What's going wrong: Since the $locationProvider.html5Mode(true)
URL hashbang ( /#mypage
) is not required. The url will just /mypage
be hashless. You need to update the links in views/templates/header.html
to match.
I renewed:
- Your
app.js
add$locationProvider.html5Mode(true)
. - Your
index.html
add<base href="/">
and - Yours
views/templates/header.html
for setting up anchor links.
Hope this was helpful! You can download the archive with the edited files here .
source to share
Add this below your title tag
<base href="/">
Then under your router add $ locationProvider to your .config
.config(function($routeProvider, $urlRouterProvider, $locationProvider) {
Add this under all your .when states
$locationProvider.html5Mode(true).hashPrefix('!');
$urlRouterProvider.rule(function($injector, $location) {
var slashHashRegex,
matches,
path = $location.url();
// check to see if the path already has a slash where it should be
if (path[path.length - 1] === '/' || path.indexOf('/?') > -1) {
return path.substring(0, path.length - 1);
}
// if there is a trailing slash *and* there is a hash, remove the last slash so the route will correctly fire
slashHashRegex = /\/(#[^\/]*)$/;
matches = path.match(slashHashRegex);
if (1 < matches.length) {
return path.replace(matches[0], matches[1]);
}
});
Create a .htaccess file if you don't already have one and add it (if you are using index.html)
<ifModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} !index
RewriteRule (.*) index.html [L]
</ifModule>
Hope this helps!
source to share
First, am I missing a base tag in your index.html? What could you replace with:
$locationProvider.html5Mode({enable: true, requireBase: false});
Sorry, you made a small typo in 'enable'. Which must be "included" (with the ending "d"). So, correct the typo or add a base tag and change the $ locationProvider line to:
$locationProvider.html5Mode(true);
I think this will fix the problem.
On top of all this, you have to place your script between the <body> </body>. Otherwise it is invalid HTML.
source to share