How to create a 'url_for' link helper in AngularjJS

Question

In .NET MVC there is @Url.Action() and in RoR there is url_for()

I could not find similar url building helper in angularjs.

I'm already providing everything that is needed to build url to $routeProvider so something like: $routeProvider.urlFor("MyCtrl", {id: 5}) could be nice to have.

My main goal here is to avoid hardcoded urls in viewes and other places and to avoid repeating url/routes patterns twice.

UPDATE:

Seems like it's hard to explain what i want so here is exact example of what i want:

Instead of writing this in viewes:

<a ng-href="/product/5">foo</a>

I want to write this:

<a ng-href="urlFor("ProductCtrl", {id:5})">foo</a>

So if later i decide to change path of ProductCtrl I would not have to update url in this a element.

What would be good solution for my goals?

Answer 1

You could try with something like the following (just came up with it) inside your main module's run() block:

app.run(function($route, $rootScope)
{
  $rootScope.path = function(controller, params)
  {
    // Iterate over all available routes

    for(var path in $route.routes)
    {
      var pathController = $route.routes[path].controller;

      if(pathController == controller) // Route found
      {
        var result = path;

        // Construct the path with given parameters in it

        for(var param in params)
        {
          result = result.replace(':' + param, params[param]);
        }

        return result;
      }
    }

    // No such controller in route definitions

    return undefined;
  };
});

This will extend the root scope of the application with the new path() function - so it can be used anywhere in the application. It uses the $route service to get the controller names and the corresponding paths, so you won't have to repeat yourself.

Example usage:

{{ path('LibraryController', { bookId : 'x', chapterId : 'y' }) }}

Live example at: http://plnkr.co/edit/54DfhPK2ZDr9keCZFPhk?p=preview

Answer 2

There are numerous approaches...a custom directive or ng-click to modify $location, or using a function in ng-href to parse the url from object and have it placed as href in an <a> tag.

Example using ng-href:

HTML:

<li ng-repeat="item in items">
    <a ng-href="{{url(item)}}">{{item.txt}}</a>
</li>

JS:

function Ctrl($scope){
  $scope.items=[
    {id:1,txt:'foo'},
    {id:2,txt:'bar'}
 ];

  $scope.url=function(item){
    return '#/'+item.id
  }
}

Example using ng-click and $location

HTML:

<a ng-click="newPath(item)">{{item.txt}}</a>

JS:

function Ctrl($scope){
  $scope.items=[
    {id:1,txt:'foo'},
    {id:2,txt:'bar'}
 ];  

  $scope.newPath=function(item){
   $location.path('/'+item.id)
  }  
}

DEMO: http://jsbin.com/ovemaq/3

Answer 3

In one of recent project I came up to this solution it helped me to solve my needs right in time. It will be interesting to help you to improve it to fit your usecase.

1. Move routes definition to config:

...
ROUTES: {
    PAGE1: '/page1/:id',
    PAGE2: '/page2/:id/:name'
},
...

2. Define routes, using values from config:

app.config(['$routeProvider', 'config', function ($routeProvider, config) {
    $routeProvider.when('/', {
        templateUrl: 'partials/home.html',
        controller: 'HomeCtrl'
    });

    $routeProvider.when(config.ROUTES.PAGE1, {
        templateUrl: 'partials/page1.html',
        controller: 'PageOneCtrl'
    });

    ...

    $routeProvider.otherwise({
        redirectTo: '/'
    });

}]);

3. Set up service to provide functionality to create urls:

services.factory('routes', function (config) {

    // populates `:param` placeholder in string with hash value
    var parseString = function (string, parameters) {
        if (!string) return '';
        if (!parameters) return string;

        for (var index in parameters) {
            if (!parameters.hasOwnProperty(index)) continue;

            string = string.replace(':' + index, parameters[index]);
        }

        return string;
    };

    return {
        getPage1Link: function (urlParams) {
            return '#' + parseString(config.ROUTES.PAGE1, urlParams);
        }
    };
});

---

== Drawbacks ==

With this approach I had to define getter for each route (there were less then 5, and development speed was vital)