Change Service Portal URL without reloading the page.

[amanda_l_webb]

Has anyone figured out how to change the URL without reloading the page?

I would like to alter the URL so that my users can send it out and it will pre-populate widget information. Problem is that it reloads. I have tried to figure out how to use ngRoute, ui.route, and history.pushState. All seem to reload the page. Any other thoughts?

Thanks!

[Patrick Schulte]

Hi Amanada,

I haven't tried this yet but this might be the solution to your problem:
https://www.consolelog.io/angularjs-change-path-without-reloading

Best regards,
Patrick

[Patrick Schulte]

Okay, so after some investigation and a lot of trial and error (the first solution/link posted by me seemed not to work in the Service Portal) I came up with the following soution to change the URL without reloading the page/controller.

In your Controller use the following:

$scope.$on("$locationChangeStart", function(e){
         //This prevents the built in functionality of the Service Portal from reloading 
         e.preventDefault();
});

//The function doing the magic
$scope.changeUrlWithoutReload = function(state, title, url){
         window.history.replaceState(state, title, url);
}

$scope.changeUrlWithoutReload('historyState', 'myNewTitle', 'myNewUrl')

Reference: Manipulating the browser history - Web APIs | MDN

[amanda_l_webb]

Calling the e.preventDefault() in $locationChangeStart does not allow the route to change. If you debug w/l a breakpoint on the e.preventDefault(), you can see that the route HAS changed, but if you debug through, the code compares the newURL to oldURL and reverts it back to the oldURL.

I tried using $locationChangeSuccess, but by the time you call e.preventDefault() in the success function, the reload has already happened.

Not sure what else to try. I am still fiddling around w/ it and really want to get this to work though.

[Patrick Schulte · Accepted solution]

You are right, it seems like that the reason for this is that the $locationChangeStart events gets triggered more than once so you have to build a condition within the event listener.
What has worked for me is the following:

The event listener:

var originalUrl, initUrl;
$rootScope.$on("$locationChangeStart", function(e, newUrl){
         if(newUrl != originalUrl && newUrl != initUrl){
                   $window.history.replaceState(newUrl, $document.title, newUrl);
         }
         originalUrl = newUrl;
         e.preventDefault();
});

The URL change:

$scope.changeURL = function(){
         initUrl = $location.absUrl();

         //Set your desired URL parameters here, you could also extend the current ones with:         
         /*
         var params = $location.search()
         angular.extend(params, {
                   someParam:'test'
         });
           */       
         var params = {
                   someParam:'test',
                   anotherParam:'anotherTest'
         };

         //triggers the $locationChangeStart event
         $location.search($httpParamSerializer(params));
}

Dont forget to inject $document, $httpParamSerializer, $location, $scope and $rootScope in your controller.

Let me know if this worked out for you.

[amanda_l_webb]

FINALLY!!! THANK YOU SO MUCH. I am honestly a little bit confused when I debug because the listener is fired unexpectedly (meaning the newURL variable is not what I would expect), but the code accounts for that and works. So, I don't really care!

Thanks so much! This is fantastic.