Wie unterscheidet sich AngularJS von jQuery?

388

Ich kenne nur eine js-Bibliothek und das ist jQuery .
Aber meine anderen Programmierer in der Gruppe ändern AngularJS als Standardbibliothek in einem neuen Projekt.

Ich weiß nichts darüber. Wie unterscheidet es sich von jQuery?
Ich habe bereits eine Reihe von Funktionen für ähnliche Aufgaben in jQuery ausgeführt. Kann ich mit AngularJS weiterhin jQuery-Inhalte verwenden?

Fata Morgana
quelle

Antworten:

414
  1. Während Angular 1 ein Framework war, ist Angular 2 eine Plattform . ( ref )

Für Entwickler bietet Angular2 einige Funktionen, die über das Anzeigen von Daten auf dem Bildschirm hinausgehen. Die Verwendung des Angular2 Cli-Tools kann Ihnen beispielsweise dabei helfen, Ihren Code vorab zu kompilieren und den erforderlichen Javascript-Code ( Tree-Shaking ) zu generieren , um die Download-Größe auf 35 KB zu verkleinern.

  1. Angular2 emulierte Shadow DOM. ( ref )

Dies öffnet eine Tür für Server-Rendering, das SEO-Probleme beheben und mit Nativescript usw. arbeiten kann, die in Browsern nicht funktionieren.

  • Die offizielle Dokumentenseite

  • Keynote zum ersten Tag von ng-conf 2016

  • Ressourcenlinks Original: Grundsätzlich ist jQuery ein großartiges Werkzeug, mit dem Sie DOM-Elemente bearbeiten und steuern können. Wenn Sie sich nur auf DOM-Elemente und kein Daten-CRUD konzentrieren, z. B. das Erstellen einer Website und nicht einer Webanwendung, ist jQuery eines der Top-Tools. (Sie können AngularJS auch für diesen Zweck verwenden.)

AngularJS ist a Framework . Es hat folgende Funktionen

  1. Zweiwege-Datenbindung
  2. MVW-Muster (MVC-ish)
  3. Vorlage
  4. Benutzerdefinierte Direktive (wiederverwendbare Komponenten, benutzerdefiniertes Markup)
  5. REST-freundlich
  6. Deep Linking (Link für jede dynamische Seite einrichten)
  7. Formularvalidierung
  8. Serverkommunikation
  9. Lokalisierung
  10. Abhängigkeitsspritze
  11. Vollständige Testumgebung (beide Geräte, e2e)

Überprüfen Sie diese Präsentation und diese großartige Einführung

Vergessen Sie nicht, das offizielle Entwicklerhandbuch zu lesen

Oder lernen Sie es aus diesen fantastischen Video-Tutorials

Wenn Sie mehr Tutorial-Videos sehen möchten, lesen Sie diesen Beitrag, Sammlung der besten 60+ AngularJS-Tutorials .

Sie können jQuery problemlos mit AngularJS verwenden.

Tatsächlich verwendet AngularJS jQuery Lite, ein großartiges Tool.

Aus den FAQ

Verwendet Angular die jQuery-Bibliothek?

Ja, Angular kann jQuery verwenden, wenn es in Ihrer App vorhanden ist, während die Anwendung gebootet wird. Wenn jQuery in Ihrem Skriptpfad nicht vorhanden ist, greift Angular auf seine eigene Implementierung der Teilmenge von jQuery zurück, die wir jQLite nennen.

Versuchen Sie jedoch nicht, das DOM in AngularJS-Controllern mit jQuery zu ändern, sondern tun Sie dies in Ihren Anweisungen.

Aktualisieren:

Angular2 wird freigegeben. Hier ist eine großartige Liste von Ressourcen für den Anfang

Maxisam
quelle
8
Muss ich die vollständige Anwendung in Angular js entwickeln oder kann ich das auf wenigen Seiten und auf wenigen Apges verwenden? Ich verwende einfache jquery
Mirage
8
+1 Tolle Antwort. Ich würde sagen, dass Angular dem MVVM-Muster näher kommt.
GFoley83
8
Ich bin mir ziemlich sicher, dass Angular ein MVW ist
iConnor
2
Für einige Jahre war es in der Nähe von MVC. Aber jetzt Re-Factoring und API-Verbesserung, ist es näher an MVVM. Funktioniert in Angular $ scope wie eine VM (Ansichtsmodell).
Unbesiegbar
14
Für alle zukunfts Menschen fragen (wie ich), MVW == Model-View-Was auch immer , wie in " m odel- v iew- w hatever-works-for-you" . Mit anderen Worten, MV * .
David Frye
40

Ich möchte aus Entwicklersicht etwas zum AngularJS- Unterschied zu jQuery hinzufügen .

In AngularJS müssen Sie eine sehr strukturierte Sicht und Herangehensweise an das haben, was Sie erreichen möchten. Es ist kaum linear , eine Aufgabe zu erledigen, sondern der Austausch zwischen verschiedenen Objekten kümmert sich um die Anforderungen und Aktionen, was dann notwendig ist, da Angular ein MVC-basiertes Framework ist. Es erfordert auch einen zumindest allgemeinen Entwurf der endgültigen Anwendung, da die Codierung stark davon abhängt, wie die Interaktionen abgeschlossen werden sollen.

