How to get the route name when location changes?

Question

I defined some routes:

angular.module('myApp', [])   .config('$routeProvider', function($routeProvider) {     $routeProvider.when('/aaa', { templateUrl: '/111.html' })                   .when('/bbb', { templateUrl: '/222.html'});   }); 

And I want to get the route name when user changes the route:

angular.module('myApp')   .run(['$rootScope', function($rootScope) {     $rootScope.$on('$routeChangeSuccess', function(scope, current, pre) {       // how to get current route name, e.g. /aaa or /bbb       console.log('Current route name: ' + ???);     }   }]); 

But I don't know how to get it. I can get the templateUrl, but not the route name.

---

UPDATE

A more complex use case:

$routeProvider.when('/users/:id', { templateUrl: '/show_user.html' }) 

If current path is:

/users/12345 

It should match /users/:id, but how do I know which route is matched and to get the route name /users/:id?

Answer 1

You can inject the $location service and make use of its path() function.

angular.module('myApp')   .run(['$rootScope','$location', '$routeParams', function($rootScope, $location, $routeParams) {     $rootScope.$on('$routeChangeSuccess', function(e, current, pre) {       console.log('Current route name: ' + $location.path());       // Get all URL parameter       console.log($routeParams);     });   }]); 

You can find other useful $location methods in the docs

UPDATE

If you want to have an array of your current route parameters, just inject the $routeParams service like I did above.

Answer 2

You don't have to inject $location and $routeParams.
You can use current.$$route.originalPath

app.run(function ($rootScope) {     $rootScope.$on('$routeChangeSuccess', function (e, current, pre) {         console.log(current.$$route.originalPath);     }); }); 

This is enough for simple routes (without :id, etc.).

With the more complex use case, it will return /users/:id.
But you can extract the :id param from current.params.id and replace it in the full route.

app.run(function ($rootScope) {     $rootScope.$on('$routeChangeSuccess', function (e, current, pre) {         var fullRoute = current.$$route.originalPath,             routeParams = current.params,             resolvedRoute;          console.log(fullRoute);         console.log(routeParams);          resolvedRoute = fullRoute.replace(/:id/, routeParams.id);         console.log(resolvedRoute);     }); }); 

Depending on exactly what you need do with the route string, this could be messy compared to Flek's answer (e.g. if you have several params), or if you don't want to be bound to the route params names.

Also Note: There's a missing closing brace in your code for the $on opening brace.

Edit 15/01/2014

Looks like the $$ properties in Angular are suggested to be private and we should not call them directly from our code.