AngularJS逻辑应该放在HTML文件中吗？

Question

我想重构我在下面发布示例的代码.我是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中放置逻辑？

Answer 1

如果你问我:

1. 客户端业务逻辑位于注入指令\控制器的服务中.
2. 假设UI逻辑被放置在控制器中.

现在关于为视图添加逻辑,如果我们谈论业务逻辑,那么这是一个很大的不.在控制器上使用一种方法来评估使用该服务的内容.

如果我们正在谈论ng-if/ ng-show条件,那么只有当它们是小的和"可读"条件时,我才会将它们添加到视图中.当它不止于此时,我将它们移动到控制器以进行调试问题,因为我认为HTML应该是可读的.

Answer 2

使用angular中的指令将逻辑放在HTML中是一种好方法.如果不在HTML中放置逻辑,则无法充分利用角度.

控制器应包含视图逻辑,但不应实际引用DOM(引用DOM应仅通过指令完成).^REF

要记住的两件事或AngularJS的最佳实践是

• 在视图中将范围视为只读
• 在控制器^ref中将范围视为只写
  

由于您将逻辑放在HTML中,如果将其视为只读,则可以使用范围内的函数检查条件或提取数据,但无论您在HTML中执行什么操作,原始数据模型都不会受到干扰.

将dom元素绑定到特定指令也是角度最强大的功能.

当您在jQuery中使用datepicker时,您可以执行以下操作:

<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的重要性本身是声明性语法,可以包含表达式作为您发布的属性值.这根本不是一个坏习惯.实际上,所有开发人员都这样做是很常见的.在angularjs中使用HTML中的逻辑可以节省大量自己编写的代码.所有的重击都是在幕后以角度完成的.

查看有关AngularJS的一些最佳实践