1

I think I have a fundamental misunderstanding about the way angular intercepts my routes in a single-page application.

My problem, I think, is pretty simple. When I enter the url: 

localhost:3000/streams/

I would like to load the 'streams' page. The way I thought it works is as follows:

  1. My express server receives the request, and answers with a layout.

    app.get('/streams/',function(req,res){
 res.render('layout');
})
  2. My layout page is rendered. It calls a client app.js and has ng-view.

  3. Angular intercepts the '/streams/' path, and then makes a call for the 'streams' template. Like this:

     $routeProvider
  .when('/',
   {
    templateUrl: '/templates/mainpage'
   }
  )
  .when('/streams/',
   {
    templateUrl: '/templates/streams'
   }
  )

For some reason, reality is very very different.

When I load '/streams', angular retrieves /templates/streams, and

when I load '/streams/, angular retrieves /templates/mainpage.

Why?

This misunderstanding has been trolling me for days now...

Any help will be rewarded with 5 quanta of good energy.

Thanks.

Adam
  • 482
  • 4
  • 15
  • 1
    It's because /streams/ doesn't match any of your defined routes, and you have no default set. It probably just grabs the first .when() defined which is /templates/mainpage. – Zack Argyle Nov 26 '13 at 23:15
  • Thanks. What I don't understand, @ZackArgyle is why /streams/ doesn't match my defined routes. Isn't it taken care of by the second .when() statement? – Adam Nov 26 '13 at 23:23
  • Yeah, that is a "feature" of angular. Check out this question [Stack Overflow](http://stackoverflow.com/questions/14533117/angular-trailing-slash-for-resource) – Zack Argyle Nov 26 '13 at 23:26
  • I think I understand. So basically my best bet would be to try to use $http calls inside my .when() statements and not rely on angular's $resource? – Adam Nov 26 '13 at 23:40
  • It looks like you should try escaping the last it like this, '/streams\\/' or adding a space at the end like this '/streams/ '. I haven't tried them but its worth trying before resorting to $http for everything – Zack Argyle Nov 27 '13 at 02:00

1 Answers1

0

It turns out that the real issue was a little different.

It's not, as was described, that Angular didn't know that I'm referring to 'streams', when I load 'streams/', it's that html had a relative base.

Basically, this relative base made it seem as though I have already found a template, namely, '/streams', and am now retrieving another one, namely, '/'. This issue can be simply resolved by adding the root base in your html.

 <base href="/">

This should do it.

Adam
  • 482
  • 4
  • 15