4

My application is based on Single page model. I am using JQuery History object to change the URL so that if user refresh the application then I can retain the position of application when user refreshed the browser. It was working good however somehow it stopped working. After analysis I found that Angular.js is changing modified URL (modified by Jquery History API) into original URL (URL which was used to launch Application). I am surprised and confused why suddenly Angular JS started resetting of URL. I tried lot but not able to find any root cause. Please help and also please suggest other possible approach as well to retain the user location on browser refresh (or back button). Following are more details.

//Change the browser state to support History to launch file. It will remove projectid from URL and will add fileid
function updateBrowserStateOnFileLaunch(fileId, pageTitle, stateCounter)
{
    //Get current URL
    var finalURL = getNormalizedHashedURL("");
        //Remove projectid query string from paramter if it has and update/add fileid
        finalURL = updateQueryStringParameters(finalURL, [{key:"projectid", value:undefined}, {key:"fileid", value:fileId}]);   
    //Change history
    History.pushState({state:stateCounter,rand:getTimestampId()}, pageTitle, finalURL); 
}

Note: Not adding details on "getNormalizedHashedURL" and "updateQueryStringParameters" method to keep post small.

I am using ng-if to change the view based on state.

<!-- File editor view -->
        <div data-ng-if="currentView === 3">    
<!-- Project File view-->
</div>

During debug I see angular.js is resetting URL after executing following line.

Code in my Application which try to get data from server:

 //get list of templates by making server call using Angular $resource object
            Template.query({projectid: project._id}, function(response) {
//Processing of response
});

Code in angular.js which is resetting URL:

 $apply: function(expr) {
        try {
          beginPhase('$apply');
          return this.$eval(expr);
        } catch (e) {
          $exceptionHandler(e);
        } finally {
          clearPhase();
          try {
            $rootScope.$digest(); **//At this line I find that URL is getting reset**
          } catch (e) {
            $exceptionHandler(e);
            throw e;
          }
        }
      },

Please help.

joy
  • 3,669
  • 7
  • 38
  • 73

1 Answers1

5

From Turn off URL manipulation in AngularJS

angular.module('sample', [])
    .config( ['$provide', function ($provide){
        $provide.decorator('$browser', ['$delegate', function ($delegate) {
            $delegate.onUrlChange = function () {};
            $delegate.url = function () { return ""};
            return $delegate;
        }]);
    }]);

ES6 variant:

angular.module('sample', [])
    .config(["$provide", $provide => {
        $provide.decorator("$browser", ["$delegate", $delegate => {
            $delegate.onUrlChange = () => { };
            $delegate.url = () => "";

            return $delegate;
        }]);
    }]);
Cerbrus
  • 70,800
  • 18
  • 132
  • 147
Sean Coughlan
  • 89
  • 1
  • 4