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

10
angularjs html javascript separation-of-concerns

2 ответов

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

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

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

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

6

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

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

две вещи, чтобы помнить или лучшие практики для AngularJS являются

  • лечить область как только для чтения в представлениях
  • относитесь к области как только для записи в контроллерах
    ref

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

также связывать элементы dom к специфическим директивам самые мощные характеристики угловатый.

когда вы используете datepicker в 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 экономит много написания кода самостоятельно. Все heavylifting осуществляется угловых за кадром.

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

5