Change Service Portal URL without reloading the page.

amanda_l_webb · ‎07-18-2017

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 · ‎09-23-2017

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.

View solution in original post

MG Casey · ‎04-02-2024

ahh, you are amazing! They need this documented somewhere in the official documentation!!!