CODEWITHSUNDEEP
javascriptangularjs
FlashyFuddyFuddy
FlashyFuddyFuddy

Reputation: 303

Angular JS - How to force browser to log history for quick routing?

My website(not live yet) has employed angularjs routing. When a page lands, based on a quick condition check, it routes us to the second page. The routing takes place very quickly that, browser doesn't store the history of the first page. We have also enabled the back button functionality, which doesn't work since the history is not stored. Also, there are a couple of external links on first page which takes few seconds to load. So while these external links load, the first page appears and the condition is checked and routed to second page. Any thoughts or resolution, for forcing the browser to log the first page's history?

Other thought on this: Is there any solution to make the first page wait for all the external links to be fully loaded and then do the routing?

I've searched through Google but haven't found a solution yet. Any kind of help is much appreciated.

Upvotes: 0

Views: 742

Answers (2)

FlashyFuddyFuddy
FlashyFuddyFuddy

Reputation: 303

Angular's $location.replace() did the magic at last.

Previously I was using $location.url('/somepath') which was only redirecting to my browser's home page instead of saving first page's history.

Upvotes: 0

Matias Fernandez Martinez
Matias Fernandez Martinez

Reputation: 1885

Navigation History You should implement a StateHistory service, this service should have methods for adding states into a private Array, and methods such as getPreviusState()

Then you can add each state on the $stateChangeSuccess event (Use angular ui-router)

angular.module('myApp', ['ui.router'])
.run(function($rootScope, navigationHistory){
  $rootScope.$on('$stateChangeSuccess',
      function(event, toState, toParams, fromState, fromParams) {
        navigationHistory.addVisitedState(toState,toParams);
      };
});

Navigate when resource is loaded Use $http to obtain the resource (html, or others), and as a callback use $state.go to navigate forward.

angular.module('myApp')
.controller('AppCtrl', function($state,){
  $http.get('/someUrl'). // $http.get('page.html') / etc
  success(function(data, status, headers, config) {
    // save data or add it on the view/template
    $state.go('secondState');
    //Or
    //$state.go(navigationHistory.getLastState().name);
  }).
  error(errBack);
}

$http documentation

Upvotes: 1

Related Questions