CODEWITHSUNDEEP
javascriptangularjs
user824624
user824624

Reputation: 8068

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

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.

Upvotes: 0

Views: 2163

Answers (2)

Brian McGinity
Brian McGinity

Reputation: 5935

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.

Upvotes: 1

3y3skill3r
3y3skill3r

Reputation: 1026

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

Upvotes: 0

Related Questions