How to use routing params with local pages?

[nvahalik]

How can one use the routing system with local hashes and also get a populated $routeParams? I've got all of my markup in one page and I'm trying to use route params to pass params to sub-pages:

I've tried a variety of link formats:

#my-pages-hash/2
#!my-pages-hash/2
#/my-pages-hash/2
#!/my-pages-hash/2

But nothing seems to work. I'm never getting a page to load properly.

[tbosch]

Hi, well for this the standard routing does not work any more, so you have to define you own routes, with templateUrls using hashes.

Tobias

[tbosch]

Could you provide a jsfiddle, then I can modify it an make it working?

[nvahalik]

Absolutely:

http://jsfiddle.net/nvahalik/Fz3a3/1/

[nvahalik]

Okay, so after looking once more at a couple of the demos that have been set up, it seems as though part of my issue is related to the base of the page. When I click on the link on my local demo file (fiddle.html -- browsing to http://localhost:8000/fiddle.html), and I click on a link like I have in the jsFiddle above, it would take me to:

http://localhost:8000/hello/Tobias

So, part of my ignorance at this point is how to make sure that the URLs that get generated are going to be reusable. Right now if I click on the link, it connects me to the correct page, but it doesn't work if I simply refresh based on that URL.

I have gotten the jsFiddle to work now, but I was still having some problems getting my route variables to apply. I made something work: http://jsfiddle.net/nvahalik/Fz3a3/ The question is -- is my approach correct? I'm using onActivate to pass in variables manually from a function using $route.current.params.

[tbosch]

Hi, yes, using onActivate is the right way to go, as we are not recreating the controllers when pages are changed (see the Readme.md), which is in contrast as how plain angular uses routing.

You could do it a little bit shorter like so: http://jsfiddle.net/Fz3a3/6/ Just call a function in the controller without parameters, which accesses the $routeParams directly.

However, it would be a nice extension if we could just access the properties of $routeParams in the onActivate expression of a route just like the properties of the resolve part of the route. With that extension in place, your example could look even easier:

$routeProvider.when('/hello/:name', {
  templateUrl: '#hello',
  onActivate: 'setName(name)'
})

I will created a new issue for this enhancement.

Do you have any further problems? Otherwise I would close this issue.

Tobias

[nvahalik]

No other issues with this. Thanks for your help Tobias!