Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 959 of the free egghead.io lessons, plus get Angular 1.x content delivered directly to your inbox!



Existing egghead members will not see this. Sign in.

redirectTo

3:45 Angular 1.x lesson by

AngularJS 1.2.x Routing Changes: ngRoute

In AngularJS 1.2.x routing has changed. It is now required that you explicitly import ngRoute in your applications! This lesson uses an older version of AngularJS that pre-dates this change.

Load the ngRoute library
<script src="angular.js">
<script src="angular-route.js">
Import the ngRoute module
angular.module('app', ['ngRoute']);

Scroll down to view the full corrected code for this lesson.

In AngularJS redirectTo is often assigned a simple static string and thus points invariably to one location (redirectTo: '/mypath'). You can customize this, by setting redirectTo as a function, which arguments are the route params. For instance, if you hit the route "/pizza/peperoni", you can compose your redirection to be "/pizzas", or whatever suits your needs

Get the Code Now
click to level up

AngularJS 1.2.x Routing Changes: ngRoute

In AngularJS 1.2.x routing has changed. It is now required that you explicitly import ngRoute in your applications! This lesson uses an older version of AngularJS that pre-dates this change.

Load the ngRoute library
<script src="angular.js">
<script src="angular-route.js">
Import the ngRoute module
angular.module('app', ['ngRoute']);

Scroll down to view the full corrected code for this lesson.

egghead.io comment guidelines

Avatar
egghead.io

In AngularJS redirectTo is often assigned a simple static string and thus points invariably to one location (redirectTo: '/mypath'). You can customize this, by setting redirectTo as a function, which arguments are the route params. For instance, if you hit the route "/pizza/peperoni", you can compose your redirection to be "/pizzas", or whatever suits your needs

John Lindquist: The most common scenario for using redirectTo is to, when someone types a URL that doesn't make any sense, just redirect them to home, so "/," or some error page, or whatever you want. Let's type in "/foo," you get back home. If I type in "/anything," we'll get back home.

Basically, anything that doesn't match. So "/pizza" should still match. But anything else will just send you back home.

The other thing you can do, which you don't see used as much, is you can actually pass a function and return the path you want it to be sent to. Now, if I type in "/pizza," it will send it back home, because we have a function that's telling it to go home.

What we can do with this function is actually take in a few of the parameters that are passed in, and get this info. So, "routeParams," and then the second one is the "path," and the third one is called "search." We can get some routeParams off of here; we can say "crust" and "toppings." And from there on out, if we just log out, console.log() routeParams, and path, and search.

If I refresh this and type in "/pizza," and then crust, we'll say "/deep," and then toppings, we'll do "/pepperoni." Hit enter. You can see that we get crust of "deep," toppings of "pepperoni," we get the path, and this last search object is when you do something like "/pizza," and then we'll add our search object to "deliver" using "now."

You can see, you can take that information, and then use it to form a new URL, somewhere else to send them to. Say, if someone typed in a bad pizza URL that you didn't quite handle, you could say, "Well, I want to send them to the crust page." Say, routeParams.crust of, say when crust is "deep," we want to display "Deep dish" as the template.

If we pass in that URL again, "/pizza," because I passed in "/pizza/deep/pepperoni," and that search term and everything, I was able to grab "deep" off of the routeParams and then send it back to a different route, here defined as "deep," and then render out another template.

This redirectTo, when you pass in a function, allows you to handle however you want to handle these different routeParams and path and search. You can combine it to make whatever URL you want, and redirect them to something that makes sense, instead of just using it as a string, which always just sends them to a particular URL.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?