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 986 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.

$routeParams

2:14 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.

John continues to dive into routing in AngularJS using ng-view. He provides some simple examples for passing in path parameters using $routeParams.

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

John continues to dive into routing in AngularJS using ng-view. He provides some simple examples for passing in path parameters using $routeParams.

Avatar
John Forethinker

How are you hosting your application? I am using gulp and when I try pass in the parameter like this:

http://192.168.56.101:4000/routeParams.html/#/map/Country/State/What

I get
'Cannot GET /routeParams.html/'

Change the route to contain the static html file name does not help either.
'routeParams.html/map/:country/:state/:city

Avatar
Arman

Hi,

I tried this code but it is not working... There seems to be a problem when defining and binding to the view "this.main.model"...

John Lindquist: Let's quickly talk about $routeParams and how you use them. If I do a colon here and type something like message, I can inject something here called $routeParams into my controller. Now I can simply say that our message is $routeParams.message. That's going to parse this out of the URL, pass it along as a parameter and the route, and then I can just look it up by that key of message.

If I refresh now, it's going to give me nothing because there is no message here. If I say something like, "Hello," it'll render out hello. If I say something like, "Bonjour," it'll render that out, simply because I'm grabbing a message off of the $routeParams object.

Now, this isn't the typical scenario. What you'd usually have is something like, we'll say this is our map and then you'd have like a country/state/city. Then you can simply have like a map page. Let's build out our new message and we'll have it be an address. We'll say our address is $routeParams country plus comma, let's do it this way. Country, state and city.

Then all we have to do is...see if we refresh here, we got nothing because we need to build out our URL like, this is our map and the USA, my state is Utah and I live in Orem. Please don't come and stalk me. It has address of USA, Utah, Orem, because it took these out of the URL and just simply provided them as route parameters. I can look them up this way.

That's route parameters. We'll see different ways of looking at them as we get into new things like redirect to...

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