angularjs - how not to hard code urls in the templates

I would create a constant in your app and then inject that into either the $rootScope, or controller that looks after the specific part of the page with the links.

Something like this:

app.constant('appURL', {
  login:             '/login'
  userProfilePrefix: '/profiles/'
});

Then your controller can request it as a dependency and put it on the scope (or you could put it on the $rootScope in app.run(..) :

app.controller('PageController', ['appURL', function($scope){

  $scope.appURL = appURL;
  $scope.userId = 33;

}]);

Finally, your HTML can use the following:

<a ng-href="{{appURL.userProfilePrefix + userId}}">Eamonn</a>

NOTE use ng-href where possible - all this does is means that if a user happens to click on a link before the interpolation has happened, they won't get redirected to /{{appURL.userProfilePrefix + userId}}

I found this library that does exactly what I want: https://github.com/airtonix/angular-named-routes

Thanks for your responses.

I've created a module to solve exactly this problem.

Here's the issue at AngularJS github: https://github.com/angular/angular.js/issues/7091#issuecomment-40742173

And here's the module repository: https://github.com/betsol/angular-router

This module works on top of this library: https://github.com/betsol/js-router

Usage example

routerProvider
    .when('/user/:userId/post/:postId/comment/add', {
        name: 'user-post-comment-add',
        templateUrl: '/partials/user-post-comment-add.html',
        controller: 'UserPostCommentAddCtrl'
    })
;

<a href="{{ router.generate('user-post-comment-add', { userId: 100, postId: 500 }) }}">Add comment</a>