AngularJS – jQueryLite（jqLit​​e）教程

原文： https://howtodoinjava.com/angularjs/angular-jquery-lite-jqlite-tutorial/

AngularJS 和 jQuery 都是非常强大的 JS 框架。 正如 Angular 介绍中所讨论的那样，jQuery 从很长时间以来一直是最引人注目的框架。 AngularJS 增加了 MVC 模式的功能以及许多其他内置服务，但是它确实尊重了 jquery 易于使用的语法（jquery 选择器），并且可以通过简单的函数调用对多个元素进行操作。

虽然，可以将 jQuery 库和 angular 一起使用，但建议使用 jQueryLite （默认情况下打包在 AngularJS 中）。

它是 jQuery 的精简版，即，它缺少 jQuery 的某些功能，但包含其中的大部分功能。 让我们看看如何在 AngularJS 应用中使用 jQueryLite。

访问 jQuery 或 jQueryLite

对于大多数 AngularJS 应用来说，内置在 AngularJS 中的 jQueryLite 库就足够了。 但是，如果您需要完整版 jQuery 的其他功能，只需在加载 AngularJS 库之前加载 jQuery 库即可。 例如：

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.angularjs.org/1.2.9/angular.min.js"></script>

无论是否加载 jQueryLite 或完整的 jQuery 库，都可以使用 AngularJS 引导时可用的angular变量的element属性从 AngularJS 代码访问 jQuery。 本质上， angular.element将是jQuery变量的别名，该变量通常在 jQuery 应用中使用。 您可以考虑如下：

angular.element() === jQuery() === $()

jQuery 示例

<div ng-click="clicked($event)">Click Me</div>
//You can access a jQuery version of the object using the following AngularJS code:
$scope.clicked = function(event){
  var jQueryElement = angular.element(event.target);
  //Now perform jQuery actions on jQueryElement
};

倾向于使用“Angular 方式”

您会经常听到“仅在指令中进行 DOM 操作”。 这是必须的。 在前进之前，请尽量避免使用 jQuery。 总是想办法避免使用 jQuery/jqLite 来操作 DOM 对象。

AngularJS 附带了一整套工具，使这一过程变得非常容易。 使用ngClass，我们可以动态更新类； ngModel允许双向数据绑定； ngShow和ngHide以编程方式显示或隐藏元素； 还有更多–包括我们自己编写的内容。

换句话说，我们可以在没有 DOM 操作的情况下进行各种出色的工作。 DOM 操作越少，指令的测试就越容易，指令的样式就越容易，将来就越容易更改，它们的可重用性和可分发性就越高。

这是可切换按钮的快速示例：

.directive( 'myDirective', function () {
    return {
        template: '<a class="btn">Toggle me!</a>',
        link: function ( scope, element, attrs ) {
            var on = false;
            $(element).click( function () {
                on = !on;
                $(element).toggleClass('active', on);
            });
        }
    };
});

可以更简单地重写此指令，如下所示：

.directive( 'myDirective', function () {
    return {
        scope: true,
        template: '<a class="btn" ng-class="{active: on}" ng-click="toggle()">Toggle me!</a>',
        link: function ( scope, element, attrs ) {
            scope.on = false;
            scope.toggle = function () {
                scope.on = !scope.on;
            };
        }
    };
});

与以前的版本相比，它非常清晰，易于维护且易于测试，在任何不使用 jQuery 的环境中，它都很容易被破坏。

参考：

https://docs.angularjs.org/api/ng/function/angular.element

https://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background

学习愉快！