CSS文件路径无法使用角度ng-view正确解析 [英] CSS file paths are not resolving properly with angular ng-view

问题描述

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

I have an angular app setup with ng-view. I have routes that are both 1 and 2 levels deep, such as:

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

我正在使用html5模式删除苏格兰式路由，因此我的路由呈现为 localhost：9000 / sample而不是 localhost：9000＃/ sample

I am using html5 mode to remove the scotch routing, so my routes render as "localhost:9000/sample" instead of "localhost:9000#/sample"

I我也正在使用节点modrewrite服务器启用html5模式，因此我可以使用connect-modrewrite npm模块和以下grunt config接受指向URL中深链接的直接链接（例如localhost：9000 / sample / id）：

I also am using a node modrewrite server to enable the html5 mode so I can accept direct links to a deep link in my url (for example localhost:9000/sample/id), using the connect-modrewrite npm module and the following grunt config:

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

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

I have css files defined in my header, for example:

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

在我的应用内进行路由时，此方法工作正常。当我接受一个深层次的直接链接时，它也起作用，因此直接导航到 localhost：9000 / sample将使页面正常。但是，当我使用直接链接到2级深度的路径（例如 localhost：9000 / sample / id）时，我的应用程序将无法正确呈现CSS，并且会出现类似以下控制台错误：

This is working fine when routing within my app. It also works when I accept direct links that are one level deep, so navigating directly to "localhost:9000/sample" will render a page fine. However, when I use a direct link to a path that is 2 levels deep, for example "localhost:9000/sample/id", my app will not render my css properly and I will see console errors like:

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

解析我的javascript依赖关系没有问题，这些依赖关系使用相同类型的相对路径，仅使用CSS相对路径。我可以通过在样式（href = / styles / main.css）前面加一个斜杠来解决此问题，但我不希望这样做，因为这会限制我的应用程序的部署方式，而且不是默认情况下wiredep安装css bower依赖项的方式。是否有一些angular-ng-view友好的方法可以确保无论我走哪条路线，我的css文件路径都能正确解析？

There is no problem resolving my javascript dependencies, which use the same type of relative paths, just the css ones. I can fix this by putting a slash in front of the style (href="/styles/main.css"), but i would prefer to not do that, as it will limit how my app can be deployed, and also it is not the way that wiredep installs css bower dependencies by default. Is there some angular-ng-view friendly way of making sure that my css file paths can resolve properly, regardless of what route i'm at?

推荐答案

我对此没有任何答案，所以我选择了用斜杠为css文件添加前缀的方法，并且效果很好。如果还有其他人遇到此问题并需要它，这是我对Gruntfilewiredep命令所做的修改，以使其在我的CSS导入之前带有斜杠

I never got an answer on this so I went the route of prefixing my css files with slashes and it worked fine. If anyone else runs into this question and needs it, this is the modification I made to my Gruntfile wiredep command to make it prefix my css imports with slashes

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

这篇关于CSS文件路径无法使用角度ng-view正确解析的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！