我们应该在AngularJS中使用jQuery吗？

Question

我们的网站目前正在使用jQuery库,每月流量约为100万.我们希望包含以API为中心的方法,因此决定转向Javascript MVC并为其选择了angularJS.

现在我的问题是,我应该在Angular的顶部使用jQuery,以便我需要重写最小的DOM操作代码,或者我应该以Angular方式重写所有内容？我们正在使用像plupload,jQuery UI这样的jQuery插件.在网站上等.请建议最佳的迁移方式(页面加载时间也很重要).

如果我有jQuery背景,已经通过"Thinking in AngularJS"？但没有得到一个明确的答案

Answer 1

在进行迁移之前,您需要考虑AngularJS的好处.

1. 它通过仅在范围中存储变量来提供双向绑定.
2. 与JQuery相比,我们需要编写代码.
3. 以模块化方式实施(通过创建angular.module)
4. 将大部分代码从Javascript转移到HTML,看起来代码更清晰.
5. Singleton模板器用于存储数据并在多个控制器或服务之间共享.
6. 它使用较小版本的jQuery构建,称为JQlite,它具有大部分基本功能,但是你想在AngularJS中使用JQuery,那么只需要在它中添加jQuery引用就可以使用它,之后JQLite功能得到它转换成JQuery.

你不应该在AngularJS的顶部使用jQuery,因为如果我们使用JQuery进行任何角度DOM操作或范围变量操作,AngularJS摘要周期将不会运行.

当您将jQuery组件迁移到AngularJS时,您需要遵循以下内容

1. 您需要首先搜索angular-ui-bootstrap站点,因为它们已覆盖已转换为角度的大部分UI组件.
2. 我相信你不会找到每个插件的Angular版本,因为你应该将该插件包装到指令中.这将为您提供控制器,而不是指向已放置的DOM元素.(此处示例为Datepicker using指令)
3. 不要尝试从创建摘要周期的外部角度上下文绑定事件,这将导致影响UI上的绑定更新.
4. 确保在进行任何应该使用$http而不是使用的ajax调用时$.ajax
5. 你可以在jquery代码中找到许多可以用ng-class指令替换的地方,比如你只是在添加和删除类,或者在任何条件的基础上显示一些元素,这样就可以替换那种jquery代码按使用ng-class指令
6. 寻找你只删除DOM或添加可以很容易被ng-if指令替换的DOM的地方,或者只显示隐藏的元素可以使用ng-show/ng-hide
7. 也可以在UI中找到这样一个部分,在这个部分中你使用for循环创建相同的DOM,可以转换为angular native指令 ng-repeat
8. 如果您有任何需要显示和隐藏多个元素的情况,那么部分代码将使用ng-switch指令实现

Answer 2

使用Angular构建控制器和API客户端,然后在时间允许的情况下移动尽可能多的DOM操作并尽可能地移动角度指令.然后等待Angular 2被释放并重新做一遍.