How to create a 'url_for' link helper in AngularjJS

[Andrej Slivko]

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 views and other places and to avoid repeating url/routes patterns twice.

What would be good solution for my goals?

P.S. I asked same question in stackoverflow but didn't get answer yet. http://stackoverflow.com/questions/15324039/how-to-create-a-url-for-link-helper-in-angularjjs 

[Florian Orben]

Hey,

well you will have to declare your routes at least once in the form that's being used by $routeProvider, reason is that angular doesn't route the way RoR or others do it (at least in their default behaviour).

You could declare a config object in which you store all routes in a central place, like this:

angular.module('yourApp').constant('routes', {

  'MainCtrl' => '/index',

  'FooCtrl' => '/foo',

  'OtherCtrl' => '/something-else'

});

Now you could inject the routes object in $routeProvider configuration and call

$routeProvider.when( routes['MainCtrl], { ...} ); //etc

And for usage in the view just write a filter:

angular.module('yourApp').filter(function(routes) {

  return function(input) {

    return routes[input] || 'index'; //where index would be some kind of default route

  }

});

[Florian Orben]

Small typo. The filter would be

angular.module('yourApp').filter('urlfor', ['routes', function(routes) {

  return function(input) {

    return routes[input] || 'index'; //where index would be some kind of default route

  }

}]);

and usage in view::

{{'MainCtrl' | urlfor}}

Am Dienstag, 12. März 2013 17:23:03 UTC+1 schrieb Andrej Slivko:

[Mathieu Chauvinc]

Hi, I've just posted about a service + directive that I created to do what you are requesting, but I included code instead of creating a plunker.

Should have created a plunker, so here it is: http://plnkr.co/edit/ykOTOF

The service to reverse URL from a name (+mapping) is reverseUrlService; an example of usage can be found in the MainCtrl. The service also handles caching (using Angular's cache factory).

The directive is zestLink; Transforms a zest-link tag into an anchor; an example of usage can be found in index.html

Note that the link from string to route is made via a "name" attribute on the routes.

Hope this can be useful to you

Mat

[Joberto Diniz]

It is a shame... I couldn't find any 3rd module which does that. How people are generating their links?

None of the answers covers all the url, for instance:

 $routeProvider.when('/:lang/tv/:channelPid?', { templateUrl: 'tv/tv.html', controller: 'TvController' });

ChannelPid is optional, so if I don't pass channelPid parameter, the proposed function (answered at stackoverflow) will not replace it, and it will generate a wrong link.

People can't possible be generating links manually, I mean, look at the following route:

$routeProvider.when('/:lang/:catalog/:pid/:title?', { templateUrl: 'details/details.html', controller: 'DetailsController' });

There are a lot of things there...

I ruled out my own version, which is far from great...

Any updates? Any new lib for this?

[Thomas Waldecker]

What about ui-router?

there is the ui-sref directive with just the state as parameter which generates the url to the according state.

[Joberto Diniz]

ui-sref would work.

I've never used ui-router. Digging it up a bit, it has several features, but I think is somehow odd the nested states. I mean, it's fine, but you can think of them as replaces for directives. Almost every part of the template can be a state, which can have a template and controller on its own (almost the definition of a directive).

Nevertheless, next project I'll definitely use it.