jQuery ist wie eine freie Poesie. Sie schreiben Zeilen und halten einige Beziehungen und Impulse aufrecht, die für die Erfüllung Ihrer Aufgabe angemessen sind.

Obwohl Sie in Angular JS einige Regeln befolgen und den Schwung und die Beziehungen beibehalten sollten, ähnelt es vielleicht eher dem klassischen spencerianischen Sonett (einem berühmten klassischen Dichter), dessen Gedicht strukturell und an viele Regeln gebunden ist.

Im Vergleich zu AngularJS ähnelt jQuery eher einer Sammlung von Codes und Funktionen (die sich, wie bereits erwähnt, hervorragend für die DOM-Manipulation und das Erreichen schneller Effekte eignet), während AngularJS ein echtes Framework ist, mit dem Entwickler ein Unternehmensweb erstellen können -Anwendung mit viel Datenbindung und Austausch innerhalb eines hervorragend organisierten Routings und Managements.

Darüber hinaus ist AngularJS nicht von jQuery abhängig , um seine Aufgabe abzuschließen. Es hat zwei sehr hervorragende Funktionen, die in jQuery in keiner Weise zu finden sind:

1- Angular JS zeigt Ihnen, wie Sie CODEEN und ein Ziel erreichen, und nicht nur, wie Sie ein Ziel auf irgendeine Weise erreichen. Erwähnenswert ist, dass AngularJS den Kern und das Herz von Javascripts voll ausnutzt und Ihnen den Weg ebnet, Techniken wie DI (Dependency-Injection) in Ihre App zu integrieren. Um mit AngularJS zu arbeiten, sollten (oder müssen) Sie fortgeschrittenere Codierungstechniken mit Javascript erlernen.

2- Angular JS ist völlig unabhängig, um Anweisungen zu handhaben und Ihre App zu strukturieren. Sie könnten dann einfach behaupten, dass jQuery dasselbe tun kann (Unabhängigkeit), aber tatsächlich hat AngularJS, wie in den obigen Zeilen mehrmals erwähnt, Unabhängigkeit auf die bestmögliche strukturell MVC-basierte Weise.

Eine letzte Anmerkung ist, dass es keinen Krieg der Namen gibt, da es weitaus beunruhigend ist, voreingenommen oder subjektiv zu sein. Die Größe und Größe von jQuery wurde bewiesen, aber ihre Verwendung und Einschränkungen (für jedes Framework oder jede Software) sind das Anliegen der Diskussion und ähnlicher Debatten.

Aktualisieren:

Die Verwendung von AngularJS ist entscheidend, da es in Bezug auf die Implementierung teuer ist, aber eine starke Basis für die zukünftige Erweiterung, Transformation und Wartung der Anwendung bildet. AngularJS ist für die New World of Web. Es zielt darauf ab, Anwendungen zu erstellen, die sich durch ihren geringsten Ressourcenverbrauch (Laden nur der erforderlichen Ressourcen vom Server), eine schnelle Reaktionszeit und ein hohes Maß an Wartbarkeit und Erweiterbarkeit auszeichnen, die in ein strukturiertes System eingebunden sind.

Mostafa Talebi
quelle
"Um mit AngularJS zu arbeiten, sollten (oder müssen) Sie mehr gehobene Codierungstechniken mit Javascript lernen" - geben Sie mir bitte Beispiele dafür, was Sie unter erhöhten Techniken verstehen.
14.
@MostafaTalebi, ich habe nur Spaß gemacht, aber diesen Teil nicht wirklich verstanden "JavaScript ist eher ein Konzept?" was bedeutet das?? Könntest du mehr erklären? ehh gibt es sowieso wir melden uns ??
Azerafati
Ich meine, es ist ein Skript :)))
Mostafa Talebi
Ich habe eine Sache durcheinander gebracht! Zum Beispiel verwenden wir PHP für die Serverseite und verwenden unser Framework basierend auf dem MVC-Konzept. In der Vorlage, in der wir Javascript verwenden, verwenden wir auch Angular Js. Hier ist Angular Js MVC nutzlos, nicht wahr?
Farhad
28

AngularJS: AngularJS dient zur Entwicklung schwerer Webanwendungen. AngularJS kann jQuery verwenden, wenn es in der Web-App vorhanden ist, während die Anwendung gebootet wird. Wenn es im Skriptpfad nicht vorhanden ist, greift AngularJS auf seine eigene Implementierung der Teilmenge von jQuery zurück.

JQuery: jQuery ist eine kleine, schnelle und funktionsreiche JavaScript-Bibliothek. Dies vereinfacht das Durchlaufen und Bearbeiten von HTML-Dokumenten, die Ereignisbehandlung, die Animation und Ajax erheblich. jQuery vereinfacht viele der komplizierten Dinge aus JavaScript, wie AJAX-Aufrufe und DOM-Manipulationen.

