how to change the url in the browser address bar when content is loaded in AJAX with angular.js

Question

I am designing a web app with angular.js, the communication within the application is through AJAX, that means when the apps requests a web resources, the url browser address never change.

my app, for example, is showing the building information. The initial url is '/buildings' , and firstly it will show a list of rooms

'/buildings/rooma'
'/buildings/roomb'

.

whenever I click the room url, the page will load the room info through AJAX without changing the url in the browser address bar

however now the requirement asks me to bookmark each url, so it means whenever I click a room url, the browser address bar has to show the room url as well rather than the initial url.

How could I do it in angularjs or even without angularjs framework?

update :

I have tried the solution suggested by Ľuboš Beran

$scope.$on('$locationChangeSuccess',function(evt, absNewUrl, absOldUrl) {
       console.log('success', evt,  lastRoute,$route.current);
       $route.current = lastRoute;
    });

but the $route.current gives me undefined data.

you can do that with just ngRoute, you see the example on angular doc that show $routeProvider.when('/'). You will also need to do mod rewrite on server side to route your request. update your question with a bit more code then I can help. — wayne, Mar 10 '14 at 13:47

Brian McGinity · Accepted Answer · 2014-03-10T16:04:23.987

1

A good way to do this is using url pushstate.

It's too complex to write up a complete working demo, so you may want to google it.

Here's a nice article: http://www.sitepoint.com/javascript-history-pushstate/

Update:

pushstate will change the url in the browser, so the user can bookmark the page.

You also need to listen for popstate:

window.addEventListener("popstate", function(e) {  console.log(arguments) })

so you can react when the user push back/forward buttons.

edited Mar 10 '14 at 16:04

answered Mar 10 '14 at 14:27

Brian McGinity

5,777
5
36
46

this is useful feature I wanted, but another important thing is how can I change the url in the browser address bar? – user824624 Mar 10 '14 at 14:40
pushstate will change the url in the browser address bar. And the user can bookmark it. – Brian McGinity Mar 10 '14 at 16:02
If this is helpful or answers your question, it is customary to mark the answer up or accept it. – Brian McGinity Mar 11 '14 at 16:30
Hi,brian, the pushing state changes the url by adding the query string, is it ? – user824624 Mar 11 '14 at 17:51
Yes, pushstate accepts an object, one of properties is url. The url is changed in the address bar of the browser--and the browser stays on the current page (ie. it does not try to locate to address). – Brian McGinity Mar 12 '14 at 00:35

score 0 · Answer 2 · edited May 23 '17 at 10:26

0

Well I tried to use google and i find this AngularJS Paging with $location.path but no ngView reload

edited May 23 '17 at 10:26

Community

1
1

answered Mar 10 '14 at 13:40

3y3skill3r

964
1
11
35

I have tried that solution, see update, but the value is undefined – user824624 Mar 10 '14 at 14:18

how to change the url in the browser address bar when content is loaded in AJAX with angular.js

2 Answers2

Update:

Linked