Ответ 1

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

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

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

Манипуляция DOM

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

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

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

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

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

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

Реализация с помощью 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)'    
        });
      });
    }
  };
});

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

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

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

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

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

Angular и jQuery не может быть разумно сравним.

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

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

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

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

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

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

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

Angular (повторно).

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

Ссылка DOM.

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

<clock></clock>

Готово.

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

MVW Architecure/Modules/Injection Dependency

Angular дает вам простой способ структурирования вашего кода. Просмотреть элементы относятся к представлению (html), расширенная функциональность представления относится к директивам, другая логика (например, ajax-вызовы), а функции принадлежат сервисам, а подключение служб и логики к виду принадлежит контроллерам. Существуют и другие компоненты Angular, которые помогают справиться с настройкой и модификацией сервисов и т.д. Любая функциональность, которую вы создаете, автоматически доступна в любом месте, где она вам нужна, через подсистему Injector, которая заботится об Injection Dependency во всем приложении. При написании приложения (модуля) я разбиваю его на другие модули многократного использования, каждый со своими компонентами многократного использования, а затем включаю их в более крупный проект. После того, как вы решите проблему с Angular, вы автоматически решили ее таким образом, чтобы это было полезно и структурировано для повторного использования в будущем и легко включалось в следующий проект. ОГРОМНЫЙ бонус ко всему этому заключается в том, что ваш код будет намного легче тестировать.

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

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

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