Ich habe hauptsächlich die jQuery-Bibliothek verwendet und gerade mit AngularJS begonnen. Ich habe ein paar Tutorials lesen , wie Eckige zu verwenden, aber ich bin nicht klar, warum oder wann es zu benutzen, oder welche Vorteile ich im Vergleich zu nur mit jQuery finden.

Es scheint mir, dass Angular Sie an MVC denken lässt, was möglicherweise bedeutet, dass Sie Ihre Webseite als eine Kombination aus Vorlage und Daten anzeigen. Sie verwenden {{data bindings}}immer dann, wenn Sie das Gefühl haben, dynamische Daten zu haben. Angular stellt Ihnen dann einen $ scope-Handler zur Verfügung, den Sie statisch oder durch Aufrufe des Webservers auffüllen können. Dies ähnelt in charakteristischer Weise der JSP-Methode zum Entwerfen von Webseiten. Benötige ich dafür Angular?

Für eine einfache DOM-Manipulation, bei der keine Datenmanipulation erforderlich ist (z. B. Farbänderungen beim Mauszeiger, Ausblenden / Anzeigen von Elementen beim Klicken), ist jQuery oder Vanilla JS ausreichend und sauberer. Dies setzt voraus, dass das Modell in mvc von angle alles ist, was Daten auf der Seite widerspiegelt , und daher wirken sich CSS-Eigenschaften wie Farbe, Anzeige / Ausblenden usw. nicht auf das Modell aus . Hat Angular Vorteile gegenüber jQuery oder Vanilla JS für DOM-Manipulationen?

Was kann Angular tun, was es für die Entwicklung nützlich macht, verglichen mit dem, was jQuery zusammen mit Plugins tun kann?

Datenbindung

Sie erstellen Ihre Webseite und setzen {{Datenbindungen}} ein, wenn Sie das Gefühl haben, dynamische Daten zu haben. Angular stellt Ihnen dann einen $ scope-Handler zur Verfügung, den Sie ausfüllen können (statisch oder durch Aufrufe des Webservers).

Dies ist ein gutes Verständnis der Datenbindung. Ich denke, du hast das verstanden.

DOM-Manipulation

Für eine einfache DOM-Manipulation, bei der keine Datenmanipulation erforderlich ist (z. B. Farbänderungen beim Mauszeiger, Ausblenden / Anzeigen von Elementen beim Klicken), ist jQuery oder js der alten Schule ausreichend und sauberer. Dies setzt voraus, dass das Modell in mvc von angle alles ist, was Daten auf der Seite widerspiegelt, und daher wirken sich CSS-Eigenschaften wie Farbe, Anzeige / Ausblenden usw. nicht auf das Modell aus.

Ich kann Ihren Standpunkt hier sehen, dass "einfache" DOM-Manipulation sauberer ist, aber nur selten, und es müsste wirklich "einfach" sein. Ich denke, die DOM-Manipulation ist genau wie die Datenbindung einer der Bereiche, in denen Angular wirklich glänzt. Wenn Sie dies verstehen, können Sie auch sehen, wie Angular seine Ansichten berücksichtigt.

Ich werde zunächst den Angular-Weg mit einem Vanille-js-Ansatz zur DOM-Manipulation vergleichen. Traditionell denken wir, dass HTML nichts "tut" und schreiben es als solches. Inline-Js wie "onclick" usw. sind also eine schlechte Praxis, da sie das "Doing" in den Kontext von HTML stellen, was nicht "Do" ist. Angular stellt dieses Konzept auf den Kopf. Während Sie Ihre Ansicht schreiben, denken Sie, dass HTML in der Lage ist, viele Dinge zu "tun". Diese Funktion wird in eckigen Anweisungen abstrahiert. Wenn sie jedoch bereits vorhanden sind oder Sie sie geschrieben haben, müssen Sie nicht überlegen, wie sie ausgeführt wird. Sie verwenden lediglich die Leistung, die Ihnen in diesem "erweiterten" HTML-Code zur Verfügung gestellt wird eckig ermöglicht Ihnen die Verwendung. Dies bedeutet auch, dass ALLE Ihre Ansichtslogik wirklich in der Ansicht enthalten ist. nicht in Ihren Javascript-Dateien. Der Grund dafür ist wiederum, dass die in Ihren Javascript-Dateien geschriebenen Anweisungen die Fähigkeit von HTML erhöhen könnten, sodass Sie dem DOM die Sorge geben, sich selbst zu manipulieren (sozusagen). Ich werde mit einem einfachen Beispiel demonstrieren.

