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

问题

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

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

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)
        ];
      }

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

 <link rel="stylesheet" href="styles/main.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

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?

回答1:

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}}" />'
        }
      }
    }
  }

来源：https://stackoverflow.com/questions/28955762/css-file-paths-are-not-resolving-properly-with-angular-ng-view

标签

angularjs

node.js

routing

grunt-wiredep