Палец вверх 10
Перевод
Перевод

Должна ли логика 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?

javascript html angularjs separation-of-concerns
задан Gottlieb Notschnabel 19 июл. 2014 г., 13:45:45
источник

2 ответа

Решение 6
Перевод
Перевод

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

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

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

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

ответ дан Amir Popovich 20 июл. 2014 г., 3:09:36
источник
Палец вверх 5
Перевод
Перевод

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

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

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

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

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

Кроме того, привязка элементов dom к определенным директивам является самой мощной особенностью angular.

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

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

тогда в JS:

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

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

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

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

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

Посмотрите некоторые лучшие практики об AngularJS

ответ дан Raghavendra 19 июл. 2014 г., 14:19:45
источник