角度 ng-view 无法正确解析 CSS 文件路径答案

【问题标题】：CSS file paths are not resolving properly with angular ng-view角度 ng-view 无法正确解析 CSS 文件路径
【发布时间】：2015-05-11 10:06:34
【问题描述】：

我有一个带有 ng-view 的 Angular 应用程序设置。我有 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 配置：

      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 文件路径可以正确解析，而不管我在什么路线？

【问题讨论】：

标签： angularjs node.js routing grunt-wiredep

【解决方案1】：

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

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

【讨论】：