I'm getting getting several "unexpected token <" errors when I try to create a dynamic route. Normal routes work fine. So if I set the following route:
.when('/user',{
templateUrl: 'views/user/new',
controller: "addUserCtrl"
})
The request goes to the server and gets caught by my express catch all route handler, then angular kicks in and requests express' api route, api/user, binds data, controller and template and I see a nice page. Everything works fine. No errors.
If I try to create a dynamic route or a route with more depth, I get the unexpected token error, when I try to request that route:
.when('/user/:id',{
templateUrl: 'views/user/new',
controller: "addUserCtrl"
})
For example, when I request /user/3, i get the error, and it the addUserCtrl is never called. Any ideas what could be causing this.
.when('/user/show,{
templateUrl: 'views/user/new',
controller: "addUserCtrl"
})
requesting /user/show will also throw the error. In the console the error shows up next to the request for all of angular files (angular.js, App.js, services.js, controllers.js, filters.js, directives.js) that I load in the body of my index.html.
I've noticed that this problem happens whenever I add more than one slash to the route. If I try /user/show, I can see the following requests:
/user/show
syntax errors for the below:
/user/js/App.js
/user/js/lib/angular/angular.js
/user/js/filters.js
/user/js/controllers.js'
/user/js/services.js
/user/js/directives.js
If I try /abc/def, I will get the following request:
/abc/def
syntax errors for the below:
/abc/js/App.js
/abc/js/lib/angular/angular.js
/abc/js/filters.js
/abc/js/controllers.js'
/abc/js/services.js
/abc/js/directives.js
I had the same issue and just as atentaten describes the problem was caused by relative paths to js-files. However, it has nothing to do with Express. It can just as well be caused by relative include paths from script tags in the head of a html file. So, to clarify, I changed my HTML from:
<script src="bower_components/angular/angular.js"></script>
to:
<script src="/bower_components/angular/angular.js"></script>
Apparently this is not really an angular issue, but an express issue.
The problem was that the beginning slashes were missing from my angular js includes in my index.jade:
script(src='js/lib/angular/angular.js')
script(src='js/App.js')
script(src='js/services.js')
script(src='js/controllers.js')
script(src='js/filters.js')
script(src='js/directives.js')
I changed them to this:
script(src='/js/lib/angular/angular.js')
script(src='/js/App.js')
script(src='/js/services.js')
script(src='/js/controllers.js')
script(src='/js/filters.js')
script(src='/js/directives.js')
And the errors went away. Although the js loaded without the starting slash, it was still causing a problem with express, creating the syntax error, which probably broke angular, but I'm not sure exactly why.
The templateUrl needs to be absolute else Express will choke if there is more than one slash/level of depth in the url:
.when('/user/show,{
templateUrl: '/views/user/new', /* add slash */
controller: "addUserCtrl"
})