Czym różni się AngularJS od jQuery

388

Znam tylko jedną bibliotekę js i to jest jQuery .
Ale moi inni koderzy w grupie zmieniają AngularJS jako domyślną bibliotekę w nowym projekcie.

Nic o tym nie wiem. Czym różni się od jQuery?
Mam już zestaw funkcji wykonanych dla podobnych zadań w jQuery. Czy nadal mogę używać rzeczy jQuery z AngularJS?

Miraż
źródło

Odpowiedzi:

414
  1. Chociaż Angular 1 był platformą, Angular 2 jest platformą . ( ref )

Dla programistów Angular2 zapewnia pewne funkcje poza wyświetlaniem danych na ekranie. Na przykład użycie narzędzia angular2 cli może pomóc w „wstępnej kompilacji” kodu i wygenerowaniu niezbędnego kodu javascript ( wstrząsanie drzewem ), aby zmniejszyć rozmiar pobieranego pliku do 35Kish.

  1. Angular2 emulował Shadow DOM. ( ref )

To otwiera drzwi do renderowania serwera, które może rozwiązać problem SEO i współpracować z Nativescript itp., Które nie działają w przeglądarkach.

AngularJS to framework . Ma następujące funkcje

  1. Dwukierunkowe wiązanie danych
  2. Wzór MVW (MVC-ish)
  3. Szablon
  4. Dyrektywa niestandardowa (komponenty wielokrotnego użytku, niestandardowe znaczniki)
  5. Przyjazny dla REST
  6. Głębokie linkowanie (skonfiguruj link do dowolnej strony dynamicznej)
  7. Walidacja formularza
  8. Komunikacja z serwerem
  9. Lokalizacja
  10. Zastrzyk zależności
  11. Pełne środowisko testowe (zarówno jednostka, e2e)

sprawdź tę prezentację i to wspaniałe wprowadzenie

Nie zapomnij przeczytać oficjalnego przewodnika dla programistów

Lub naucz się go z tych niesamowitych samouczków wideo

Jeśli chcesz obejrzeć więcej filmów instruktażowych, sprawdź ten post, Zbiór najlepszych 60+ samouczków AngularJS .

Możesz używać jQuery z AngularJS bez żadnego problemu.

W rzeczywistości AngularJS używa w nim jQuery lite, co jest doskonałym narzędziem.

Z FAQ

Czy Angular korzysta z biblioteki jQuery?

Tak, Angular może używać jQuery, jeśli jest obecny w Twojej aplikacji podczas ładowania aplikacji. Jeśli jQuery nie znajduje się na ścieżce skryptu, Angular wraca do własnej implementacji podzbioru jQuery, który nazywamy jQLite.

Nie próbuj jednak używać jQuery do modyfikowania DOM w kontrolerach AngularJS, zrób to w swoich dyrektywach.

Aktualizacja:

Angular2 został wydany. Oto świetna lista zasobów na początek

maxisam
źródło
8
Czy muszę opracować pełną aplikację w Angular js, czy mogę jej używać na kilku stronach i na kilku apgesach - używam prostej jquery
Mirage
8
+1 Świetna odpowiedź. Powiedziałbym, że Angular jest bliższy wzorowi MVVM.
GFoley83
8
Jestem prawie pewien, że Angular to MVW
iConnor,
2
Przez kilka lat był blisko MVC. Ale teraz ponowne faktoring i ulepszenie interfejsu API jest bliższe MVVM. W zakresie Angular $ działa jak maszyna wirtualna (zobacz model).
Niezwyciężony
14
Na wszelkie przyszłe-ludzie zastanawiasz (jak ja), MVW == Model-View-Cokolwiek , jak w " m odel- v iew- w hatever-prace-dla-was" . Innymi słowy, MV * .
David Frye
40

Chcę dodać coś o różnicy między AngularJS a jQuery z perspektywy programisty.

W AngularJS musisz mieć bardzo uporządkowany widok i podejście do tego, co chcesz osiągnąć. Wykonanie zadania nie jest liniowe , ale wymiana między różnymi obiektami zajmuje się żądaniami i działaniami, co jest zatem konieczne, ponieważ kąt jest strukturą opartą na MVC . Wymaga to również co najmniej ogólnego planu sfinalizowanej aplikacji, ponieważ kodowanie zależy w dużej mierze od tego, w jaki sposób chcesz zakończyć interakcje.

jQuery jest jak wolna poezja, piszesz wiersze i utrzymujesz stosunki i pęd odpowiednie dla twojego zadania do wykonania.

