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

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

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

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

Привязки данных

Вы делаете свою веб-страницу и добавляете {{привязки данных}} всякий раз, когда чувствуете, что у вас будут динамические данные. Затем Angular предоставит вам обработчик $ scope, который вы можете заполнить (статически или через обращения к веб-серверу).

Это хорошее понимание привязки данных. Я думаю, что вы поняли это.

DOM Manipulation

Для простой манипуляции с DOM, которая не включает манипулирование данными (например, изменение цвета при наведении курсора мыши, скрытие / отображение элементов при нажатии), jQuery или js старой школы достаточно и чище. Это предполагает, что модель в mvc angular - это все, что отражает данные на странице, и, следовательно, свойства css, такие как изменения цвета, отображения / скрытия и т. Д., Не влияют на модель.

Я вижу вашу точку зрения о том, что «простые» манипуляции с DOM более чисты, но очень редко, и это должно быть действительно «простым». Я думаю, что манипулирование DOM - одна из областей, точно так же как привязка данных, где Angular действительно сияет. Понимание этого также поможет вам понять, как Angular учитывает свои взгляды.

Я начну со сравнения Angular-пути с ванильным подходом к манипуляциям с DOM. Традиционно мы думаем о HTML как о «не делающем» ничего и пишем так. Таким образом, встроенные js, такие как «onclick» и т. Д., Являются плохой практикой, потому что они помещают «делаю» в контекст HTML, а не «делаю». Angular переворачивает эту концепцию с ног на голову. Когда вы пишете свое мнение, вы думаете, что HTML способен «делать» много вещей. Эта возможность абстрагируется в угловых директивах, но если они уже существуют или вы их написали, вам не нужно задумываться о том, как это делается, вы просто используете силу, предоставленную вам в этом «расширенном» HTML, который угловой позволяет использовать. Это также означает, что ВСЕ ваша логика представления действительно содержится в представлении, не в ваших файлах JavaScript. Опять же, причина в том, что директивы, написанные в ваших файлах javascript, могут рассматриваться как расширяющие возможности HTML, поэтому вы позволяете DOM беспокоиться о своих манипуляциях (так сказать). Я продемонстрирую на простом примере.

Это разметка, которую мы хотим использовать. Я дал ему интуитивное имя.

<div rotate-on-click="45"></div>

Во-первых, я просто хотел бы прокомментировать, что если мы предоставили нашему HTML эту функциональность через пользовательскую угловую директиву, мы уже закончили . Это глоток свежего воздуха. Подробнее об этом через минуту.

Реализация с помощью jQuery

живое демо здесь (нажмите).

function rotate(deg, elem) {
  $(elem).css({
    webkitTransform: 'rotate('+deg+'deg)', 
    mozTransform: 'rotate('+deg+'deg)', 
    msTransform: 'rotate('+deg+'deg)', 
    oTransform: 'rotate('+deg+'deg)', 
    transform: 'rotate('+deg+'deg)'    
  });
}

function addRotateOnClick($elems) {
  $elems.each(function(i, elem) {
    var deg = 0;
    $(elem).click(function() {
      deg+= parseInt($(this).attr('rotate-on-click'), 10);
      rotate(deg, this);
    });
  });
}

addRotateOnClick($('[rotate-on-click]'));

Реализация с Angular

живое демо здесь (нажмите).

app.directive('rotateOnClick', function() {
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {
      var deg = 0;
      element.bind('click', function() {
        deg+= parseInt(attrs.rotateOnClick, 10);
        element.css({
          webkitTransform: 'rotate('+deg+'deg)', 
          mozTransform: 'rotate('+deg+'deg)', 
          msTransform: 'rotate('+deg+'deg)', 
          oTransform: 'rotate('+deg+'deg)', 
          transform: 'rotate('+deg+'deg)'    
        });
      });
    }
  };
});

Довольно легкий, ОЧЕНЬ чистый и это просто манипуляция! На мой взгляд, угловой подход выигрывает во всех отношениях, особенно в том, как функциональность отвлекается и манипулирование dom объявляется в DOM. Функциональность подключается к элементу через атрибут html, поэтому нет необходимости запрашивать DOM с помощью селектора, и у нас есть два приятных замыкания - одно закрытие для фабрики директив, где переменные являются общими для всех случаев использования директивы. и одно закрытие для каждого использования директивы в linkфункции (или compileфункции).

Двустороннее связывание данных и директивы для манипулирования DOM - это только начало того, что делает Angular потрясающим. Angular продвигает весь код как модульный, многоразовый и легко тестируемый, а также включает одностраничную систему маршрутизации приложений. Важно отметить, что jQuery - это библиотека часто используемых удобных / кросс-браузерных методов, но Angular - это полнофункциональная среда для создания одностраничных приложений. Скрипт angular на самом деле включает в себя собственную «облегченную» версию jQuery, так что доступны некоторые из наиболее важных методов. Следовательно, вы можете утверждать, что при использовании Angular IS используется jQuery (слегка), но Angular предоставляет гораздо больше «волшебства», чтобы помочь вам в процессе создания приложений.

Это отличный пост для получения дополнительной информации: как мне «думать в AngularJS», если у меня есть опыт работы с jQuery?

Общие отличия

