Должна ли система AngularJS размещаться в HTML файле?

Я хочу, чтобы код рефакторинга я опубликовал ниже. Я очень новичок в AngularJS. Теперь, когда я увидел код, мне было очень любопытно всю логику, помещенную в код HTML.

<p ng-show="countForm.count.$dirty && countForm.count.$error.min" class="error-message">

<button ng-click="step(2)" ng-show="data.step == 1 && countForm.count.$dirty" ng-disabled="countForm.$invalid" class="line-break">

<div ng-class="{selected: data.spreadChoice == 3}" ng-click="data.spreadChoice = 3; step(3)" ng-mouseover="data.preSpreadChoice = 3" ng-mouseout="data.preSpreadChoice = data.spreadChoice">

<div ng-show="data.step >= 2" class="step" ng-class="{active: data.step == 3, done: data.step > 3, left: data.preSpreadChoice == 1, right: data.preSpreadChoice == 3}" ng-scroll-here="data.step == 3">

<p ng-switch-when="false" class="large">[[data.emails.length]] von [[data.count]] – <span class="red">[[Math.max(0,data.count-data.emails.length)]]</span> Members</p>

<div ng-show="data.step >= 5 && data.multipleTeams"  class="step" ng-class="{done: data.step > 5, active: data.step == 5}" ng-scroll-here="data.step == 5">

<button class="small" ng-disabled="!unitsForm.$dirty || unitsForm.$invalid" ng-click="addUnit(data.nextTeam, data.nextTeamleaderEmail)">

Должен ли HTML не содержать классы или атрибуты, а сама логика должна быть помещена в JS файлы или JS-код? Является ли это хорошим (или, по крайней мере, общим) способом разработки AngularJS? Или следует избегать размещения логики в HTML?

Ответ 1

Если вы спросите меня:

Бизнес-логика на стороне клиента находится в службах, которые вводятся в директивы\контроллеры.
Предполагается, что логика пользовательского интерфейса должна быть помещена в контроллеры.

Теперь о добавлении логики в представления, если мы говорим о бизнес-логике, тогда это big no no. Используйте метод на вашем контроллере, который будет оценивать данные с помощью службы.

Если мы говорим о ng-if/ng-show условиях, то только если они являются небольшими и "читаемыми" условиями, я бы добавил их в представление. Когда это больше, я перемещаю их в контроллер для отладки проблем, и, поскольку я считаю, что HTML должен быть доступен для чтения.

Ответ 2

Размещение логики в HTML с помощью директив в angular - хороший способ. Вы не можете в полной мере использовать angular без размещения логики в HTML.

Контроллеры должны содержать логику представления, но не должны ссылаться на DOM (ссылка на DOM должна выполняться только с помощью директив). ^ref

Две вещи, которые нужно запомнить или лучшие практики для AngularJS, - это

Рассматривать область как доступную только для просмотра в представлениях

Рассматривать область действия как только для записи в контроллерах
^ref

Поскольку вы размещаете логику в HTML, если вы рассматриваете ее как доступную только для чтения, вы можете проверить условия или извлечь данные с помощью функций в области видимости, но исходная модель данных не нарушена, что бы вы ни делали в HTML.

Также привязка элементов dom к конкретным директивам является наиболее мощными функциями angular.

Когда вы используете datepicker, в jQuery вы можете сделать следующее:

<div id="datepicker"></div>

то в JS:

jQuery('#datepicker').datepicker({
    start:'today',
    end:'tomorrow',
    showTime:true
})

Вы можете сделать это в angular способом, следующим образом

Таким образом, даже если дизайнер или кто-то, кто читает HTML, сможет прочитать, что и даже вы можете передать параметры из самих атрибутов элемента.

<div date-picker start="today" end="tomorrow" show-time="true"></div>

Значение AngularJS само является декларативным синтаксисом и может содержать выражения как значения атрибутов, как вы опубликовали. Это совсем не плохая практика. Действительно, это обычная практика, которую делают все разработчики. Использование логики в HTML в angularjs экономит много написания кода самостоятельно. Все тяжелые потери выполняются angular за кулисами.

См. некоторые рекомендации по AngularJS