Chociaż w Angular JS powinieneś przestrzegać pewnych zasad, a także utrzymywać właściwy pęd i relacje, może bardziej przypomina klasyczny sonet Spencerian (słynny poeta klasyczny), którego wiersz jest strukturalny i związany z wieloma regułami.

W porównaniu z AngularJS, jQuery przypomina bardziej zbiór kodów i funkcji (który, jak już wspomniano, jest świetny do manipulacji DOM i osiągania szybkiego efektu), podczas gdy AngularJS jest prawdziwym frameworkiem, który daje deweloperowi możliwość zbudowania sieci korporacyjnej -aplikacja z dużą ilością wiązania danych i wymiany w ramach doskonale zorganizowanego routingu i zarządzania.

Ponadto AngularJS nie jest zależny od jQuery w celu wykonania swojego zadania. Ma dwie bardzo doskonałe funkcje, których w żadnym wypadku nie można znaleźć w jQuery:

1- Angular JS uczy KODOWANIA i osiągnięcia celu, a nie tylko osiągnięcia celu w jakikolwiek sposób. Warto wspomnieć, że AngularJS w pełni wykorzystuje rdzeń i serce Javascript i toruje drogę do włączenia do Twojej aplikacji technik takich jak DI (wstrzykiwanie zależności). Aby pracować z angularJS, powinieneś (lub musisz) nauczyć się bardziej zaawansowanych technik kodowania za pomocą Javascript.

2- Angular JS jest w pełni niezależny w obsłudze dyrektyw i struktury aplikacji; możesz wtedy po prostu twierdzić, że jQuery może zrobić to samo (niezależność), ale rzeczywiście, AngularJS, jak kilkakrotnie wspomniano w powyższych liniach, ma niezależność w możliwie najlepszy sposób oparty na MVC.

Ostatnia uwaga jest taka, że ​​nie ma wojny o Imiona, ponieważ frustracja lub subiektywizm jest bardzo niepokojące. Wielkość i wielkość jQuery została udowodniona, ale ich zastosowania i ograniczenia (dowolnego frameworka lub oprogramowania) są przedmiotem dyskusji i podobnych debat.

Aktualizacja:

Korzystanie z AngularJS jest decydujące, ponieważ jest drogie pod względem implementacji, ale stanowi silną podstawę do przyszłej rozbudowy, transformacji i utrzymania aplikacji. AngularJS jest dla New World of Web. Jest przeznaczony do budowania aplikacji, które charakteryzują się najmniejszym zużyciem zasobów (ładowanie tylko niezbędnych zasobów z serwera), szybkim czasem reakcji oraz wysokim stopniem łatwości konserwacji i rozszerzalności wokół zorganizowanego systemu.

Mostafa Talebi
źródło
„Aby pracować z angularJS, powinieneś (lub musisz) nauczyć się bardziej zaawansowanych technik kodowania za pomocą Javascript” - proszę podać przykłady tego, co masz na myśli, mówiąc o podwyższonych technikach?
antew
@MostafaTalebi, tylko żartowałem, ale tak naprawdę nie rozumiałem tej części „JavaScript jest bardziej koncepcją ??” co to znaczy?? czy możesz wyjaśnić więcej? ehh, czy w każdym razie jesteśmy w kontakcie?
azerafati,
Mam na myśli, że to skrypt :)))
Mostafa Talebi
Pomieszałem jedną rzecz! na przykład używamy php po stronie serwera i bierzemy nasz framework oparty na koncepcji MVC, aw szablonie, w którym używamy javascript, używamy również Angular js, więc tutaj angular js MVC jest bezużyteczny, prawda?
Farhad
28

AngularJS: AngularJS jest przeznaczony do tworzenia ciężkich aplikacji internetowych. AngularJS może używać jQuery, jeśli jest obecny w aplikacji internetowej podczas ładowania aplikacji. Jeśli nie ma go na ścieżce skryptu, to AngularJS wraca do własnej implementacji podzbioru jQuery.

JQuery: jQuery to mała, szybka i bogata w funkcje biblioteka JavaScript. Ułatwia to przechodzenie i manipulowanie dokumentami HTML, obsługę zdarzeń, animację i Ajax. jQuery upraszcza wiele skomplikowanych rzeczy z JavaScript, takich jak wywołania AJAX i manipulacje DOM.

Przeczytaj więcej szczegółów tutaj: angularjs-vs-jquery

kmario23
źródło
20

