Angular Js Unexpected Token error Dynamic Routes答案

【问题标题】：Angular Js Unexpected Token error Dynamic RoutesAngular Js Unexpected Token error Dynamic Routes
【发布时间】：2013-02-06 00:17:30
【问题描述】：

当我尝试创建动态路由时，我收到了几个“意外令牌

.when('/user',{
    templateUrl: 'views/user/new', 
    controller: "addUserCtrl"
  })

请求到达服务器并被我的 express 捕获所有路由处理程序捕获，然后 angular 启动并请求 express 的 api 路由、api/用户、绑定数据、控制器和模板，我看到了一个不错的页面。一切正常。没有错误。

如果我尝试创建动态路由或更深度的路由，当我尝试请求该路由时会收到意外的令牌错误：

.when('/user/:id',{
    templateUrl: 'views/user/new', 
    controller: "addUserCtrl"
  })

例如，当我请求 /user/3 时，我收到错误，并且 addUserCtrl 永远不会被调用。任何可能导致这种情况的想法。

.when('/user/show,{
    templateUrl: 'views/user/new', 
    controller: "addUserCtrl"
  })

请求 /user/show 也会抛出错误。在控制台中，错误显示在我在索引正文中加载的所有角度文件（angular.js、App.js、services.js、controllers.js、filters.js、directives.js）的请求旁边.html。

我注意到，每当我在路由中添加多个斜杠时，就会出现这个问题。如果我尝试 /user/show，我可以看到以下请求：

   /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

如果我尝试 /abc/def，我将收到以下请求：

   /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

【问题讨论】：

可能是因为 /user/show 和 /user/:id 冲突？尝试摆脱一个。
不幸的是，这不是问题，因为我实际上是用 /user/show 替换 /user/:id。我删除了所有路线，只有一条。其实我把所有的路由都去掉了，还是得到了语法错误unexpected toekn error，这样比较混乱。如果我尝试 /abc/def 之类的东西，它会给我错误。当我在路径中输入两个或多个斜杠时，我会收到错误消息。

标签： node.js express angularjs

【解决方案1】：

我遇到了同样的问题，正如 atentaten 描述的那样，问题是由 js 文件的相对路径引起的。但是，它与 Express 无关。它也可能是由 html 文件头部中脚本标记的相对包含路径引起的。因此，为了澄清，我将我的 HTML 更改为：

<script src="bower_components/angular/angular.js"></script>

到：

<script src="/bower_components/angular/angular.js"></script>

【讨论】：

【解决方案2】：

显然这不是一个真正的角度问题，而是一个明确的问题。

问题是我的 index.jade 中包含的角度 js 中缺少开头的斜杠：

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')

我把它们改成了这样：

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')

错误消失了。虽然加载的 js 没有开始斜线，但它仍然导致 express 出现问题，创建语法错误，这可能会破坏 angular，但我不确定具体原因。

【讨论】：

【解决方案3】：

templateUrl 必须是绝对的，否则如果 url 中有多个斜杠/深度级别，Express 会阻塞：

.when('/user/show,{
  templateUrl: '/views/user/new', /* add slash */
  controller: "addUserCtrl"
})

【讨论】：

【解决方案4】：

AngularJS 应用程序中的 ui-router 动态路由会发生这种情况。我有同样的错误。通过改变路径解决

<script src="app/components/services/campaign.services.js"></script>

到

<script src="/app/components/services/campaign.services.js"></script>

但在我的情况下 index.html 文件路径是由 gulp 任务生成的 gulp-inject 所以我改变了 gulp-inject 的配置

inject: { addRootSlash: true }

它对我有用:)

【讨论】：