防止 AngularJs 使用 jQuery 库答案

【问题标题】：Prevent AngularJs from using jQuery library防止 AngularJs 使用 jQuery 库
【发布时间】：2016-12-06 12:18:45
【问题描述】：

问题：如何防止 jQuery 被 AngularJs 使用？

背景：

我正在使用 AngularJs 开发一个独立的应用程序，可以“插入”到现有的客户网站中。

这些客户端网站可能已经使用 jQuery。

如果您使用过 AngularJs，您可能已经知道它使用 jqLite（jQuery 的一个子集）。但是如果 jQuery 库在 Angular 应用程序初始化之前加载，那么 Angular 将使用它。不能保证客户端会在之后加载它。

使用 jQuery 而不是 jqLite 库导致了其他问题，我根本不需要 jQuery。

有没有办法阻止 AngularJs 使用它而只使用 jqLite？

谢谢

编辑 1：

让 Angular 包含和使用 jQuery 时遇到的问题是：

“GET http://localhost.dev/angular/js/jquery-1.10.2.js?_=1401232704848404（未找到）”
"Uncaught SyntaxError: Unexpected token （jQuery v2.1.1 文件中的错误，第 330 行）

我正在使用 jQuery-2.1.1 进行测试，所以甚至不确定它为什么要寻找版本 1.10.2

编辑 2：

我正在寻找一种最好不需要需要修改核心 AngularJs 文件的方法。

【问题讨论】：

是的，之后加载 jQuery
是的，确实有效。但不能保证客户端会在应用程序初始化后调用 jQuery。我需要简单地为我的 AngularJS 关闭它以防止出现任何问题。无论如何，谢谢。
“应用初始化后调用jQuery”是什么意思？您可以控制加载文件的顺序
出于好奇：您发现了什么问题？
@tymeJV：我的 AngularJS 应用程序是一个预订系统，可以插入到客户现有的网站中。我控制我的应用程序中的顺序，但无法控制客户端设置。希望这能让它更清楚吗？

标签： jquery angularjs

【解决方案1】：

更新：
从 v1.4.0-beta.6 开始，Angular 现在已经内置支持选择不使用 jQuery（或者如果加载了多个版本，则使用特定版本）：ngJq

不幸的是，没有内置的方法可以禁用 jQuery（尽管这听起来像是一个非常合理的功能）。

两个远非理想的解决方案是：

1.) Tyler 修改 Angular 源码的解决方案。

2.) 由于 Angular 使用 window.jQuery 来查找...您猜对了...jQuery（并且假设您可以控制在 angular.js 之前和之后运行的脚本），您可以暂时“隐藏" 来自 Angular 的 jQuery：

/* Run before angular.js */
if (window.jQuery) {
    window.hideJQuery = window.jQuery;
    window.jQuery = false;
}

// <script src="angular.js"></script>

if (window.hideJQuery) {
    window.jQuery = window.hideJQuery;
    window.hideJQuery = undefined;
}

【讨论】：

【解决方案2】：

使用ng-jq 指令：

* @element 任意 * @param {string=} ngJq `window` 下可用的库的名称 * 用于 angular.element * @描述 * 使用此指令强制 angular.element 库。这应该是 * 用于通过将 ng-jq 留空或设置名称来强制使用 jqLite * 窗口下的 jquery 变量（例如 jQuery）。 * * 因为 Angular 在加载时会查找该指令（不等待 * DOMContentLoaded 事件），它必须放在脚本之前的元素上 * 加载角度。此外，只会使用 `ng-jq` 的第一个实例，并且所有 * 其他人忽略。

例如：

 <!doctype html>
 <html ng-app ng-jq>
 ...
 ...
 </html>

【讨论】：

谢谢。像魅力一样工作。

【解决方案3】：

我认为如果在初始化 angular 之后加载 jquery 库，它将使用 jqlite。您可以尝试更改文件加载和初始化的顺序。

此外，从 Angular 版本 1.4.x 开始，您可以在声明 Angular 根应用程序的地方使用 ng-jq 禁用 jquery 的加载。

你可以参考这里的ng-jq文档https://code.angularjs.org/1.4.5/docs/api/ng/directive/ngJq

【讨论】：

【解决方案4】：

下面的函数是在 Angular 中用 jQuery 替换 jqlite 的函数。在 NG Source 中找到并根据需要更改此函数以不使用 jQUery。

function bindJQuery() {
  var originalCleanData;
  // bind to jQuery if present;
  jQuery = window.jQuery;
  // Use jQuery if it exists with proper functionality, otherwise default to us.
  // Angular 1.2+ requires jQuery 1.7.1+ for on()/off() support.
  if (jQuery && jQuery.fn.on) {
    jqLite = jQuery;
    extend(jQuery.fn, {
      scope: JQLitePrototype.scope,
      isolateScope: JQLitePrototype.isolateScope,
      controller: JQLitePrototype.controller,
      injector: JQLitePrototype.injector,
      inheritedData: JQLitePrototype.inheritedData
    });

    originalCleanData = jQuery.cleanData;
    // Prevent double-proxying.
    originalCleanData = originalCleanData.$$original || originalCleanData;

    // All nodes removed from the DOM via various jQuery APIs like .remove()
    // are passed through jQuery.cleanData. Monkey-patch this method to fire
    // the $destroy event on all removed nodes.
    jQuery.cleanData = function(elems) {
      for (var i = 0, elem; (elem = elems[i]) != null; i++) {
        jQuery(elem).triggerHandler('$destroy');
      }
      originalCleanData(elems);
    };
    jQuery.cleanData.$$original = originalCleanData;
  } else {
    jqLite = JQLite;
  }

  angular.element = jqLite;
}

应该在 1432 行附近。

【讨论】：

我已经找到了该功能（尽管在我看来您使用的是旧版本的 Angular），我可以通过设置 jQuery = false 来解决问题。这样做的问题是它很容易被其他成员忘记或忽略，然后当然会被升级覆盖。不管怎么说，还是要谢谢你。我希望有一个内置的方法来扩展核心 AngularJs 文件以提供更改。