Question

我主要使用jQuery库，刚刚开始使用AngularJS。

我已经阅读了一些关于如何使用Angular的教程，但是我不清楚为什么或何时使用它，或者与使用jQuery相比我可以找到什么好处。

在我看来，Angular让你想到MVC，这或许意味着你将你的网页视为模板+数据组合。只要您觉得自己拥有动态数据，就可以使用{{binding bindings}}。然后，Angular将为您提供$ scope处理程序，您可以静态填充或通过调用Web服务器。这似乎与JSP设计网页的方式类似。我需要Angular吗？

对于简单的DOM操作，不涉及数据操作（例如：鼠标悬停时的颜色变化，点击时隐藏/显示元素），jQuery或vanilla JS就足够清晰了。这假设Angular的MVC中的模型是反映页面上数据的任何内容，因此，诸如颜色，显示/隐藏等变化的CSS属性不会影响模型。 Angular是否比jQuery或vanilla JS对DOM操作有任何优势？

与jQuery可以与插件一起做的事情相比，Angular能做什么使它对开发有用？

Answer 1

Angular如何让事情变得简单而不仅仅是简单的jQuery？请考虑以下简单示例：

<div>
    <h1 id="header">Hi!</h1>
    <form>
        <label for="firstName">First Name:</label>
        <input type="text" id="firstName" />
        <label for="lastName">Last Name:</label>
        <input type="text" id="lastName" />
    </form>
</div>
<script>
    $(function () {
        function UpdateName() {
            var firstName = $('#firstName').val();
            var lastName = $('#lastName').val();
            $('#header').text('Hi, ' + firstName + ' ' + lastName + '!');
        }

        $('#firstName').change(function () {
            UpdateName();
        });
        $('#lastName').change(function () {
            UpdateName();
        });
    });
</script>

以上是如何使用jQuery中的输入名称更新标头。在这个简单的示例中，第一个名称更新和姓氏更新的处理程序是相同的，因此您可以重用该代码。但是，如果要更新更多位置，则处理程序将充满DOM操作代码。

<div ng-controller="TheController">
    <h1>Hi, {{First Name}} {{Last Name}}!</h1>
    <form>
        <label for="firstName">First Name:</label>
        <input type="text" id="firstName" ng-model="firstName" />
        <label for="lastName">Last Name:</label>
        <input type="text" id="lastName" ng-model="lastName" />
    </form>
</div>
<script>
    myApp.controller('TheController', ['$scope', function ($scope) {
        $scope.firstName = '';
        $scope.lastName = '';
    }]);
</script>

以上是你在Angular中的相同之处。注意没有DOM操作代码？所有这些都由Angular处理，让您处理控制器中的实际业务逻辑。

当然，您可以使用vanilla JavaScript完成所有需要的操作。 Angular购买的是不同逻辑的分离。如果您需要更新DOM中的10个不同位置并在输入字段更新时向您的API发送POST请求，该怎么办？ jQuery中字段的onchange处理程序会非常混乱和复杂，而在Angular中，您应该能够轻松地执行此操作。

使用bootstrap时jQuery是强制性的吗？

1 个答案: