Using names/aliases for $routeProvider

[matsko]

Hey guys.

Keeping track of URLs and hash prefixes manually is pretty tricky and can lead to duplicate URL strings and more testing code. It would be nice if you can name your routes (optionally) and then query those names later on in your application via the $routeProvider service.

So lets say I have a route that goes to the home page:

$routeProvider.when('/home',{
   controller : '...',
   templateUrl : '...'
});

And my HTML links like so:

<a href="#/home">...</a>
or if html5mode is on
<a href="/home">...</a>

This works fine, but if I change the route to from /home to just / then I need to update that.

What I am proposing is that I could patch AngularJS to include support for naming and aliasing routes so that they can be accessed directly in the scope.

$routeProvider.when('/home',{
   name : 'home_path',
   controller : '...',
   templateUrl : '...'
});
$routeProvider.when('/profile/:id/:value',{
   name : 'profile_path',
   controller : '...',
   templateUrl : '...'
});
$routeProvider.alias('root_path', 'home_path'); //now the root_path URL is the same

Then by using either a service or factory you can have access to that route:

$routeProvider.lookup('home_path'); //returns either the full hash or just the URL (or both)
$routeProvider.lookup('profile_path',{
  id : 'some_id',
  value : 'some_value'
}); //returns either the full hash or just the URL (or both)

Then you can attach this method to the $rootScope member and access the routes directly in the HTML (if you choose to do so).

$rootScope.r = function(path, args) {
  return $routeProvider.lookup(path, args);
};

<!--- This way you don't have to remember if you're using the hash or not --->
<a data-ng-href="{{ r('home_path') }}">...</a>
<a data-ng-href="{{ r('profile_path', { id : 'some_id', value : 'some_value' }) }}">...</a>

If this is OK with you guys I would happily contribute and put together the code and documentation. Is there anything in the works like this?

[ProLoser]

Is it not as good as using the same route definition for both aliases?

Also if you're at all interested in helping the development of a future router system (such as feature requests and code contribution) you should hop on over to https://github.com/angular-ui/router

[stakach]

This augments the existing $route provider so existing code will continue to work.

In a view:

<ul>
  <li goto="home">Dashboard</li>
  <li goto="profile" client="me">My Profile</li>
  <li goto="profile">Grab :client from url</li>
</ul>

• This automatically adds a configurable active class when the route matches.
• Routes with variables have the variables mixed in
• HREFs are kept up to date on <a> tags
• attributes can be used to mix in route variables, search and hash components

Routing code:

angular.module('RouteExample')
.config(['$namedRouteProvider', function ($routeProvider) {
    $routeProvider
        .when('/', {
            name: 'login',
            templateUrl: 'views/login.html',
            controller: 'LoginCtrl'
        })
        .when('/:client', {
            name: 'home',
            templateUrl: 'views/dashboard.html',
            controller: 'DashboardCtrl'
        })
        .when('/:client/profile', {
            name: 'profile',
            templateUrl: 'views/profile.html',
            controller: 'ProfileCtrl'
        });
}]);

[stakach]

Here is a more up-to-date version of that gist: https://github.com/cotag/ngRouteNames

[muratcorlu]

We also implemented a router that has named routes and gives ability to define language specific urls: https://github.com/sahibinden/angular-router-advanced Sorry, there is no English documentation yet, but I think example codes very self-definitive. I think named url support is a 'must' feature for big Angular applications. We also want to contribute ngRoute library if that idea is good for you.

[matsko]

@btford do you have something in mind like this for the new AngularJS router?

[IgorMinar]

@matsko yes

[reubenmoes]

@IgorMinar Looking forward to it.