仅在客户端使用Angular和JQuery

Question

我有一个网络应用程序。它有一个非常传统的技术堆栈。服务器端是Apache Struts，数据库是db2，在客户端，我使用的是JQuery。该应用程序部署在websphere上。

最近我开始在很多页面上大量使用JQuery，我慢慢开始看到某些页面背后的JQuery代码变成了意大利面条代码。

我希望在客户端添加Angular.js和handlebars.js，以便为我的JQuery提供更多结构。

首先，我想问一下这对Angular.js是否有用，以及如果我使用带有jquery的Angular和把手，每个用户的目的是什么。

感谢

Answer 1

我使用jQuery做了很多DOM操作。 切换到角度已经大大清理了我的代码。以下是一些想到的事情：

在HTML中做一些微不足道的事情

你可以在HTML中做很多琐碎事情的简单事实摆脱了很多js代码。 jQuery中的下面代码要求我查看更改的复选框，而不是根据检查状态我必须显示或隐藏下面的范围。使用angularjs，不需要单行自定义js。

<input type="checkbox" ng-model="show"/>
<span ng-show="show">show me when checkbox is checked</span

您的js代码中不再有HTML

现在每个人都发现自己在数组中循环，在js中添加表行或li，然后将em推送到DOM。你基本上是在JS文件中编写HTML。使用ng-repeat，您可以将HTML保留在模板文件中，并通过您希望构建该表/列表/等的数组循环。

<li ng-repeat="user in users">{{ user.name }}</li>

HTML中的功能更清晰

因为jQuery在javascript代码中使用了选择器，所以我经常发现自己正在搜索按钮实际上做了什么。使用angular，您可以使用ng-click调用函数。这使得通过查看HTML实际发生的事情变得更加清晰。

<button ng-click="recalculateUsage()">recalculate</button>

没有更多占位符

另一个很大的好处是，在模板中显示数据可以像{{ user.name }}一样简单，而不是使用jQuery创建占位符。$('#userName').html('my new content')。

<强>指令

指令是另一种清理代码的好方法。许多使用过的元素可以存放在自己的js /模板文件中，并且可以轻松地插入到HTML中。

Answer 2

AngularJS和JQuery都有不同的用途，因为它们都有不同的目标。

JQuery使您在DOM操作中受益，而不必过多关注涉及的数据。另一方面，AngularJS为您提供了类似MVC的框架，用于分离模型，视图，控制器逻辑并提供双向数据绑定。

有关Angular What does AngularJS do better than jQuery?

的好处的详细信息，请参阅此处