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 />.
Related
I would like to ask for a help on my problem with url in an angular site.
I added this on my app.js
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
the problem is that when i try to put into my url like
wwww.websitename.com/admin
it will throw an server error page.. but if i will input
www.websitename.com/#admin
it will go to the page then the hashtag will be remove
i want it that it will go the page even without putting # on the url.
thank you guys ! :)
You need to make sure that your server is configured to return the same index.html file for any path specified after your domain. You also need to specify your base href for html5mode.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<base href="/">
</head>
Here is a good article explaining how to configure your angular app to use html5mode.
If you want to enable HTML5 mode for your Angularjs app, you will also have to configure your server so that whenever an unknown route is requested, it serves the index.html file.
For example with expressJS server,
After your routes definition, add a catchall route.
// Add a catchall route here
expressApp.get('*', (req, res) => res.status(200).send({
// #TODO serve index.html here
}));
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="/">
Before removing the hash sign, I had
mainApp.config(function ($locationProvider, $routeProvider) {
$routeProvider
.when('/page', {
controller: 'Page',
templateUrl: 'templates/page.html'
})
.when('/main', {
controller: 'Main',
templateUrl: 'templates/main.html'
})
.otherwise({ redirectTo: '/main'});
//$locationProvider.html5Mode(true);
});
and these worked fine
http://localhost:8080/index.html#/main
http://localhost:8080/index.html#/page
After removing the pound sign, I added to index.html
<base href="/">
<script src="/vendor/bootstrap-dist/js/bootstrap.min.js"></script>
<script src="/vendor/javascript/angular/angular.js"></script>
<script src="/vendor/javascript/angular/angular-route.js"></script>
<script src="/vendor/javascript/angular/ui-bootstrap-tpls-0.11.2.min.js"></script>
<script src="/javascript/index.js"></script>
<script src="/javascript/controllers/main.js"></script>
<script src="/javascript/controllers/page.js"></script>
and to index.js
$locationProvider.html5Mode(true);
now hitting http://localhost:8080 redirects to http://localhost:8080/main
but going to http://localhost:8080/main directly in the browser returns 404 and the other pages too
What should I do to fix the problem?
my backend is java
That's expected. Here's what happens when html5 is not turned on:
you enter the url http://localhost:8080/index.html#/main in the address bar
the browser makes a http request to localhost:8080/index.html and gets the html page as a response
the html page contains an angular application that is executed. The angular router parses the path after the hash (/main), and thus loads the associated view and controller
Now what happens when you enable html5 mode and load index.hml?
you enter the url http://localhost:8080/index.html in the address bar
the browser makes a http request to localhost:8080/index.html and gets the html page as a response
the html page contains an angular application that is executed. The angular router parses the path (/index.html), sees that it doesn't match any route, and thus changes the location in the address bar to the default: /main, and then loads the associated view and controller. Changing the location in the address bar doesn't make the browser do anything other than adding a new entry in its navigation history.
Now, what happens if you hit refresh, or directly enter http://localhost:8080/main in the address bar? Well in that case, you're saying the browser: "please load the page at the url http://localhost:8080/main. So that's what the browser does: it sends an HTTP request to http://localhost:8080/main. Since the server doesn't have anything at this address, it sends back a 404.
Now how to make it work? It's actually quite simple: you need to configure the server to send back the index.html page when it gets a request for the path /main (and for all the other paths of the angular application). That way, the browser will load the HTML page, the angular application it contains will be restarted, the angular router will parse the path (/main) from the URL, and it will thus load the view and the controller associated to that path.
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.
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.