$routeParams

John Lindquist
InstructorJohn Lindquist
Share this video with your friends

Social Share Links

Send Tweet
Published 11 years ago
Updated 5 years ago

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

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

John Forethinker
John Forethinker
~ 9 years ago

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

Arman
Arman
~ 9 years ago

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

Markdown supported.
Become a member to join the discussionEnroll Today