After my demonstration yesterday, that the redirectTo operation in AngularJS routing wouldn't break the back button, I wanted to dig into redirectTo a bit more. It's easy to redirect to a static string; but, what about redirecting to a dynamic path? As it turns out, AngularJS supports this implicitly. When you redirectTo another path, the route parameters are automatically passed-through (and interpolated into) the target route.
To see this in action, I've created a demo in which we have three different route redirect configurations:
- /users/:userID ==> /users/:userID/detail
- /users/:userID/:notFound* ==> /users/:userID
- otherwise ==> /home
The last one - otherwise - we've seen before. It's just a catch-all for missing routes that redirects to the homepage. But, the first two are new. Notice that both the target routes contain named parameters (:userID). This parameter is automatically passed-through from the matching route (ex, /users/1) to the target, redirectTo route (ex, /users/1/detail).
The second redirect contains an eager parameter match. Normally, a parameter would only match up until the next "/" character; however, by appending a "*" to the parameter name, it makes it eager which means that it will match as much of that path as it can, including any "/" characters. This allows us to create a route that "partially matches" the current location path. This can be super useful if you need to handle old links that may no longer be valid but may still be "in the wild".
When I open this page and click through the links, I'm redirected from one route to another. And, as I do this, the current :userID value is automatically piped into the redirecting route. You can see this in the console logging:
This is such a great feature. Once again, I'm super impressed with the way the AngularJS team has crafted their code. With the route parameters being automatically passed-through to the target, redirectTo route, it should make redirecting super simple and intuitive.
Want to use code from this post? Check out the license.
This presents a problem (or at least it does not help) in the following situation:
(article is a subroute of education)
templateUrl : 'pages/education.html',
controller : 'eduController'
When i go to this url /education/myarticle, i make an AJAX call to a processing page that pulls from the DB a page with that title. If no suck page is found it returns an error object.
I then check the object i get and if it's an error object, i want to make a redirect back to the "education" page with a parameter that lets me know i found nothing at the subroute.
In your example, the status codes returned would be 200, right? What if I you want to have the browser return a 301 status code on the first page for SEO purposes, before it redirects to the new permanent address.
I have a route (.when('/:routeparam1/:routeparam2/:routeparam3' which I want redirect to /:routeparam1/:routeparam2. I have the redirect set up but we want to redirect current pages to the new URLs with 301 permanent redirects (as opposed to 302 temporary redirects). Does anyone know how this can be achieved? The site uses $routeProvider and is on IIS.
Here's my boiled down redirect code from the app config (there are query parameters possibly also sent but I've removed that code here):
redirectTo: function(routeParams, path, search)
return "/" + routeParams.routeparam1 + "/" + routeParams.routeparam2;
I have a problem-
I am working on an application where by clicking on a link i have to redirect it to a specific tab on another page. Can you please help? I am using simple ngrouting for this no state routing.
If this link always opens a specific tab, could you pass the hard-coded tabname on the ng-click to the controller function? I'm sure there are better ways, but just one suggestion: