remove # from url using
$locationProvider.html5Mode(true);
and display error
[$location:nobase] http://errors.angularjs.org/1.5.6/$location/nobase
It seems like you forgot to mention base to your html document.
$location in HTML5 mode requires a tag to be present! see documentation https://docs.angularjs.org/error/$location/nobase
<base href="/">
Related
I used html5mode in my application.
$locationProvider.html5Mode(true);
and when I use $window.location.href in my application it reloads the entire page.
If I remove $window and I use $state.go the page won't reload entirely like that.
Does anyone know why this is happening? Is there any solution to not reload the entire page when using $window?
The reload is indeed due to $window.location.href use.
You can use the $location.path method to change the URL without reloading the entire page.
$location.path('/newUrlValue');
You can also add a base tag in your headers for relative links:
<html>
<head>
<base href="/">
</head>
</html>
For browsers which can't handle HTML5 History API, a hashbang prefix will automatically used ('!' by default) and can be changed using the hashPrefix provider's method.
You can use this code below:
// enable html5Mode for pushstate ('#'-less URLs)
$locationProvider.html5Mode(true);
$locationProvider.hashPrefix('!');
And add:
<base href="/" />
to your <head />.
My state configuration js
Now, my URL look like this
I want to remove index.html and (!) from my URL. Like as following image
How to do achieve this?
Consult the documentation for $location methods html5Mode and hashPrefix: https://docs.angularjs.org/guide/$location
$location.hashPrefix('');
I am using ui-router in my AngularJS application.
I have element like
<a ui-sref="users({id: item.user_id})"></a>
but angular creating link like "www.domain.com/index.html/users/123" but all my links are without index.html. How can I remove it?
Thanks Shaohao Lin for advice. Fixed by changing
<base href="/index.html"> to <base href="/">
My angular app with ui-router is running inside a page at /content/page.html. The page also has a
<base href="/somewhere">
tag in the head.
Due to the base tag I end up with incorrect URLs pointing to /somewhere#/section1 instead of /content/page.html#/section1
I'm unable to remove this base tag since I'm just a small part of a large site. Is there a way to make ui-router generate absolute URLs by default? I've noticed that ui-sref-opts="{absolute: true}" can do this, but it generates the link using the base tag. Is there a way to make ui-router always create absolute URLs using window.location.pathname?
edit: I've created this plunker that demonstrates the problem.
Regards, Markus
You can try to replace <base href="/somewhere"> by <base href="/"> and add a link with your url in your config route in app.js.
html:
<base href='/'>
<a ui-sref="nameOfTheRoute">Link</a>
in app.js add the route:
$stateProvider.state('nameOfTheRoute',{url:'/', templateUrl:'Content/page.html'})
PS: I tried this on my application with another base href and it's works so you can try without change base url tag.
html:
<base href='/somewhere'>
<a ui-sref="nameOfTheRoute">Link</a>
in app.js add the route:
$stateProvider.state('nameOfTheRoute',{url:'/somewhere', templateUrl:'Content/page.html'})
I hope this will help you.
I hope this answer help you more than my previous answers ^^. I tested your plunker and now the default route works. I hope this is what you search
new plunker
Keep me informed.
Solved it by using an angular decorator and overriding the behaviour of the $urlRouter 'href' function.
Angular js appends the extenssion "/#" to my url (eg. http://example.com/#/) but I'd like my root direction to be completely clean (without the /#).
Is there a way to override this to have a clean home url?
Set html5Mode to true in your config via $locationProvider:
$locationProvider.html5Mode(true);
See: http://docs.angularjs.org/guide/dev_guide.services.$location
You need to configure the $location provider in order to get rid of the hash # in the url. This documentation goes through how to configure for html5 mode.
This SO Question will also help:
Removing the fragment identifier from AngularJS urls (# symbol)
I also faced this issue. This could be achieved by
Add $locationProvider.html5Mode(true) in the config
$locationProvider.html5Mode(true)
Add base url in the Index.html head tag
<base href="/app/index.html">