0

我有一个带有 ng-view 的角度应用程序设置。我有 1 层和 2 层深的路线，例如：

  .when('/sample', {
    templateUrl: 'views/sample.html',
    controller: 'SampleCtrl'
  })
  .when('/sample/:id', {
    templateUrl: 'views/sample.html',
    controller: 'SampleCtrl'
  })

我正在使用 html5 模式删除 scotch 路由，因此我的路由呈现为“localhost:9000/sample”而不是“localhost:9000#/sample”

我还使用节点 modrewrite 服务器来启用 html5 模式，因此我可以使用 connect-modrewrite npm 模块和以下 grunt 配置接受指向我的 url 中的深层链接的直接链接（例如 localhost:9000/sample/id） ：

      middleware: function (connect) {
        return [
          modRewrite(['^[^\\.]*$ /index.html [L]']),
          connect.static('.tmp'),
          connect().use(
            '/bower_components',
            connect.static('./bower_components')
          ),
          connect.static(appConfig.app)
        ];
      }

我在标题中定义了 css 文件，例如：

 <link rel="stylesheet" href="styles/main.css">

在我的应用程序中路由时，这工作正常。当我接受一级深度的直接链接时，它也可以工作，因此直接导航到“localhost:9000/sample”将呈现一个页面。但是，当我使用直接链接到 2 级深度的路径时，例如“localhost:9000/sample/id”，我的应用程序将无法正确呈现我的 css，并且我会看到如下控制台错误：

GET http://localhost:5309/snippet/styles/main.css

解决我的 javascript 依赖项没有问题，它们使用相同类型的相对路径，只是 css 的。我可以通过在样式（href="/styles/main.css"）前面加一个斜杠来解决这个问题，但我不想这样做，因为它会限制我的应用程序的部署方式，而且它也是不是wiredep默认安装css bower依赖项的方式。是否有一些 angular-ng-view 友好的方式来确保我的 css 文件路径可以正确解析，而不管我在哪条路线上？

4

1 回答 1

0

我从来没有得到这个答案，所以我用斜杠为我的 css 文件添加前缀，它工作正常。如果其他人遇到这个问题并需要它，这是我对 Gruntfilewiredep 命令所做的修改，使其在我的 css 导入前加上斜杠

  wiredep: {
   app: {
    fileTypes: {
      html: {
        replace: {
          css: '<link rel="stylesheet" href="/{{filePath}}" />'
        }
      }
    }
  }
于 2015-03-26T12:13:43.193 回答