Является ли jQuery обязательным при использовании начальной загрузки?

Question

Я в основном использовал библиотеку jQuery и только что начал использовать AngularJS.

Я прочитал несколько руководств о том, как использовать Angular, но я не понимаю, почему и когда использовать его, или какие преимущества я могу найти по сравнению с использованием jQuery.

Мне кажется, что Angular заставляет вас думать о MVC, что, возможно, означает, что вы просматриваете свою веб-страницу как комбинацию шаблонов + данных. Вы используете {{привязки данных}} всякий раз, когда чувствуете, что у вас будут динамические данные. Затем Angular предоставит вам обработчик $ scope, который вы можете заполнить статически или через вызовы на веб-сервер. Это похоже на характер JSP-метода проектирования веб-страниц. Нужно ли мне угловое для этого?

Для простой манипуляции с DOM, которая не связана с манипуляциями с данными (например, изменение цвета на мыши, скрытие/отображение элементов при щелчке), jQuery или vanilla JS является достаточным и чистым. Это предполагает, что модель в MVC Angular является чем-то, что отражает данные на странице, и, следовательно, свойства CSS, такие как изменения цвета, отображения/скрытия и т. Д., Не влияют на модель. У Углового есть какие-либо преимущества перед jQuery или vanilla JS для манипуляций с DOM?

Что может сделать Angular, что делает его полезным для разработки по сравнению с тем, что jQuery может делать вместе с плагинами?

Answer 1

Как Угловая делает вещи проще, чем просто 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> 

Выше, как вы одно и то же в Угловом. Обратите внимание, как нет кода манипуляции DOM? Все, что обрабатывается Angular, позволяет вам иметь дело с реальной бизнес-логикой в ​​вашем контроллере.

Конечно, вы можете делать все, что вам нужно, с ванильным JavaScript. Что Angular покупает вас, так это разделение разных логик. Что делать, если вам нужно обновить 10 разных мест в DOM и отправить запрос POST в ваш API для обновления поля ввода? Обработчик onchange для поля в jQuery был бы очень грязным и усложняющим, тогда как в Angular вы могли бы сделать это с легкостью.