Myślę, że to jest bardzo dobry wykres opisujący różnice w skrócie. Szybki rzut oka na to pokazuje większość różnic.

wprowadź opis zdjęcia tutaj

Chciałbym dodać, że AngularJS może być zgodny z wzorcem projektowym MVVM, podczas gdy jQuery nie stosuje się do żadnego ze standardowych wzorców obiektowych.

Pritam Banerjee
źródło
12

Działają na różnych poziomach.

Najprostszym sposobem, aby zobaczyć różnicę, z perspektywy początkującego jest to, że jQuery jest zasadniczo abstrakcją JavaScript, więc sposób, w jaki projektujemy stronę dla JavaScript, jest prawie taki, jak zrobimy to dla jQuery . Zacznij od modelu DOM, a następnie zbuduj na nim warstwę zachowania. Nie w przypadku Angular.Js . Proces naprawdę zaczyna się od podstaw, więc końcowym rezultatem jest pożądany widok.

Za pomocą jQuery wykonujesz manipulacje domem , a za pomocą Angulara tworzysz całe aplikacje internetowe.


jQuery został zbudowany, aby odciąć różne osobliwości przeglądarki i współpracować z DOM bez konieczności dodawania kontroli IE6 i tak dalej. Z biegiem czasu opracował ładny, solidny interfejs API, który pozwolił nam robić wiele rzeczy, ale u jego podstaw jest przeznaczony do radzenia sobie z DOM, znajdowania elementów, zmiany interfejsu użytkownika i tak dalej. Pomyśl o tym jako o bezpośredniej współpracy z nakrętkami i śrubami.

Angular.Js został zbudowany jako warstwa na jQuery , aby dodać koncepcje MVC do inżynierii front-end. Zamiast udostępniać interfejsy API do pracy z DOM, Angular.Js zapewnia powiązanie danych, tworzenie szablonów, niestandardowe komponenty (podobne do interfejsu użytkownika jQuery , ale deklaratywne zamiast wyzwalania przez JS) i wiele więcej. Pomyśl o tym jako o pracy na wyższym poziomie, z komponentami, które możesz połączyć razem zamiast bezpośrednio na poziomie nakrętek i śrub.

Dodatkowo , angularjs daje struktur i pojęć, które odnoszą się do różnych projektów, takich jak kontrolery, usługi i dyrektyw. Sam jQuery może być używany na wiele sposobów (gazillion), aby robić to samo. Na szczęście jest to o wiele mniej w przypadku Angular.Js , co ułatwia wchodzenie i wychodzenie z projektów. Oferuje rozsądny sposób, w jaki wiele osób może wnieść swój wkład w ten sam projekt, bez konieczności ponownego uczenia się systemu od zera.


Krótkie porównanie może być takie-

jQuery

  • Może być łatwo używany przez tych, którzy mają odpowiednią wiedzę na temat selektorów CSS
  • Jest to biblioteka używana do manipulacji DOM
  • Nie ma to nic wspólnego z modelami
  • Łatwo manipuluj zawartością strony internetowej
  • Zastosuj style, aby zwiększyć atrakcyjność interfejsu użytkownika
  • Łatwe przejście DOM
  • Efekty i animacja
  • Proste wykonywanie połączeń AJAX i
  • Użyteczność narzędzi
  • nie mają funkcji wiązania dwukierunkowego
  • staje się złożony i trudny do utrzymania, gdy zwiększa się rozmiar projektu
  • Czasami musisz napisać więcej kodu, aby osiągnąć taką samą funkcjonalność jak w Angular.Js

Angular.Js

  • Jest to framework MVVM
  • Służy do tworzenia SPA (aplikacje jednostronicowe)
  • Ma kluczowe funkcje, takie jak routing, dyrektywy, dwukierunkowe wiązanie danych, modele, wstrzykiwanie zależności, testy jednostkowe itp
  • jest modułowy
  • Można zachować, gdy zwiększa się rozmiar projektu
  • jest szybki
  • Dwukierunkowe wiązanie danych Przyjazny dla REST wzorzec oparty na MVC
  • Głębokie linkowanie
  • Szablony
  • Wbudowany formularz Sprawdzanie poprawności
  • Wstrzykiwanie zależności
  • Lokalizacja
  • Pełne środowisko testowe
  • Komunikacja z serwerem

I wiele więcej

wprowadź opis zdjęcia tutaj

Myślę, że to pomaga.

Więcej można znaleźć -

Abrar Jahin
źródło
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
Jamshaid Kamran
źródło