Где разместить CSS в партиалах AngularJS?

Я знаю, что хорошей практикой является хранение кода CSS во внешнем файле .css вместо добавления тегов в код HTML. Но как насчет кода CSS, который действителен только для одного углового частичного HTML?

Спасибо за совет.


css angularjs partials
person Jorgito Gutierrez    schedule 15.07.2014    source источник
comment
Пожалуйста, не торопитесь, чтобы просмотреть ответы и выбрать правильный.   -  person domokun    schedule 21.07.2014

Ответы (2)


arrow_upward
2
arrow_downward

Рекомендуется всегда помещать файлы CSS в специальный [fileName].css.

Если вы хотите, чтобы некоторый CSS применялся только к некоторой части кода (поскольку он всегда использует CSS), вы указываете специальные правила.

Очень простой пример (2 части, 1 таблица стилей)

первый:

<div id="partial1">
  <h1>I'm the first</h1>
</div>

второй:

<div id="partial2">
  <h1>I'm the second</h1>
</div>

таблица стилей:

// Common rule to both the <h1>
h1 {
  font-size: 64px;
}

// only for partial1
#partial1 h1 {
  color: #C0C0C0;
}

//only for partial2
#partial2 h1 {
  color: #FF0000;
}

Изменить:

Вы также можете использовать SASS и иметь разные файлы для каждой части (например, _partial1.scss и _partial2.scss), которая включается в ваш main.scss, примерно так:

@import "partial1",
        "partial2";

Подробнее о SASS см. Здесь: http://sass-lang.com/guide

person domokun    schedule 15.07.2014
comment
But what about css code that is only valid for a single angular partial html? Для этого используются идентификаторы и классы, и именно так предполагается использовать CSS. Вы также можете встроить CSS для этого фрагмента, но это будет отстой. - person domokun; 15.07.2014
comment
@ SW4 Я посоветовал ему делать то, что я считаю лучшим, а затем дал ему ответ, чтобы добиться того, о чем он просил, с помощью Angular. - person enguerranws; 15.07.2014
comment
@domokun Я полностью согласен с вашим решением, я этим занимаюсь каждый день. Но я не уверен, что это то, о чем он просил. Он спрашивает, есть ли способ загрузить только соответствующий CSS для каждой части Angular. Здесь вы загружаете все, даже если это не будет интерпретироваться. - person enguerranws; 15.07.2014
comment
@enguerranws ​​Я чувствую, что дал ему наилучший возможный ответ в соответствии с действующими передовыми методами. Новички часто хотят делать то, что они считают правильным, и я ничем не отличался. Но я думаю, что если мы действительно хотим им помочь (а в этом и должен заключаться весь смысл Stack Overflow), мы обязаны указать на их ошибки, а также указать им правильное направление. - person domokun; 15.07.2014
comment
Что ж, я с тобой согласен. Но он может быть не новичком и действительно хочет загружать только соответствующий CSS для каждой части. - person enguerranws; 15.07.2014
comment
Спасибо за все комментарии. (К вашему сведению, я не новичок). Мой вопрос практический: если код css не используется повторно, зачем его где-то еще? Конечно, у меня могут быть и mypartial1.html, и mypartial1.css .... но нужно ли это? Например, я могу использовать ‹style scoped› в html. - person Jorgito Gutierrez; 15.07.2014
comment
Я не понимаю вашей точки зрения ... Я бы понял ленивую попытку загрузки, но для меня это просто не имеет смысла. Независимо от того, сколько раз вы используете этот CSS, ваш браузер загрузит его один раз, а затем предоставит кэшированную копию всякий раз, когда это необходимо. Если вы используете встроенную таблицу стилей, вы пожалеете об этом, когда в первый раз что-то не так со стилем. - person domokun; 16.07.2014

arrow_upward
1
arrow_downward

Я настоятельно рекомендую поместить его во внешний файл CSS. Если стили, которые используются только для одной страницы, не слишком тяжелы, просто поместите их в свой основной файл CSS.

Помните, что другой файл сделает еще один запрос к серверу.

Если вы все еще хотите добавить еще один файл CSS с помощью Angular, вы должны сделать это с помощью $ rootScope:

$rootScope.$on('$routeChangeSuccess', function(ev,data) {   

  $rootScope.routeName = data.$$route.originalPath;

});

Затем в вашем файле макета:

<link ng-if="routeName === 'myPartial' " href="css/myPartial.css" rel="stylesheet" type="text/css" />

Некоторые документы об AngularJS rootScope: https://docs.angularjs.org/api/ng/service/$rootScope

person enguerranws    schedule 15.07.2014