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.
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 />.
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="/">
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.
I'm getting started with Angularjs and fallen at the first hurdle :-(
i've installed node (windows installer) and the webstorm ide. in webstorm i've installed the angularjs plugin and in the html typing 'ng' prompts all the ng templates in a dropdown, so this look ok.
cutting and pasting in the demo html5 (under the heading 'The Basics' at http://angularjs.org/) and running in webstorm and navigating to the file url (in firefox or chrome) however the angular statement '{{yourName}}' isn't binding at all - it's rendered out as a literal. Anyone know where i'm going wrong ?
The example on the home page was using protocol-less (or protocol-relative) URLs (http://www.paulirish.com/2010/the-protocol-relative-url/). While those are very handy, protocol-relative URLs don't play nicely with the file:// protocol in this case. Simply your browser is trying to retrieve AngularJS library from the local file system. To fix it you need to add protocol:
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
Try prefixing the ng tag with data like data-ng-model.