Angular change url without executing routeprovider

Question

I'm trying to make facebook-like modal windows - for example you click on image and it opens in modal window and the url changes from / to /img/dj27s_D without rerendering the views and when you close the modal the url goes back to /.

I figured out that using

var stateObj = { foo: "bar" };
history.pushState(stateObj, "page 2", "bar.html");

will just crash the application on the next $digest. I have also tried

$location.path = '';

but nothing happens. If I execute

$location.path('/img/id')

The $routeProvider will kick in and change the views. I dont want this to happen, just want to temporary change the url while the modal is opened.

Answer 1

You can set the router to use the previous route. For example this way in your controller:

lastRoute = $route.current;
$scope.$on('$locationChangeSuccess', function (e) {
  if (window.location.href.match(/\/view/) || window.location.href === '/') {
    $route.current = lastRoute;
  }
});

When $route.current does not change, full page refresh is not triggered. You might wish to do some regexp checks to keep your URL space tidy to prevent refresh, but it's a small price to pay.

Answer 2

I recommend looking at the Angular UI-Router. You might be able to do what you're describing with a nested state / nested view, where the inner view pops up the modal. You can configure the URLs for each state as you want.

Edit: There may be a way without using UI-Router, but I haven't done that. Perhaps this other SO question is relevant to you.

A simple partial example of UI Router with a nested view, you'd put this in your controller:

$stateProvider.state('site', {
    url: "",
    templateUrl: 'app/parent.tpl.html',
    controller: 'ParentCtrl'
});

$stateProvider.state('site.child', {
    url: "/child",
    templateUrl: 'app/child.tpl.html',
    controller: 'ChildCtrl'
});

Then in the parent template, put this type of div:

<div ui-view></div>

which will be where the child template will load within the parent template. In the child template, you could try the modal dialog.