AngularJS Change Path Without Reloading

To change path URL with AngularJS, $location.path() is passed the new URL as a parameter, and the page is automatically reloaded. This means that if you ever make a change to the URL in an Angular application, then the partial and controller will be reloaded automatically. This is great most of the time, however, there are times when reloading the controller is unwanted. AngularJS doesn’t have a native fix to stop reloading when the path is changed. So a quick addition to our app.js file will do the trick.

Solution

The solution is essentially to add an extra parameter to $location.path(). So rather than just taking in the new URL, it will also take in a boolean were true will refresh the page and false will not. The following block of code is what needs to be added to the app.js file.

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]);
    };
}])

There you go, now here is what it will look like in the controller where the path is being changed.

$location.path('/user/' + $scope.userId, false);

Well, that’s all there is to it, we are now free to change path of the URL without reloading the page.