Чем AngularJS отличается от jQuery


388

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

Я ничего не знаю об этом. Чем он отличается от jQuery?
У меня уже есть набор функций, выполненных для аналогичных задач в jQuery. Могу ли я по-прежнему использовать jQuery с AngularJS?

Ответы:


414
  1. В то время как Angular 1 был фреймворком, Angular 2 - это платформа . ( ссылка )

Разработчикам Angular2 предоставляет некоторые функции, помимо отображения данных на экране. Например, использование инструмента angular2 cli может помочь вам «предварительно скомпилировать» код и сгенерировать необходимый код javascript ( расшатывание дерева ), чтобы уменьшить размер загрузки до 35 тысяч.

  1. Angular2 эмулировал Shadow DOM. ( ссылка )

Это открывает двери для рендеринга сервера, который может решить проблему SEO и работать с Nativescript и т. Д., Которые не работают в браузерах.

AngularJS - это фреймворк . Имеет следующие особенности

  1. Двухстороннее связывание данных
  2. Шаблон MVW (MVC-иш)
  3. шаблон
  4. Пользовательская директива (повторно используемые компоненты, пользовательская разметка)
  5. REST-дружественных
  6. Глубокая ссылка (настроить ссылку для любой динамической страницы)
  7. Проверка формы
  8. Связь с сервером
  9. локализация
  10. Внедрение зависимости
  11. Полная среда тестирования (оба устройства, e2e)

проверить эту презентацию и это отличное введение

Не забудьте прочитать официальное руководство разработчика

Или узнайте это из этих потрясающих видеоуроков

Если вы хотите посмотреть больше обучающих видео, ознакомьтесь с этой статьей, Сборником лучших 60+ учебных пособий по AngularJS .

Вы можете использовать jQuery с AngularJS без каких-либо проблем.

На самом деле AngularJS использует в нем jQuery lite, который является отличным инструментом.

Из FAQ

Использует ли Angular библиотеку jQuery?

Да, Angular может использовать jQuery, если он присутствует в вашем приложении при загрузке приложения. Если jQuery отсутствует в вашем пути к скрипту, Angular возвращается к собственной реализации подмножества jQuery, которое мы называем jQLite.

Однако не пытайтесь использовать jQuery для изменения DOM в контроллерах AngularJS, делайте это в своих директивах.

Обновить:

Angular2 выпущен. Вот большой список ресурсов для начинающих


8
Нужно ли мне разрабатывать полное приложение на Angular JS, или я могу использовать его на нескольких страницах и в нескольких файлах? Я использую простой jquery
Mirage

8
+1 Отличный ответ. Я бы сказал, что Angular приближается к шаблону MVVM.
GFoley83

8
Я почти уверен, что Angular - это MVW
iConnor

2
В течение нескольких лет это было близко к MVC. Но теперь ре-факторинг и улучшение API, это ближе к MVVM. В Angular $ scope работает как виртуальная машина (см. Модель).
Непобедимый

14
Для любых будущих-людей интересно (как я), MVW == Model-View-Безотносительно , как и в " м odel- v iew- ж hatever-работа-для-Вас" . Другими словами, MV * .
Дэвид Фрай

40

Я хочу добавить кое-что относительно разницы AngularJS с jQuery с точки зрения разработчика.

В AngularJS у вас должен быть очень структурированный взгляд и подход к тому, чего вы хотите достичь. Для выполнения задачи едва ли следует линейный способ, а обмены между различными объектами выполняют запросы и действия, что, в таком случае, необходимо, так как angular является основой на основе MVC . Это также требует, по крайней мере, общего плана завершенного приложения, поскольку кодирование во многом зависит от того, как вы хотите, чтобы взаимодействия были завершены.

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

Хотя в Angular JS вы должны следовать некоторым правилам, а также поддерживать надлежащий импульс и отношения, возможно, это больше похоже на классический сонет Спенсера (известный классический поэт), стихотворение которого структурно и связано со многими правилами.

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

Кроме того, AngularJS не зависит от jQuery для выполнения своей задачи. У этого есть две очень превосходных функции, которые не найдены в jQuery в любом смысле:

1- Angular JS учит вас, как кодировать и достигать цели, а не просто достигать цели любым способом. Стоит отметить, что AngularJS полностью использует ядро ​​и сердце Javascripts и прокладывает путь для вас, чтобы включить в ваше приложение такие методы, как DI (внедрение зависимостей). Для работы с angularJS вы должны (или должны) изучить более совершенные методы кодирования с помощью Javascript.

2- Angular JS полностью независим, чтобы обрабатывать директивы и структурировать ваше приложение; Затем вы могли бы просто заявить, что jQuery может делать то же самое (независимость), но, действительно, AngularJS, как несколько раз упоминалось в приведенных выше строках, обладает независимостью самым превосходным из возможных структурно MVC-способом.

Последнее замечание заключается в том, что нет войны Имен, так как быть беспокоящим или субъективным. Величина и величие jQuery были доказаны, но их использование и ограничения (любой платформы или программного обеспечения) являются предметом обсуждения и подобных дискуссий вокруг.

Обновить:

Использование AngularJS является решающим, так как это дорого с точки зрения реализации, но создает прочную основу для будущего расширения, преобразования и обслуживания приложения. AngularJS для Нового Мира Сети. Он нацелен на создание приложений, которые характеризуются наименьшим потреблением ресурсов (загрузка только необходимых ресурсов с сервера), быстрым временем отклика, высокой степенью обслуживания и расширяемости, охватывающих структурированную систему.


«Чтобы работать с angularJS, вы должны (или должны) изучать более совершенные методы кодирования с помощью Javascript» - пожалуйста, дайте мне примеры того, что вы имеете в виду под повышенными техниками?
анту