Lesen Sie hier mehr Details: anglejs-vs-jquery

kmario23
quelle
20

Ich denke, dies ist ein sehr gutes Diagramm, das die Unterschiede kurz beschreibt. Ein kurzer Blick darauf zeigt die meisten Unterschiede.

Geben Sie hier die Bildbeschreibung ein

Eine Sache, die ich hinzufügen möchte, ist, dass AngularJS dem MVVM- Entwurfsmuster folgen kann , während jQuery keinem der objektorientierten Standardmuster folgt.

Pritam Banerjee
quelle
12

Sie arbeiten auf verschiedenen Ebenen.

Der einfachste Weg, um den Unterschied aus der Sicht eines Anfängers zu sehen, besteht darin, dass jQuery im Wesentlichen eine Zusammenfassung von JavaScript ist. Die Art und Weise, wie wir eine Seite für JavaScript entwerfen, entspricht in etwa der Vorgehensweise für jQuery . Beginnen Sie mit dem DOM und erstellen Sie darüber eine Verhaltensebene. Nicht so bei Angular.Js . Der Prozess beginnt wirklich von Grund auf, sodass das Endergebnis die gewünschte Ansicht ist.

Mit jQuery führen Sie Dom-Manipulationen durch, mit Angular.Js erstellen Sie ganze Webanwendungen.


jQuery wurde entwickelt, um die verschiedenen Browser-Eigenheiten zu abstrahieren und mit dem DOM zu arbeiten, ohne IE6-Prüfungen usw. hinzufügen zu müssen. Im Laufe der Zeit wurde eine schöne, robuste API entwickelt, mit der wir viele Dinge tun konnten. Im Kern ist sie jedoch dazu gedacht, mit dem DOM umzugehen, Elemente zu finden, die Benutzeroberfläche zu ändern und so weiter. Stellen Sie sich vor, Sie arbeiten direkt mit Schrauben und Muttern.

Angular.Js wurde als Layer auf jQuery erstellt , um dem Front-End-Engineering MVC- Konzepte hinzuzufügen . Anstatt Ihnen APIs für die Arbeit mit DOM zur Verfügung zu stellen, bietet Angular.Js Ihnen Datenbindung , Vorlagen , benutzerdefinierte Komponenten (ähnlich der jQuery-Benutzeroberfläche , aber deklarativ, anstatt über JS auszulösen) und vieles mehr. Stellen Sie sich vor, Sie arbeiten auf einer höheren Ebene mit Komponenten, die Sie zusammenhaken können, anstatt direkt auf der Ebene der Schrauben und Muttern.

Darüber hinaus bietet Angular.Js Strukturen und Konzepte, die für verschiedene Projekte gelten, z. B. Controller, Services und Direktiven. jQuery selbst kann auf mehrere (Millionen) Arten verwendet werden, um dasselbe zu tun. Zum Glück ist das bei Angular.Js viel weniger , was das Ein- und Aussteigen in Projekte erleichtert. Es bietet eine vernünftige Möglichkeit für mehrere Personen, zum selben Projekt beizutragen, ohne ein System von Grund auf neu lernen zu müssen.


Ein kurzer Vergleich kann dies sein

jQuery

  • Kann leicht von Personen verwendet werden, die über ausreichende Kenntnisse in CSS-Selektoren verfügen
  • Es ist eine Bibliothek, die für DOM-Manipulationen verwendet wird
  • Hat nichts mit Modellen zu tun
  • Bearbeiten Sie einfach den Inhalt einer Webseite
  • Wenden Sie Stile an, um die Benutzeroberfläche attraktiver zu gestalten
  • Einfache DOM-Durchquerung
  • Effekte und Animation
  • Einfach, AJAX-Anrufe zu tätigen und
  • Benutzerfreundlichkeit der Dienstprogramme
  • haben keine Zwei-Wege-Bindungsfunktion
  • wird komplex und schwierig zu warten, wenn die Größe eines Projekts zunimmt
  • Manchmal müssen Sie mehr Code schreiben, um die gleiche Funktionalität wie in Angular.Js zu erreichen

Angular.Js

  • Es ist ein MVVM-Framework
  • Wird zum Erstellen von SPA (Single Page Applications) verwendet.
  • Es verfügt über wichtige Funktionen wie Routing, Direktiven, bidirektionale Datenbindung, Modelle, Abhängigkeitsinjektion, Komponententests usw.
  • ist modular
  • Wartbar, wenn die Projektgröße zunimmt
  • ist schnell
  • Zweiwege-Datenbindung REST-freundliches MVC-basiertes Muster
  • Deep Linking
  • Vorlagen
  • Überprüfung des integrierten Formulars
  • Abhängigkeitsspritze
  • Lokalisierung
  • Vollständige Testumgebung
  • Serverkommunikation

Und vieles mehr

Geben Sie hier die Bildbeschreibung ein

Denke, das hilft.

Mehr kann gefunden werden -

Abrar Jahin
quelle
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
quelle