Option on $location to allow hash/path change w/o reloading the route

[cgross]

We have a paradigm in our app that user's create new things on the same page that they view things. So our route is like /thing/:id. When creating a new thing they go to /thing/new. Once the thing has been successfully saved we want to change the route to /thing/1234 (or whatever its new id is). Now the partial doesnt need to be reloaded because the data is all the same. We just want the path to be updated so a user can now bookmark the correct link, etc.

Having an option on $location (not on the route definition) to enable/disable route loading would work but I'm sure there are other ways to implement the feature.

[qualidafial]

+1, having the same issue.

[qualidafial]

@cgross Since the $location service uses JQuery-style method chaining, and all commands are deferred until $digest anyway, I suggest adding a new chaining method, e.g. reload(boolean):

$location.path("/thing/"+thing.id).replace().reload(false)

P.S. Is this the Chris Gross that started the Eclipse Nebula project?

[cgross]

Yup :)

[celmaun]

+1 👍

[shahmirn]

+1

Right now, we're using a dirty hack to get around this problem.

    $scope.$on('$locationChangeSuccess', function(event) {

        // Want to prevent re-loading when going from /dataEntry/1 to some other dataEntry path
        if ($route && $route.current && $route.current.$route.templateUrl.indexOf('dataEntry') > 0) {
            $route.current = lastRoute; //Does the actual prevention of routing
        }
});

[stryderjzw]

+1

[chicoxyzzy]

+1

[evrijkom]

+1

[tnajdek]

+1

[sylvain-hamel]

+1

[sylvain-hamel]

Here is my attempt at fixing this by supporting preventDefault() for $routeChangeStart. What do you think about that?
Commit : sylvain-hamel@f8ac46e

[lrlopez]

I've been working into @qualidafial approach for a few days and now the PR is ready. I've created a new notify method that allows skipping the location change notification for one time. This should avoid triggering any route change or reload.

This doesn't touch the routing system, so you don't have to change your route definitions. It will still work even if you use ui-router instead of the standard AngularJS routing system.

Example: $location.path('/client/2').replace().notify(false);

I've also worked some tests and documentation bits.

[cburgdorf]

+1

[tiff]

another +1
Using @lrlopez' pull request already. Works like a charm.

[cayblood]

+1

[mlegenhausen]

+1

[lrlopez]

Unfortunately PR #2398 has been rejected by the Angular team as skipping notifications could lead to inconsistencies between the actual URL and the current route. There is a long explanation at the end of the discussion.

I don't need this feature in any of my projects, but I'll keep it in my repository so it can be merged if you wish. Just let me know if it gets out of sync with the master branch so I can rebase the changes. Thanks!

[camshaft]

+1

[keabard]