@MostafaTalebi, я просто пошутил, но на самом деле не понял, что «JavaScript - это скорее концепция ??» что это значит?? не могли бы вы объяснить больше? эхх в любом случае мы связываемся ??
Азерафати

Я имею в виду, что это сценарий :)))
Мостафа Талеби

Я перепутал одну вещь! например, мы используем php для серверной части, и мы берем нашу платформу, основанную на концепции MVC, и в шаблоне, который мы используем javascript, мы также используем Angular js, так что здесь Angular js MVC бесполезен, не так ли?
Фархад

28

AngularJS: AngularJS для разработки тяжелых веб-приложений. AngularJS может использовать jQuery, если он присутствует в веб-приложении при загрузке приложения. Если его нет в пути скрипта, то AngularJS возвращается к собственной реализации подмножества jQuery.

JQuery: jQuery - это небольшая, быстрая и многофункциональная библиотека JavaScript. Это делает такие вещи, как обход и манипулирование документами HTML, обработка событий, анимация и Ajax намного проще. jQuery упрощает многие сложные вещи из JavaScript, такие как вызовы AJAX и манипулирование DOM.

Подробнее читайте здесь: angularjs-vs-jquery


20

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

введите описание изображения здесь

Я хотел бы добавить еще одну вещь: AngularJS можно заставить следовать шаблону проектирования MVVM, в то время как jQuery не следует ни одному из стандартных объектно-ориентированных шаблонов.


12

Они работают на разных уровнях.

Самый простой способ увидеть разницу с точки зрения новичка состоит в том, что jQuery - это, по сути, абстрактный JavaScript, поэтому то, как мы создаем страницу для JavaScript, во многом похоже на то, как мы это сделаем для jQuery . Начните с DOM, затем создайте слой поведения поверх этого. Не так с Angular.Js . Процесс действительно начинается с нуля, поэтому конечным результатом является желаемый вид.

С jQuery вы делаете дом-манипуляции, с Angular.Js вы создаете целые веб-приложения.


jQuery был построен для отвлечения различных особенностей браузера и работы с DOM без добавления проверок IE6 и так далее. Со временем он разработал хороший, надежный API, который позволил нам многое сделать, но по своей сути он предназначен для работы с DOM, поиска элементов, изменения пользовательского интерфейса и так далее. Думайте об этом как о работе непосредственно с гайками и болтами.

Angular.Js был построен как слой поверх jQuery , чтобы добавить концепции MVC к проектированию интерфейса. Вместо того, чтобы давать вам API для работы с DOM, Angular.Js предоставляет вам привязку данных, шаблоны, пользовательские компоненты (аналогичные jQuery UI , но декларативный вместо запуска через JS) и многое другое. Думайте об этом как о работе на более высоком уровне, с компонентами, которые вы можете соединить вместе, а не непосредственно на уровне гаек и болтов.

Кроме того , Angular.Js предоставляет вам структуры и концепции, которые применяются к различным проектам, таким как контроллеры, сервисы и директивы. Сам jQuery может быть использован несколькими способами (gazillion), чтобы сделать одно и то же. К счастью, с Angular.Js это намного меньше , что облегчает вход и выход из проектов. Он предлагает разумный способ для нескольких людей внести свой вклад в один и тот же проект, без необходимости заново изучать систему.


Краткое сравнение может быть это

JQuery

  • Может быть легко использовано теми, кто имеет надлежащие знания о селекторах CSS
  • Это библиотека, используемая для манипуляций DOM
  • Не имеет ничего общего с моделями
  • Легко манипулировать содержимым веб-страницы
  • Применяйте стили, чтобы сделать интерфейс более привлекательным
  • Легкий обход DOM
  • Эффекты и анимация
  • Просто сделать AJAX звонки и
  • Удобство использования
  • нет двусторонней привязки
  • становится сложным и сложным в обслуживании, когда размер проекта увеличивается
  • Иногда вам нужно написать больше кода для достижения той же функциональности, что и в Angular.Js

Angular.Js

  • Это MVVM Framework
  • Используется для создания SPA (одностраничные приложения)
  • Он имеет ключевые функции, такие как маршрутизация, директивы, двустороннее связывание данных, модели, внедрение зависимостей, модульные тесты и т. Д.
  • является модульным
  • Поддерживается, когда размер проекта увеличивается
  • быстро
  • Двусторонняя привязка данных REST-дружественный шаблон на основе MVC
  • Глубокая связь
  • шаблонирование
  • Валидация встроенной формы
  • Внедрение зависимости
  • локализация
  • Полная среда тестирования
  • Связь с сервером

И многое другое

введите описание изображения здесь

Думаю, это помогает.

Больше можно найти -


3

Jquery: -

jQuery is a lightweight and feature-rich JavaScript Library that helps web developers
by simplifying the usage of client-side scripting for web applications using JavaScript.
It extensively simplifies using JavaScript on a website and its lightweight as well as fast.

So, using jQuery, we can:

easily manipulate the contents of a webpage
apply styles to make UI more attractive
easy DOM traversal
effects and animation
simple to make AJAX calls and
utilities and much more 

AngularJS: -

AngularJS is a product by none other the Search Engine Giant Google and its an open source
MVC-based framework(considered to be the best and only next generation framework). AngularJS
is a great tool for building highly rich client-side web applications.

As being a framework, it dictates us to follow some rules and a structured approach. Its
not just a JavaScript library but a framework that is perfectly designed (framework tools
are designed to work together in a truly interconnected way).

In comparison of features jQuery Vs AngularJS, AngularJS simply offers more features:

Two-Way data binding
REST friendly
MVC-based Pattern
Deep Linking
Template
Form Validation
Dependency Injection
Localization
Full Testing Environment
Server Communication
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.