Dies ist das Markup, das wir verwenden möchten. Ich gab ihm einen intuitiven Namen.

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

Zunächst möchte ich nur kommentieren, dass wir bereits fertig sind , wenn wir unserem HTML diese Funktionalität über eine benutzerdefinierte Angular-Direktive gegeben haben . Das ist ein Hauch frischer Luft. Mehr dazu gleich.

Implementierung mit jQuery

Live-Demo hier (klicken).

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]'));

Implementierung mit Angular

Live-Demo hier (klicken).

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)'    
        });
      });
    }
  };
});

Ziemlich leicht, sehr sauber und das ist nur eine einfache Manipulation! Meiner Meinung nach gewinnt der Winkelansatz in jeder Hinsicht, insbesondere wie die Funktionalität abstrahiert und die Dom-Manipulation im DOM deklariert wird. Die Funktionalität ist über ein HTML-Attribut mit dem Element verknüpft, sodass das DOM nicht über einen Selektor abgefragt werden muss. Wir haben zwei nette Abschlüsse - einen Abschluss für die Direktivenfactory, bei dem Variablen für alle Verwendungen der Direktive gemeinsam genutzt werden und einen Abschluss für jede Verwendung der Direktive in der linkFunktion (oder compileFunktion).

Die bidirektionale Datenbindung und Anweisungen für die DOM-Manipulation sind nur der Anfang dessen, was Angular so großartig macht. Angular fördert, dass der gesamte Code modular, wiederverwendbar und leicht testbar ist, und enthält auch ein einseitiges App-Routing-System. Es ist wichtig zu beachten, dass jQuery eine Bibliothek häufig benötigter Convenience- / Cross-Browser-Methoden ist. Angular ist jedoch ein Framework mit allen Funktionen zum Erstellen von Apps für einzelne Seiten. Das eckige Skript enthält tatsächlich eine eigene "Lite" -Version von jQuery, sodass einige der wichtigsten Methoden verfügbar sind. Daher könnten Sie argumentieren, dass Angular IS mit jQuery (leicht) verwendet wird, aber Angular bietet viel mehr "Magie", um Sie beim Erstellen von Apps zu unterstützen.

Dies ist ein großartiger Beitrag für weitere verwandte Informationen: Wie denke ich in AngularJS, wenn ich einen jQuery-Hintergrund habe?

Allgemeine Unterschiede.

Die obigen Punkte richten sich an die spezifischen Anliegen des OP. Ich werde auch einen Überblick über die anderen wichtigen Unterschiede geben. Ich schlage vor, zusätzlich zu jedem Thema etwas zu lesen.

Angular und jQuery können nicht vernünftigerweise verglichen werden.

Angular ist ein Framework, jQuery ist eine Bibliothek. Frameworks haben ihren Platz und Bibliotheken haben ihren Platz. Es steht jedoch außer Frage, dass ein gutes Framework beim Schreiben einer Anwendung mehr Leistung besitzt als eine Bibliothek. Genau darum geht es in einem Framework. Sie können Ihren Code gerne in einfachem JS schreiben oder eine Bibliothek mit allgemeinen Funktionen hinzufügen oder ein Framework hinzufügen, um den Code, den Sie für die meisten Aufgaben benötigen, drastisch zu reduzieren. Daher ist eine angemessenere Frage:

Warum ein Framework verwenden?

Gute Frameworks können Ihnen dabei helfen, Ihren Code so zu gestalten, dass er modular (daher wiederverwendbar), trocken, lesbar, performant und sicher ist. jQuery ist kein Framework, daher hilft es in dieser Hinsicht nicht. Wir haben alle die typischen Wände des jQuery-Spaghetti-Codes gesehen. Dies ist nicht die Schuld von jQuery - es ist die Schuld von Entwicklern, die nicht wissen, wie man Code erstellt. Wenn die Entwickler jedoch wüssten, wie man Code erstellt, würden sie am Ende eine Art minimales "Framework" schreiben, um die Grundlage (Architektur usw.) bereitzustellen, die ich vorhin besprochen habe, oder sie würden etwas hinzufügen. Zum Beispiel Sie Möglicherweise wird RequireJS hinzugefügt, um als Teil Ihres Frameworks zum Schreiben von gutem Code zu fungieren.

Hier sind einige Dinge, die moderne Frameworks bieten:

• Vorlagen
• Datenbindung
• Routing (Single-Page-App)
• saubere, modulare, wiederverwendbare Architektur
• Sicherheit
• zusätzliche Funktionen / Merkmale für die Bequemlichkeit

