AngularJS: reload to a different location - javascript

I know we can reload the current page in angularjs using $window.location.reload();.
How can we reload to a different location, something like -
$window.location.reload('/anotherUrl');

If you want to use AngularJS to change the view from code and add the change to history do this:
$location.url('/anotherUrl');
(if you want to lose current page's search (query params) and hash),
or
$location.path('/anotherurl');
(if you want to pass current url's search (query params) and hash to the new page)
If you don't want to add this change to history do this:
$location.replace();
$location.url('/anotherUrl');
or
$location.replace();
$location.path('/anotherurl');
$location.replace(); will maintain your state without re-instantiating your scope or controller. If you truly do want to reload the page (and thereby lose your state) you could fall back to the pure JavaScript solution given in the comment made by #null, that you have requested be given as an answer, or use the method I outline above and then call:
$route.reload();
Please see this link for replace(); documentation.
I have assumed you are using routing since your question is asking how to do this using AngularJS.

You are trying to redirect to different location, for that you can use window services like this
$window.location.href = 'anotherUrl' ;

I think what your looking for is to use $location service.
Specifically, you can set a new url with this:
$location.path('/anotherUrl');

Related

How to Replace the path name of URL using JavaScript/jQuery?

I am trying to replace the url and load the page.
Example:
URL: http://www.example.com/account/edit
I want to replace this as http://www.example.com/account/add. And load this page.
For that, I tried by using location.pathname.
location.pathname = "/account/add";
When using like above, the add page is displayed. But after that, URL http://www.example.com/account/add is loading. Then the add page is not displayed. I get that page is not found message.
The host name should vary based on running the project. So I want to resolve this without based on host name.
How can I achieve it?
If you want to retain the page in your session history (meaning you want to be able to use the back button to it) use the assign method. Otherwise, you replace.
Replace the current document with the one at the provided URL. The difference from the assign() method is that after using replace() the current page will not be saved in session history, meaning the user won't be able to use the Back button to navigate to it.
http://mdn.beonex.com/en/DOM/window.location.html
window.location.href = "http://www.example.com/account/add";
OR
window.location.replace("http://www.example.com/account/add");
This will redirect to the new page.
Actually you can change your url some other ways like below:
window.location.assign("http://www.mozilla.org"); // or
window.location = "http://www.mozilla.org";

How to implement routing with a single page application build solely using jQuery

Right now when the user inputs a word in the textfield and hits search, the form submits using $.get(). The data(JSON) is fetched from the server and then the UI is updated.
What I want to do is pretty simple:
1) When the form submits, the URL of the browser needs to update (something like search/zyx, zyx is what the user is searching for).
2) when the page is booked into favorites, or clicked as a link from somewhere the page needs to load and then the textfield value have to be 'zyx'. Also the UI needs to show search result of zyx.
This is important to my app because I will be using Google Analytics. So the URL is needed to reflect behaviour. Plus the other issue like back button history. Is this possible using just jQuery or some extremely light libraries build on jQuery. I have searched everywhere and all the solutions I found were using MVC frameworks. Or another solution was to use a templating framework like this one. However my app is way too simple for these solutions.
So, the approach you you need is to listen to hash changes in the url and based on this get the current page and render it in a cointainer. Something like this:
Go to Page 2
<div class="page-container"></div>
<script>
$(window).on('hashchange',function(){
var page = window.location.hash;
$.get('pages/'+page+'.html', function(pageContent){
$('.page-container').html(pageContent);
})
});
</script>
Thank you every one. So I ended up using a combination between #Tulio Faria 's answer and #Gabriele Mantovani.
To get the search keyword from url I used window.location.hash
To update url used history.pushState({id: 'query'}, '', 'some_url_string');
Used $(window).on('hashchange',function(){...}) to load page of the current search keyword if either back or forward buttons of browser were clicked
If I understand you want to change the URL of the user when some actions are done. There is an other topic about it HERE, and they use
window.location.replace(url)
Hope it helps you :)

Trouble in understanding Angular $location

I'm having some troubles understanding Angular $location, and the difference and the HTML5 mode and the default one. (yes, I've already the guide about it).
Let's say I want to build a TODO list app.
I'd like to have one page 'myapp.com/user/#1' to display the user information. 'myapp.com/user' will perform a standard GET request and load the page while Angular will intercept the hash part and say 'perform an AJAX request to get the information about user 1'. So if I just change '#/1' to '#/2' I won't get a full reload of the page.
I'd also like a 'myapp.com/todo/#1' page with the same behaviour with the todo lists. If I come from the user page to this one I get a full reload (because they're completely different pages).
How should I configure the $location service to get this working ?
I've tried setting the HTML5 mode to true, but when I click a link, I never get a full reload, and the hash character is not in the URL.
I also tried setting HTML5 mode to false, and hashPrefix('') so I get the full reload when I change pages, but $location.hash() returns an empty string and $location.path() returns '/1'.
Bonus question: what if I also want to put the ID of an item of the todo list, something like 'myapp.com/todo/#1/#2' ? (having different hash parts or something) ?

How to set a cookie based on URL when site visitor manually changes the URL

I am working on a site redesign going from Joomla to MODX, and would like to duplicate something from the current site, but can't find where the code is that manages this. Basically, when a user comes to the site their location is determined by IP, and it sets the URL to something like example.com/dc-metro and sets a cookie called "market" to "dc-metro". There is a dropdown on the site for a visitor to change their location, so if they select "Chicago" for example, the URL becomes example.com/chicago and the market cookie is updated to a value of "chicago". That part works great, the issue I am having is, if a user is on example.com/dc-metro/cool-things-to-do, and instead of using the dropdown to change location, they manually change the URL to example.com/chicago/cool-things-to-do, the page refreshes, but the cookie is not updated.
Is there a way to do something like $SERVER['REQUEST_URI'] (or something like that) to pull from the URL and set the cookie when the page reloads. I have several places on the site that show a variable based on the market cookie, and these are not updating (for example, on my dropdown the default value is the current market location).
Thank you very much in advance for any help.
You can use the parse_url function. For example:
$url_path = parse_url($SERVER['REQUEST_URI'], PHP_URL_PATH);
$path_parts = explode('/', trim($url_path,'/'));
$location = $path_parts[0];
$location variable will contain what you need. Then onlything that you need to do is set the cookie with the correct value. Use setcookie function for that.

Change URL Dynamically Without Adding Previous To History Stack

A stackoverflow question URL includes a servlet, id#, and title like so...
stackoverflow.com/questions/824349/modify-the-url-without-reloading-the-page
My webiste works the same way with URL's like so...
localhost:8443/user/1/admin
The query I do on the backend to get the users info only requires the id number. The name of the user after that is just for show. So if you typed this into the browser for localhost:8443/user/1/a it would give you the exact same page as this localhost:8443/user/1/admin
Stackoverflow is capable of noticing that the end part of the URL is missing and add it back. So if you put this into the address bar
stackoverflow.com/questions/824349/modify
They will change it to this dynamically
stackoverflow.com/questions/824349/modify-the-url-without-reloading-the-page
Now I did reading about changing URL's dynamically on stackoverflow and everyone kept referring to history.pushstate so I tried it. The problem with this is it adds the incorrect URL to the history stack. What I would like to accomplish is change the URL to the path it should be and not include the wrong URL to the history stack. So if the user decides to go back they go back to the actual page they were on last not, stackoverflow.com/questions/824349/modify. Just like stackoverflow does it. How could I do this!?
Check out the replaceState method.
Try using history.replaceState instead of history.pushState

Categories

Resources