Вышеуказанные пункты направлены на конкретные проблемы ФП. Я также дам обзор других важных отличий. Я предлагаю сделать дополнительное чтение по каждой теме, а также.

Angular и jQuery нельзя сравнивать.

Angular - это фреймворк, jQuery - это библиотека. Фреймворки имеют свое место, а библиотеки имеют свое место. Тем не менее, нет сомнений в том, что хороший фреймворк имеет больше возможностей при написании приложения, чем библиотека. В этом и заключается смысл рамок. Вы можете написать свой код на простом JS, или вы можете добавить библиотеку общих функций, или вы можете добавить каркас, чтобы значительно сократить код, необходимый для выполнения большинства задач. Поэтому более подходящий вопрос:

Зачем использовать рамки?

Хорошие фреймворки могут помочь сконструировать ваш код таким образом, чтобы он был модульным (следовательно, многократно используемым), СУХИМЫМ, читаемым, производительным и безопасным. jQuery не является фреймворком, поэтому он не помогает в этом отношении. Мы все видели типичные стены спагетти-кода jQuery. Это не ошибка jQuery, это вина разработчиков, которые не знают, как создавать код. Однако, если бы разработчики действительно знали, как создавать код, они в конечном итоге написали бы какую-то минимальную «структуру», чтобы обеспечить основу (архитектуру и т. Д.), О которой я говорил недавно, или они бы добавили что-то в. Например, вы может добавить RequireJS, чтобы действовать как часть вашей среды для написания хорошего кода.

Вот некоторые вещи, которые предоставляют современные фреймворки:

• шаблонирование
• Данные связывания
• маршрутизация (одностраничное приложение)
• чистая, модульная, многоразовая архитектура
• безопасность
• дополнительные функции / функции для удобства

Прежде чем продолжить обсуждение Angular, я хотел бы отметить, что Angular не единственный в своем роде. Например, Durandal - это фреймворк, построенный на основе jQuery, Knockout и RequireJS. Опять же, jQuery сам по себе не может предоставить то, что могут сделать Knockout, RequireJS и весь фреймворк, построенный на их основе. Это просто не сравнимо.

Если вам нужно уничтожить планету и у вас есть Звезда Смерти, используйте звезду Смерти.

Угловой (пересмотренный).

Основываясь на моих предыдущих замечаниях о том, что предоставляют фреймворки, я хотел бы отметить способ, которым Angular предоставляет их, и попытаться выяснить, почему это фактически превосходит только jQuery.

DOM ссылка.

В моем примере, приведенном выше, абсолютно неизбежно, что jQuery должен подключиться к DOM, чтобы обеспечить функциональность. Это означает, что представление (html) заботится о функциональности (потому что оно помечено каким-то идентификатором, например, «слайдер изображения»), а JavaScript заботится о предоставлении этой функциональности. Angular устраняет эту концепцию посредством абстракции. Правильно написанный код с Angular означает, что представление может объявить свое собственное поведение. Если я хочу отобразить часы:

<clock></clock>

Готово.

Да, нам нужно перейти на JavaScript, чтобы это что-то значило, но мы делаем это противоположным образом с подходом jQuery. Наша директива Angular (которая находится в ее собственном маленьком мире) «дополнила» html, и html подключает функциональность к себе.

MVW Architecure / Модули / Внедрение зависимостей

Angular дает вам простой способ структурировать ваш код. Вещи представления принадлежат представлению (html), расширенные функциональные возможности представления принадлежат директивам, другая логика (например, вызовы ajax) и функции принадлежат сервисам, а подключение сервисов и логика к представлению принадлежит контроллерам. Также есть некоторые другие угловые компоненты, которые помогают работать с конфигурацией и модификацией сервисов и т. Д. Любая созданная вами функциональность автоматически доступна везде, где вам это нужно, через подсистему Injector, которая заботится о внедрении зависимостей во всем приложении. При написании приложения (модуля) я делю его на другие многократно используемые модули, каждый из которых имеет свои собственные повторно используемые компоненты, а затем включаю их в более крупный проект. Как только вы решите проблему с Angular, вы ' Мы автоматически решили ее так, чтобы она была полезной и структурированной для повторного использования в будущем и легко включалась в следующий проект. Огромный бонус ко всему этому заключается в том, что ваш код будет намного проще тестировать.

Нелегко заставить вещи «работать» в Angular.

СЛАВА БОГУ. Вышеупомянутый код спагетти jQuery возник в результате разработки, которая заставила что-то «работать», а затем пошла дальше. Вы можете написать плохой код Angular, но это сделать гораздо сложнее, потому что Angular сразится с вами. Это означает, что вы должны воспользоваться (хотя бы в некоторой степени) преимуществами чистой архитектуры, которую она предоставляет. Другими словами, с Angular сложнее писать плохой код, но удобнее писать чистый код.

Угловой далеко не идеален. Мир веб-разработки постоянно растет и меняется, и для решения проблем предлагаются новые и лучшие способы. Например, Facebook React и Flux имеют некоторые большие преимущества перед Angular, но имеют свои недостатки. Ничто не идеально, но Angular был и остается потрясающим на данный момент. Подобно тому, как jQuery когда-то помог веб-миру двигаться вперед, так же, как и Angular, и многие придут.