Angularjs gets previous route route

Question

<h1>{{header}}</h1> <!-- This Back button has multiple option --> <!-- In home page it will show menu --> <!-- In other views it will show back link --> <a ng-href="{{back.url}}">{{back.text}}</a> <div ng-view></div> 

In my module configuration

  $routeProvider. when('/', { controller:HomeCtrl, templateUrl:'home.html' }). when('/menu', { controller:MenuCtrl, templateUrl:'menu.html' }). when('/items', { controller:ItemsCtrl, templateUrl:'items.html' }). otherwise({ redirectto:'/' }); 

Controllers

 function HomeCtrl($scope, $rootScope){ $rootScope.header = "Home"; $rootScope.back = {url:'#/menu', text:'Menu'}; } function MenuCtrl($scope, $rootScope){ $rootScope.header = "Menu"; $rootScope.back = {url:'#/', text:'Back'}; } function ItemsCtrl($scope, $rootScope){ $rootScope.header = "Items"; $rootScope.back = {url:'#/', text:'Back'}; } 

As you can see in my controllers, I hardcoded the return URL and text (in fact, I don't need text, like an image). Thus, I found that in some cases the button does not move correctly. I cannot use the history.back() button coz my back to go to the menu link in the home view.

So my question is how to get the previous route route in controllers or the best way to achieve this?

I created a Plunker demo of my problem. Please check it.

Answer 1

This alternative also provides inverse function.

Template:

 <a ng-click='back()'>Back</a> 

Module:

 myModule.run(function ($rootScope, $location) { var history = []; $rootScope.$on('$routeChangeSuccess', function() { history.push($location.$$path); }); $rootScope.back = function () { var prevUrl = history.length > 1 ? history.splice(-2)[0] : "/"; $location.path(prevUrl); }; }); 

Answer 2

Use the $ locationChangeStart or $ locationChangeSuccess events , the third parameter:

 $scope.$on('$locationChangeStart',function(evt, absNewUrl, absOldUrl) { console.log('start', evt, absNewUrl, absOldUrl); }); $scope.$on('$locationChangeSuccess',function(evt, absNewUrl, absOldUrl) { console.log('success', evt, absNewUrl, absOldUrl); }); 

Answer 3

In your html:

 <a href="javascript:void(0);" ng-click="go_back()">Go Back</a> 

On the main controller:

 $scope.go_back = function() { $window.history.back(); }; 

When the user clicks the "Back" link, the controller function is called and it will return to the previous route.

Answer 4

@andresh For me, locationChangeSuccess worked instead of routeChangeSuccess.

 //Go back to the previous stage with this back() call var history = []; $rootScope.$on('$locationChangeSuccess', function() { history.push($location.$$path); }); $rootScope.back = function () { var prevUrl = history.length > 1 ? history.splice(-2)[0] : "/"; $location.path(prevUrl); history = []; //Delete history array after going back }; 

Answer 5

This is how I now store the link to the previous path in $rootScope :

 run(['$rootScope', function($rootScope) { $rootScope.$on('$locationChangeStart', function() { $rootScope.previousPage = location.pathname; }); }]); 

Answer 6

You will need to associate an event listener with $ rootScope in Angular 1.x, but you will probably need to prove your code a bit in the future without storing the value of the previous location on $ rootScope. The best place to store the value would be the service:

 var app = angular.module('myApp', []) .service('locationHistoryService', function(){ return { previousLocation: null, store: function(location){ this.previousLocation = location; }, get: function(){ return this.previousLocation; } }) .run(['$rootScope', 'locationHistoryService', function($location, locationHistoryService){ $rootScope.$on('$locationChangeSuccess', function(e, newLocation, oldLocation){ locationHistoryService.store(oldLocation); }); }]); 

Answer 7

Just for the document:

The previousRoute callback argument has a property called $route , which is very similar to the $route service. Unfortunately, the currentRoute argument does not contain much information about the current route.

To overcome this, I tried something like this.

 $routeProvider. when('/', { controller:..., templateUrl:'...', routeName:"Home" }). when('/menu', { controller:..., templateUrl:'...', routeName:"Site Menu" }) 

Note that the custom routeName property is added in the above route configurations.

 app.run(function($rootScope, $route){ //Bind the `$routeChangeSuccess` event on the rootScope, so that we dont need to //bind in induvidual controllers. $rootScope.$on('$routeChangeSuccess', function(currentRoute, previousRoute) { //This will give the custom property that we have defined while configuring the routes. console.log($route.current.routeName) }) }) 

Answer 8

for the code above:

 $scope.$on('$locationChangeStart',function(evt, absNewUrl, absOldUrl) { console.log('prev path: ' + absOldUrl.$$route.originalPath); });