Angular ui-router adding /index.html/ into link from ui-sref - angularjs

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="/">

Related

$window.location.href refresh entire page when i use $locationProvider.html5Mode(true);

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 />.

base href='/' not work when i use angular

I am using angular and angular-ui-router to navigate. The version of angular is 1.6.4 and angular-ui-router is 0.4.2. It is auto-comment when i add in the head (I find this in the firefox console Inspector. It is <!--<base href="/">-->). Meanwhile, console tell me:Error:$location::nobase. Thanks for any advice.
Check out   https://docs.angularjs.org/error/$location/nobase
So uncomment the <base href="/"> for html5 mode.

issue in remove # from url in angularjs

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="/">

AngularJs SEO Title Support

We have a catalog that loads an AngularJS application dynamically according to the defined subdomain. For example: http://subdomain.billiving.biz
We need to support dynamic title that will be set by AngularJS. I saw in Google documentation that we need to add this link:
<meta name="fragment" content="!">
Anything else we should do to set this correctly?
Thanks
You have to follow HashBang URL standard or HTML5 URL
Something like
angular.module('app', []).config(['$locationProvider', function($location) {
$location.hashPrefix('!');
}]);
Here is the good guide to follow Angular SEO
I eventually ended up using Push-State. This includes two changes:
Enabling Html5Mode:
.config(['$locationProvider', function($locationProvider) {
$locationProvider.html5Mode({enabled: true});
}]);
Providing a base href from your app (when working local need full localhost path)
<base href="/">
That's it.

Configure angular ui-router to use absolute URLs by default

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.

Resources