Find route from angularjs routeprovider by name

Question

I'm defining my routes like this.

$routeProvider
.when('/Home', {
     name: 'Main',
     templateUrl: 'Main.html',
     controller: 'MainController',
     controllerAs: 'ctrl'
})
.when('/About', {
     name: 'About',
     templateUrl: 'About.html',
     controller: 'AboutController',
     controllerAs: 'ctrl'
})

How can I in a controller find the '/About' URL by querying on the name 'About', when I'm in the Main controller?

Answer 1

You can inject $location to your controller and get the URL using $location.path() or inject $route to get the route name.

Example:

function MainCntl($scope,$location,$route) {
  $scope.location = $location.path(); // '/Home'
  $scope.routeName= $route.current.$$route.name; //'Main'
}

Answer 2

Since there is nothing built in, an extending of route can solve this problem in a nice way:

$provide.decorator('$route', ($delegate) => {

    $delegate.getRoute = (name) => {
        var result = null;
        angular.forEach($delegate.routes, (config, route) => {
            if (config.name === name) {
                result = route;
            }
        });
        return result;
    };

    return $delegate;
});

Answer 3

Check the questions:

• Angular js - check if current url matches the route (with dynamic url params)
• How to get the route name when location changes?

My solution to this was the following:

Object.getPrototypeOf($route.current) === $route.routes['/Home'];

Given that the route object might be empty after you instantiate your controller, you should use the $routeChangeSuccess event, like this:

$rootScope.$on('$routeChangeSuccess', function(e, curr, prev) {
    if (Object.getPrototypeOf($route.current) === $route.routes['/Home']) {
         // do something when route changes to /Home
    }

    else if (Object.getPrototypeOf($route.current) === $route.routes['/About']) {
         // do something when route changes to /About
    }
}

There's no need for declaring additional properties (although it would be nice if angular allowed it). You just use the pattern string.

As I've said in those other 2 questions, this is behavior is not documented (both $route.current and $route.routes are documented, but the prototype inheritance between them is not), so use it at your own risk.

Also this works on IE9+.

Answer 4

If your purpose is to switch url path, you can try this:

function MainCntl($scope, $location) {

    // put this at where your want to find the '/About' URL
    $location.path('/About'); 

}