Updating URL in Angular JS without re-rendering view

Question

I\'m building a dashboard system in AngularJS and I\'m running into an issue with setting the url via $location.path

In our dashboard, we have a bunch o

Answer 1

How I've implemented it:
(my solution mostly for cases when you need to change whole route, not sub-parts)

I have page with menu (menuPage) and data should not be cleaned on navigation (there is a lot of inputs on each page and user will be very very unhappy if data will disappear accidentally).

1. turn off $routeProvider

2. in mainPage controller add two divs with custom directive attribute - each directive contains only 'templateUrl' and 'scope: true'

    <div ng-show="tab=='tab_name'" data-tab_name-page></div>
   

3. mainPage controller contains lines to simulate routing:

   if (!$scope.tab && $location.path()) {
       $scope.tab = $location.path().substr(1);
   }
   $scope.setTab = function(tab) {
       $scope.tab = tab;
       $location.path('/'+tab);
   };
   

That's all. Little bit ugly to have separate directive for each page, but usage of dynamic templateUrl (as function) in directive provokes re-rendering of page (and loosing data of inputs).

Answer 2

For those who need change full path() without controllers reload

Here is plugin: https://github.com/anglibs/angular-location-update

Usage:

$location.update_path('/notes/1');

Answer 3

I have an idea to use

window.history.replaceState('Object', 'Title', '/new-url');

If you do this and a digest cycle happens it will completely mangle things up. However if you set it back to the correct url that angular expects it's ok. So in theory you could store the correct url that angular expects and reset it just before you know a digest fires.

I've not tested this though.