CSS 文件路径未正确解析 angular ng-view

Question

我有一个 angular 应用程序设置 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 模式，这样我就可以在我的 url 中接受直接 links 到深度 link（对于例如 localhost:9000/sample/id)，使用 connect-modrewrite npm 模块和以下 grunt 配置：

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

我的 header 中定义了 css 个文件，例如：

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

在我的应用程序中路由时，这工作正常。当我接受一层深度的直接 link 时它也有效，因此直接导航到 "localhost:9000/sample" 将呈现一个页面。但是，当我使用直接 link 到 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 文件路径可以正确解析，无论我在什么路径？

Answer 1

我从来没有得到这方面的答案，所以我采用了在我的 css 文件前加上斜杠的方法，并且效果很好。如果其他人遇到这个问题并需要它，这是我对我的 Gruntfile wiredep 命令所做的修改，使其在我的 css 导入前加上斜杠

  wiredep: {
   app: {
    fileTypes: {
      html: {
        replace: {
          css: '<link rel="stylesheet" href="/{{filePath}}" />'
        }
      }
    }
  }

CSS 文件路径未正确解析 angular ng-view

CSS file paths are not resolving properly with angular ng-view

routing

node.js

angularjs

grunt-wiredep