+1, need this :(

[olanod]

+1

[tkrotoff]

Edit: better approach here: #1699 (comment)

I've created a reusable factory to bypass this (based on the idea from @shahmirn):

/**
 * HACK Do not reload the current template if it is not needed.
 *
 * See AngularJS: Change hash and route without completely reloading controller http://stackoverflow.com/questions/12115259/angularjs-change-hash-and-route-without-completely-reloading-controller
 */
app.factory('DoNotReloadCurrentTemplate', ['$route', function($route) {
  return function(scope) {
    var lastRoute = $route.current;
    scope.$on('$locationChangeSuccess', function() {
      if (lastRoute.$$route.templateUrl === $route.current.$$route.templateUrl) {
        console.log('DoNotReloadCurrentTemplate not reloading template: ' + $route.current.$$route.templateUrl);
        $route.current = lastRoute;
      }
    });
  };
}]);

How to use:

app.controller('MyCtrl',
  ['$scope', 'DoNotReloadCurrentTemplate',
  function($scope, DoNotReloadCurrentTemplate) {

  DoNotReloadCurrentTemplate($scope);
}]);

Source: http://stackoverflow.com/a/16496112/990356

[Zariel]

If you set "reloadOnSearch" to false on the route then it seems to fix the hash changes reloading the whole page.

[mgcrea]

+1

This would be great for mobile apps, where the ng-view create/destroy lifecycle is not appropriate (kills performance and usability).

[braaam]

@tkrotoff Thanks for the example. Since your workaround is cancelling event notifications I've added a broadcast on the rootscope so other controllers can still be notified of the route change:

/**
 * HACK Do not reload the current template if it is not needed.
 *
 * See AngularJS: Change hash and route without completely reloading controller http://stackoverflow.com/questions/12115259/angularjs-change-hash-and-route-without-completely-reloading-controller
 */
app.factory('DoNotReloadCurrentTemplate', ['$route', '$rootScope', function($route, $rootScope) {
  return function(scope) {
    var lastRoute = $route.current;
    scope.$on('$locationChangeSuccess', function() {
      if (lastRoute.$$route.templateUrl === $route.current.$$route.templateUrl) {
        console.log('DoNotReloadCurrentTemplate not reloading template: ' + $route.current.$$route.templateUrl);
        $rootScope.$broadcast('locationChangedWithoutReload', $route.current);
        $route.current = lastRoute;        
      }
    });
  };
}]);

Then:

app.controller('MyCtrl',
  ['$scope', 'DoNotReloadCurrentTemplate',
  function($scope, DoNotReloadCurrentTemplate) {

  DoNotReloadCurrentTemplate($scope);

  $rootScope.$on('locationChangedWithoutReload', function(event, route) {
    // set location specific breadcrumbs
    $scope.breadcrumbs = assembleBreadCrumbs();

    // do something for specific route
    if (route.$$route.action == 'item') {
      $scope.item = $scope.items[params.itemId];
      $rootScope.title = $scope.item.name;
    }
  });
}]);

[sergey-buturlakin]

I have the same issue as the topic author has and created modified version of solution described above.

app.factory('skipReload', [
    '$route',
    '$rootScope',
    function ($route, $rootScope) {
        return function () {
            var lastRoute = $route.current;
            var un = $rootScope.$on('$locationChangeSuccess', function () {
                $route.current = lastRoute;
                un();
            });
        };
    }
]);

Usage:

app.controller('ThingCtrl', ['$scope', '$http', '$location', 'skipReload', function ($scope, $http, $location, skipReload) {
    ...
    $scope.submit = function () {
        ...
        $http.post('thing', thing).success(function (id) {
            skipReload();
            $location.path('/thing/' + id).replace();
        });
    };
}]);

Using permanent event listener that tests templateUrl to decide whether to allow route reload, could break routing to other views that uses same templateUrl. For example, I routed to /thing/new and the view shows link to last added thing /thing/5, I'll be unable to navigate to thing 5 and to any other thing (even changing url in browser explicitly). Another problem with templateUrl testing is that templates could be specified by using template property (as string or function).

This hack allows to skip exactly one route reload and doesn't break routing.

[vadimcoder]

+1

[0cv]

I confirm that ngSilent is doing perfectly the job. Even so an official solution would be highly appreciated.

[freeman14]

The solution is essentially to add an extra parameter to $location.path().

app.run(['$route', '$rootScope', '$location', function ($route, $rootScope, $location) {
    var original = $location.path;
    $location.path = function (path, reload) {
        if (reload === false) {
            var lastRoute = $route.current;
            var un = $rootScope.$on('$locationChangeSuccess', function () {
                $route.current = lastRoute;
                un();
            });
        }
        return original.apply($location, [path]);
    };
}]);

And then just use like this

$location.path('/path/that/you/need', false);

[JohnGalt1717]

I should just be able to do $location.replace() just like the window.location.replace function. This is just silly because every Create in a CRUD operation will always have this issue.

[stitisami]

(y) +1

[espeandr]

+1

[yalishizhude]

I advise you use "search param" like this:
/thing?id=1234
Do not config the param in the router provider,it won't reload view and controller.
If you want to get id
$location.search().id //1234
@cgross

[dolymood]

Demo http://codepen.io/dolymood/details/jrEQBx/
Use decorator to decorator ngViewDirective

[mattantonelli]

+1

[srijanshukla18]

+1

[Meokme]

+1

[bytexro]

+1

[b-mcrae]

+1

[nitinsurana]

+1

[risingfish]

+!

[petebacondarwin]

Enough of the +1s already :-)
We get the message. We will look at this before Xmas!

[gkalpak]

Closed by #15002.