Route interpolation

[Marc Fallows]

Is the route interpolation exposed anywhere? It seem fairly hidden, but would be a useful thing to take advantage of so I don't have to rewrite the logic on my end.

For example say I want to have the following in my controller:

var searchRoute = "/search/:query/:sort?/:limit?";

$scope.goToSearch = function(opts){
   // opts could be {query: 'foo', limit: 10}

   var url = $route.interpolate(searchRoute, opts);
   $location.path(url);
};

Obviously $route.interpolate doesn't exist. Is there something that exists which could do this?

Otherwise I have to interpolate that searchRoute myself, which seems silly given that Angular already does this.

[Eric Eslinger]

I use ui-router, which exposes ui-sref in the HTML side (ui-sref="app.search({query: 'foo', sort: 'asc'})" converts into an appropriate a href or onclick if it's not in an anchor element) and $state.go on the controller side which works more or less the same way.  Dunno if the basic router does that, but ui-router is pretty rad in general.

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

[Marc Fallows]

I love ui-router but in this particular project we are already using ngRoute and there's not really an option to switch.

I can't see a way of doing this with the $route service, which seems a little strange.

You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/bEX5Ateee98/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.

To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

--

Marc Fallows

ma...@marcfallows.com

[Sander Elias]

Hi Marc,

As I just said somewhere else, I'm still a bit groggy from ngEurope. So I might have missed a point in your question.

can't you just inject $routeParams into your controller/whatever where you need this?

Regards

Sander

[Witold Szczerba]

As Sander said, the $routeParams is the missing service :-)

Regards,
Witold Szczerba

--

[Marc Fallows]

I may be missing what you guys are suggesting. What I want is to be able to build the route, not find out the route parameters on the current route.

If $route.interpolate existed I would expect the tests below to pass. Angular already has an interpolate in ngRoute. I can copy theirs, or write my own, but ideally I would use their existing one. As far as I can tell it's not exposed, but I'm hoping I'm wrong.

it('should interpolate a route', function(){

   var searchRoute = "/search/:query/:limit?";

   var url = $route.interpolate(searchRoute, {query: 'foo', limit: 10});

   expect(url).toBe("/search/foo/10");

}

it('should interpolate a route with optional parameter excluded', function(){

   var searchRoute = "/search/:query/:limit?";

   var url = $route.interpolate(searchRoute, {query: 'foo'});

   expect(url).toBe("/search/foo");

}

Cheers,

Marc Fallows

ma...@marcfallows.com

--
You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/bEX5Ateee98/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.

[Sander Elias]

Hi Marc,

You can build an url using plain javascript, no need for angular to provide sugar over that.

Regards

Sander

[Marc Fallows]

Hi Sander,

I could also write my own forEach and isUndefined in plain javascript. But since AngularJS already does this they expose it through an API, and I don't have to write it.

Given the test I mentioned slightly modified below, how would I use the URLUtils inside the someFunction method to pass? It doesn't seem to have any concept of route style parameters.

it('should interpolate a route with optional parameter excluded', function(){

   var searchRoute = "/search/:query/:limit?";

   var url = someFunction(searchRoute, {query: 'foo'});

   expect(url).toBe("/search/foo");

}

AngularJS's ngRoute does this work already (https://github.com/angular/angular.js/blob/master/src/ngRoute/route.js#L631). I was wondering if I could save myself writing the parser and interpolator and the unit tests since they already have a working implementation covering all the edge cases.

I want to pass one of the paths that I original passed to $routeProvider.when(path, {...}) along with an object of parameters and get a resulting URL which I could set in $location.path().

I have no problems on how to write the plain javascript to parse everything the same way AngularJS does. But I was wondering if AngularJS exposed that in any way, so I could just use theirs (and get test coverage, edge cases and future improvements along with it for free).

Cheers,

Marc Fallows

ma...@marcfallows.com

--

[Sander Elias]

Hi Marc,

I could also write my own forEach and isUndefined in plain javascript. But since AngularJS already does this they expose it through an API, and I don't have to write it.

The core team has on a number of occasions  put out, that they where unhappy with this decision. They do regret putting those utility functions in the core.
and for that matter you don't need to program your own forEach, it's available in ES5. As goes for quite some other utility functions.

 

I want to pass one of the paths that I original passed to $routeProvider.when(path, {...}) along with an object of parameters and get a resulting URL which I could set in $location.path().

 

Well, If you really want something like this in AngualrJS, file issue on github. If you accompany it with an Pull Request, with fully tested code, there is a fair change

it will get included in one of the next 1.3.x versions.

Regards

Sander

[Marc Fallows]

My next step is filing an issue on github to see if this is something they would consider.

My first step was posting here to ensure that there wasn't an existing way to do this. I thought I missed it in the AngularJS ngRoute documentation. 

The thread keeps diverging from the original question of if the interpolation is exposed in ngRoute. I'm going to assume "no" and I'll look to continue this on github.

Thanks,

Marc Fallows

ma...@marcfallows.com

--

[Kevin Shay]

Hi Marc,

Agreed that this would be useful, and it's something we've had to implement ourselves in a couple of places in our app. The thing is that Angular itself never really does this particular operation of plugging a set of params into a known route string. What it does is compare the URL you're trying to load against a regular expression it's compiled for each registered route, and if there's a match, pulls out the params from the match based on the keys (wildcards) from the original route string. You can see this if you look at $route.routes['/path/:to/:route?'].regexp and .keys.

There is some (non-exposed) interpolation code specifically for redirects, but it doesn't handle the full route syntax with ? and *.

Kevin

--

You received this message because you are subscribed to the Google Groups "AngularJS" group.

To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.