I'm building a website using AngularJS, and have a routing problem in a scenario I'm trying to implement. I'm trying to change the browser url, and prevent the AngularJS from redirecting to the new given url. This is the scenario:
The user choose an item from a page in the url: www.mywebsite.com/my-page
The selected item is being opened as a modal over the current page, but the url www.mywebsite.com/specific-page/item-name (This url change should not cause a page refresh, just change the url visually)
when the user hits 'Back', or closes the modal, he should go back to: www.mywebsite.com/my-page (Again, this url change should not cause a page refresh, just change the url visually)
A good reference to what I'm trying to do, can be found on Pinterest website. When the user clicks on an item, a modal is opened, url is changed, but page doesn't being refreshed. Same happens when the user closes the modal and going back to the main page.
What is the best way to implement this scenario?
Thanks.
OK, I've found the undocumented AngularJS $browser object. It has the $browser.url method that only changes the browser's url without really redirecting the page.
https://github.com/angular/angular.js/blob/master/src/ng/browser.js