Express.js and AngularJS routing parameters

[Michael Pateras]

I'm trying to set up some routes with parameters in an AngularJS app backed by a node.js server using express. Node is set up to route everything that isn't explicitely found to a catch all:

app.use(express.bodyParser());
app.use(app.router);
app.use(express.static(__dirname + "/public"));
app.use(function(request, response)
{
    console.log("catch all");
    writeFile("/public/index.htm", request, response);
});

And Angular has routes defined with 0-2 parameters:

$routeProvider
.when("/",
{
    templateUrl: "home.htm"
})
.when("/otherpage",
{
    templateUrl: "otherpage.htm"
})  
.when("/otherpage/:Var1",
{
    templateUrl: "otherpage.htm"
})  
.when("/otherpage/:Var1/:Var2",
{
    templateUrl: "otherpage.htm"
})
.otherwise(
{
    templateUrl: "home.htm"
});

$locationProvider.html5Mode(true);

/otherpage works, but while /otherpage/123 hits the catch all (I can see the console message), it crashes in the browser. Nothing is rendered and then Chrome says that it has a problem (and IE renders nothing just sits there).

I can understand the parameter not being passed, but why isn't the route at least happening without it? What do I need to do to set up URL parameters with express.js and AngularJS?

You can download the project here, if you want to examine it.

Thanks in advance.

[Jeremy]

It has to do with the relative urls. Once you are on localhost:3100/otherpage/1234, the base url is localhost:3100/otherpage, so it tries to ask for a static file at localhost:3100/otherpage/otherpage.htm. Since you have relative url paths, the current url base is prepended to the request. If you have an absolute path, this doesn't occur.

In your route definitions, you should put in the templateUrls a preceding / like: templateUrl: '/otherpage.htm' 

This tells node to start from the root to find the file, instead of from a relative folder location that doesn't exist.

[Michael Pateras]

That works perfectly. Thank you!

--
You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/9ut1Ckc6xpU/unsubscribe?hl=en-US.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular?hl=en-US.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[Henry Tao]

Hi Michael Pateras!

In your example, what's happen if you refresh the page at http://127.0.0.1:3000/otherpage/page1?

In my case, it didn't load content of page 1. It loaded the home page (127.0.0.1:3000) and the url change to http://127.0.0.1:3000/otherpage?

I can not figure out what's the problem? 

Very appreciate any help!

Note: I used absolute path in templateUrl (http://127.0.0.1:3000/path/otherpage.html for example).

[Michael Pateras]

Sorry, I don't have access to that project anymore. Good luck!

--

You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.

To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/9ut1Ckc6xpU/unsubscribe.

To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.

Visit this group at http://groups.google.com/group/angular.

[Adam Ulicki]

Hi, I'm having this same problem right now. Have you maybe figured out how to handle it?