AngularJS Change Path Without Reloading

AngularJS Change Path Without Reloading


Nov 15, 2015

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.


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.['$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;
        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.

before you go, spread the word


Father. Husband. Web Developer at Deseret Book. Runner. Real Salt Lake fan.

join the newsletter

or don't, what do we care? but if you do, we promise to send cool stuff