Bevor ich weiter auf Angular eingehe, möchte ich darauf hinweisen, dass Angular nicht der einzige seiner Art ist. Durandal ist beispielsweise ein Framework, das auf jQuery, Knockout und RequireJS basiert. Auch hier kann jQuery nicht selbst bereitstellen, was Knockout, RequireJS und das gesamte darauf aufbauende Framework können. Es ist einfach nicht vergleichbar.

Wenn Sie einen Planeten zerstören müssen und einen Todesstern haben, verwenden Sie den Todesstern.

Angular (überarbeitet).

Aufbauend auf meinen vorherigen Punkten darüber, was Frameworks bieten, möchte ich die Art und Weise, wie Angular sie bereitstellt, loben und versuchen zu klären, warum dies jQuery allein sachlich überlegen ist.

DOM-Referenz.

In meinem obigen Beispiel ist es absolut unvermeidlich, dass sich jQuery an das DOM anschließen muss, um Funktionen bereitzustellen. Das bedeutet, dass die Ansicht (HTML) Bedenken hinsichtlich der Funktionalität hat (da sie mit einer Art Kennung gekennzeichnet ist - wie "Bildschieberegler") und JavaScript Bedenken hinsichtlich der Bereitstellung dieser Funktionalität hat. Angular eliminiert dieses Konzept durch Abstraktion. Richtig geschriebener Code mit Angular bedeutet, dass die Ansicht ihr eigenes Verhalten deklarieren kann. Wenn ich eine Uhr anzeigen möchte:

<clock></clock>

Getan.

Ja, wir müssen zu JavaScript gehen, damit dies etwas bedeutet, aber wir tun dies auf die entgegengesetzte Weise wie beim jQuery-Ansatz. Unsere Angular-Direktive (die sich in ihrer eigenen kleinen Welt befindet) hat das HTML "erweitert" und das HTML hakt die Funktionalität in sich ein.

MVW Architektur / Module / Abhängigkeitsinjektion

Mit Angular können Sie Ihren Code auf einfache Weise strukturieren. Ansichtssachen gehören in die Ansicht (HTML), erweiterte Ansichtsfunktionen gehören in Direktiven, andere Logik (wie Ajax-Aufrufe) und Funktionen gehören in Dienste, und die Verbindung von Diensten und Logik mit der Ansicht gehört in Steuerungen. Es gibt auch einige andere eckige Komponenten, die bei der Konfiguration und Änderung von Diensten usw. helfen. Alle von Ihnen erstellten Funktionen sind automatisch überall dort verfügbar, wo Sie sie benötigen, und zwar über das Injector-Subsystem, das die Abhängigkeitsinjektion in der gesamten Anwendung übernimmt. Wenn ich eine Anwendung (ein Modul) schreibe, zerlege ich sie in andere wiederverwendbare Module mit jeweils eigenen wiederverwendbaren Komponenten und füge sie dann in das größere Projekt ein. Sobald Sie ein Problem mit Angular gelöst haben, Wir haben es automatisch auf eine Weise gelöst, die für die zukünftige Wiederverwendung nützlich und strukturiert ist und problemlos in das nächste Projekt aufgenommen werden kann. EINEin RIESIGER Bonus für all dies ist, dass Ihr Code viel einfacher zu testen ist.

Es ist nicht einfach, Dinge in Angular "funktionieren" zu lassen.

GOTT SEI DANK. Der oben erwähnte jQuery-Spaghetti-Code resultierte aus einem Entwickler, der etwas "funktionierte" und dann weiterging. Sie können schlechten Angular-Code schreiben, aber das ist viel schwieriger, da Angular Sie dagegen ankämpft. Dies bedeutet, dass Sie die saubere Architektur (zumindest etwas) nutzen müssen. Mit anderen Worten, es ist schwieriger, schlechten Code mit Angular zu schreiben, aber bequemer, sauberen Code zu schreiben.

Angular ist alles andere als perfekt. Die Welt der Webentwicklung wächst und verändert sich ständig und es gibt neue und bessere Möglichkeiten, um Probleme zu lösen. Facebooks React und Flux haben zum Beispiel einige große Vorteile gegenüber Angular, haben aber ihre eigenen Nachteile. Nichts ist perfekt, aber Angular war und ist vorerst großartig. So wie jQuery einst der Webwelt geholfen hat, sich weiterzuentwickeln, hat Angular und viele werden es auch tun.