Пути к файлам CSS не разрешаются должным образом с угловым ng-view

У меня есть угловая настройка приложения с ng-view. У меня есть маршруты, которые имеют глубину 1 и 2 уровня, например:

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

Я использую режим html5 для удаления шотландской маршрутизации, поэтому мои маршруты отображаются как «localhost: 9000/sample» вместо «localhost: 9000#/sample».

Я также использую сервер node modrewrite для включения режима html5, чтобы я мог принимать прямые ссылки на глубокую ссылку в моем URL-адресе (например, localhost: 9000/sample/id), используя модуль npm connect-modrewrite и следующую конфигурацию 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 могут правильно разрешаться, независимо от того, на каком маршруте я нахожусь?


node.js angularjs routing grunt-wiredep
person infomofo    schedule 10.03.2015    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я так и не получил ответа на этот вопрос, поэтому я пошел по пути префикса моих файлов css с косой чертой, и это сработало нормально. Если кто-то еще сталкивается с этим вопросом и нуждается в нем, это модификация, которую я внес в свою команду Gruntfile wiredep, чтобы сделать ее префиксом моего импорта css с косой чертой.

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