Angenommen, ich bin mit der Entwicklung clientseitiger Anwendungen in jQuery vertraut , möchte aber jetzt AngularJS verwenden . Können Sie den notwendigen Paradigmenwechsel beschreiben? Hier sind einige Fragen, die Ihnen helfen können, eine Antwort zu finden:

• Wie entwerfe und gestalte ich clientseitige Webanwendungen unterschiedlich? Was ist der größte Unterschied?
• Was soll ich aufhören zu tun / benutzen? Was soll ich stattdessen tun / verwenden?
• Gibt es serverseitige Überlegungen / Einschränkungen?

Ich suche keinen detaillierten Vergleich zwischen jQueryund AngularJS.

1. Entwerfen Sie Ihre Seite nicht und ändern Sie sie dann mit DOM- Manipulationen

In jQuery entwerfen Sie eine Seite und machen sie dann dynamisch. Dies liegt daran, dass jQuery für die Erweiterung entwickelt wurde und aus dieser einfachen Prämisse heraus unglaublich gewachsen ist.

In AngularJS müssen Sie jedoch von Grund auf mit Blick auf Ihre Architektur beginnen. Anstatt zunächst zu denken: "Ich habe dieses Teil des DOM und möchte, dass es X ausführt", müssen Sie mit dem beginnen, was Sie erreichen möchten, und dann Ihre Anwendung entwerfen und schließlich Ihre Ansicht entwerfen.

2. Erweitern Sie jQuery nicht mit AngularJS

Beginnen Sie auch nicht mit der Idee, dass jQuery X, Y und Z ausführt, also füge ich AngularJS für Modelle und Controller hinzu. Dies ist wirklich verlockend, wenn Sie gerade erst anfangen. Deshalb empfehle ich neuen AngularJS-Entwicklern immer, jQuery überhaupt nicht zu verwenden, zumindest bis sie sich daran gewöhnt haben, Dinge auf "Angular Way" zu tun.

Ich habe viele Entwickler hier und auf der Mailingliste gesehen, die diese aufwändigen Lösungen mit jQuery-Plugins mit 150 oder 200 Codezeilen erstellt haben, die sie dann mit einer Sammlung von Rückrufen und $applys in AngularJS einkleben , die verwirrend und verworren sind. aber sie bringen es schließlich zum Laufen! Das Problem ist, dass in den meisten Fällen das jQuery-Plugin in AngularJS in einem Bruchteil des Codes neu geschrieben werden kann, wobei plötzlich alles verständlich und unkompliziert wird.

Das Fazit lautet: Wenn Sie eine Lösung finden, denken Sie zuerst an AngularJS. Wenn Ihnen keine Lösung einfällt, fragen Sie die Community. wenn nach der , dass alle es keine einfache Lösung gibt, dann fühlen Sie sich frei für die jQuery zu erreichen. Aber lass jQuery nicht zu einer Krücke werden, sonst wirst du AngularJS nie beherrschen.

3. Denken Sie immer in Architektur

Erste Know dass Single-Page - Anwendungen sind Anwendungen . Sie sind keine Webseiten. Wir müssen also wie ein serverseitiger Entwickler und nicht wie ein clientseitiger Entwickler denken. Wir müssen darüber nachdenken, wie wir unsere Anwendung in einzelne, erweiterbare und testbare Komponenten aufteilen können.

Also dann , wie tun Sie das? Wie "denkst du in AngularJS"? Hier sind einige allgemeine Prinzipien im Gegensatz zu jQuery.

Die Ansicht ist die "offizielle Aufzeichnung"

In jQuery ändern wir programmgesteuert die Ansicht. Wir könnten ein Dropdown-Menü haben, das wie folgt definiert ist ul:

<ul class="main-menu">
    <li class="active">
        <a href="#/home">Home</a>
    </li>
    <li>
        <a href="#/menu1">Menu 1</a>
        <ul>
            <li><a href="#/sm1">Submenu 1</a></li>
            <li><a href="#/sm2">Submenu 2</a></li>
            <li><a href="#/sm3">Submenu 3</a></li>
        </ul>
    </li>
    <li>
        <a href="#/home">Menu 2</a>
    </li>
</ul>

In jQuery würden wir in unserer Anwendungslogik Folgendes aktivieren:

$('.main-menu').dropdownMenu();

Wenn wir uns nur die Ansicht ansehen, ist es nicht sofort offensichtlich, dass es hier irgendwelche Funktionen gibt. Für kleine Anwendungen ist das in Ordnung. Bei nicht trivialen Anwendungen werden die Dinge jedoch schnell verwirrend und schwer zu warten.

In AngularJS ist die Ansicht jedoch die offizielle Aufzeichnung der auf Ansichten basierenden Funktionalität. Unsere ulErklärung würde stattdessen so aussehen:

<ul class="main-menu" dropdown-menu>
    ...
</ul>

Diese beiden machen dasselbe, aber in der AngularJS-Version weiß jeder, der sich die Vorlage ansieht, was passieren soll. Immer wenn ein neues Mitglied des Entwicklungsteams an Bord kommt, kann sie sich das ansehen und dann wissen, dass es eine Richtlinie gibt , die darauf angewendet wird dropdownMenu. Sie muss nicht die richtige Antwort finden oder einen Code durchsehen. Die Aussicht sagte uns, was passieren sollte. Viel sauberer.

Entwickler, die AngularJS noch nicht kennen, stellen häufig die Frage: Wie finde ich alle Links einer bestimmten Art und füge ihnen eine Direktive hinzu? Der Entwickler ist immer verblüfft, wenn wir antworten: Sie nicht. Aber der Grund, warum Sie das nicht tun, ist, dass dies wie halb jQuery, halb AngularJS und nicht gut ist. Das Problem hierbei ist, dass der Entwickler versucht, "jQuery" im Kontext von AngularJS auszuführen. Das wird nie gut funktionieren. Die Ansicht ist die offizielle Aufzeichnung. Außerhalb einer Richtlinie (mehr dazu weiter unten), die Sie nie, nie, nie das DOM ändern. Und Richtlinien werden in der Ansicht angewendet , sodass die Absicht klar ist.

Denken Sie daran: Entwerfen Sie nicht und markieren Sie dann. Sie müssen Architekten und dann entwerfen.

Datenbindung

Dies ist bei weitem eine der beeindruckendsten Funktionen von AngularJS und macht die im vorherigen Abschnitt erwähnten Arten von DOM-Manipulationen überflüssig. AngularJS aktualisiert Ihre Ansicht automatisch, sodass Sie dies nicht tun müssen! In jQuery reagieren wir auf Ereignisse und aktualisieren dann den Inhalt. Etwas wie:

$.ajax({
  url: '/myEndpoint.json',
  success: function ( data, status ) {
    $('ul#log').append('<li>Data Received!</li>');
  }
});

Für eine Ansicht, die so aussieht:

<ul class="messages" id="log">
</ul>

Abgesehen von der Vermischung von Bedenken haben wir auch die gleichen Probleme, Absichten zu bezeichnen, die ich zuvor erwähnt habe. Noch wichtiger war jedoch, dass wir einen DOM-Knoten manuell referenzieren und aktualisieren mussten. Und wenn wir einen Protokolleintrag löschen wollen, müssen wir auch dafür gegen das DOM codieren. Wie testen wir die Logik außerhalb des DOM? Und was ist, wenn wir die Präsentation ändern wollen?

Das ist ein bisschen chaotisch und ein bisschen zerbrechlich. Aber in AngularJS können wir dies tun:

$http( '/myEndpoint.json' ).then( function ( response ) {
    $scope.log.push( { msg: 'Data Received!' } );
});

Und unsere Ansicht kann so aussehen:

<ul class="messages">
    <li ng-repeat="entry in log">{{ entry.msg }}</li>
</ul>

Aber im Übrigen könnte unsere Ansicht so aussehen:

<div class="messages">
    <div class="alert" ng-repeat="entry in log">
        {{ entry.msg }}
    </div>
</div>

Und jetzt verwenden wir anstelle einer ungeordneten Liste Bootstrap-Warnfelder. Und wir mussten den Controller-Code nie ändern! Noch wichtiger ist jedoch , dass sich die Ansicht auch ändert , unabhängig davon, wo oder wie das Protokoll aktualisiert wird. Automatisch. Ordentlich!

Obwohl ich es hier nicht gezeigt habe, erfolgt die Datenbindung in beide Richtungen. Diese Protokollnachrichten können also auch in der Ansicht bearbeitet werden, indem Sie Folgendes tun : <input ng-model="entry.msg" />. Und es gab viel Freude.

Deutliche Modellebene

In jQuery ähnelt das DOM dem Modell. In AngularJS verfügen wir jedoch über eine separate Modellebene, die wir unabhängig von der Ansicht beliebig verwalten können. Dies hilft bei der obigen Datenbindung, hält die Trennung von Bedenken aufrecht und führt zu einer weitaus besseren Testbarkeit. Andere Antworten erwähnten diesen Punkt, also lasse ich es einfach dabei.

Trennung von Bedenken

Und all das hängt mit diesem übergreifenden Thema zusammen: Halten Sie Ihre Bedenken getrennt. Ihre Ansicht ist die offizielle Aufzeichnung dessen, was (größtenteils) passieren soll. Ihr Modell repräsentiert Ihre Daten. Sie haben eine Service-Schicht, um wiederverwendbare Aufgaben auszuführen. Sie führen DOM-Manipulationen durch und erweitern Ihre Sichtweise durch Anweisungen. und Sie kleben alles zusammen mit Controllern. Dies wurde auch in anderen Antworten erwähnt, und das einzige, was ich hinzufügen möchte, betrifft die Testbarkeit, die ich in einem anderen Abschnitt weiter unten diskutiere.

Abhängigkeitsspritze

Um uns bei der Trennung von Bedenken zu helfen, ist die Abhängigkeitsinjektion (DI). Wenn Sie aus einer serverseitigen Sprache (von Java bis PHP ) stammen, sind Sie wahrscheinlich bereits mit diesem Konzept vertraut. Wenn Sie jedoch ein clientseitiger Typ von jQuery sind, kann dieses Konzept von albern über überflüssig bis hin zu Hipster reichen . Aber es ist nicht. :-)

Aus einer breiten Perspektive bedeutet DI, dass Sie Komponenten sehr frei deklarieren können und dann von jeder anderen Komponente einfach eine Instanz davon anfordern können, und es wird gewährt. Sie müssen nichts über die Ladereihenfolge, die Speicherorte der Dateien oder ähnliches wissen. Die Leistung ist möglicherweise nicht sofort sichtbar, aber ich werde nur ein (allgemeines) Beispiel nennen: Testen.

Angenommen, in unserer Anwendung benötigen wir einen Service, der den serverseitigen Speicher über eine REST- API und je nach Anwendungsstatus auch den lokalen Speicher implementiert . Wenn wir Tests auf unseren Controllern ausführen, möchten wir nicht mit dem Server kommunizieren müssen - wir testen schließlich den Controller . Wir können einfach einen Mock-Service mit demselben Namen wie unsere Originalkomponente hinzufügen, und der Injektor stellt sicher, dass unser Controller den gefälschten automatisch erhält - unser Controller kennt den Unterschied nicht und muss ihn nicht kennen.

Apropos Testen ...

4. Testgetriebene Entwicklung - immer

Dies ist wirklich Teil von Abschnitt 3 über Architektur, aber es ist so wichtig, dass ich ihn als eigenen Abschnitt der obersten Ebene einsetze.

Wie viele der vielen jQuery-Plugins, die Sie gesehen, verwendet oder geschrieben haben, hatten eine zugehörige Testsuite? Nicht sehr viele, weil jQuery dafür nicht sehr zugänglich ist. Aber AngularJS ist.

In jQuery besteht die einzige Möglichkeit zum Testen häufig darin, die Komponente unabhängig mit einer Beispiel- / Demoseite zu erstellen, anhand derer unsere Tests DOM-Manipulationen durchführen können. Dann müssen wir eine Komponente separat entwickeln und dann in unsere Anwendung integrieren. Wie unpraktisch! Bei der Entwicklung mit jQuery entscheiden wir uns so oft für iterative statt testgetriebene Entwicklung. Und wer könnte uns die Schuld geben?

Da wir jedoch unterschiedliche Anliegen haben, können wir in AngularJS iterativ eine testgetriebene Entwicklung durchführen! Nehmen wir zum Beispiel an, wir möchten eine supereinfache Anweisung, die in unserem Menü angibt, wie unsere aktuelle Route lautet. Wir können aus Sicht unserer Bewerbung erklären, was wir wollen:

<a href="/hello" when-active>Hello</a>

Okay, jetzt können wir einen Test für die nicht existierende when-activeDirektive schreiben :

it( 'should add "active" when the route changes', inject(function() {
    var elm = $compile( '<a href="https://stackoverflow.com/hello" when-active>Hello</a>' )( $scope );

    $location.path('/not-matching');
    expect( elm.hasClass('active') ).toBeFalsey();

    $location.path( '/hello' );
    expect( elm.hasClass('active') ).toBeTruthy();
}));

Und wenn wir unseren Test ausführen, können wir bestätigen, dass er fehlschlägt. Erst jetzt sollten wir unsere Richtlinie erstellen:

.directive( 'whenActive', function ( $location ) {
    return {
        scope: true,
        link: function ( scope, element, attrs ) {
            scope.$on( '$routeChangeSuccess', function () {
                if ( $location.path() == element.attr( 'href' ) ) {
                    element.addClass( 'active' );
                }
                else {
                    element.removeClass( 'active' );
                }
            });
        }
    };
});

Unser Test ist jetzt bestanden und unser Menü funktioniert wie gewünscht. Unsere Entwicklung ist sowohl iterativ als auch testgetrieben. Verdammt cool.

5. Direktiv sind Direktiven nicht in jQuery gepackt

Sie werden oft hören, "nur DOM-Manipulationen in einer Direktive durchführen". Dies ist eine Notwendigkeit. Behandle es mit gebührender Achtung!

Aber lass uns etwas tiefer tauchen ...

Einige Direktiven dekorieren nur das, was bereits in der Ansicht ist (denken ngClass) und führen daher manchmal sofort eine DOM-Manipulation durch und sind dann im Grunde genommen erledigt. Wenn eine Direktive jedoch wie ein "Widget" ist und eine Vorlage enthält, sollte sie auch die Trennung von Bedenken berücksichtigen. Das heißt, die Vorlage bleiben sollte weitgehend unabhängig von ihrer Implementierung in der Link und Controller - Funktionen.

AngularJS wird mit einer ganzen Reihe von Werkzeugen geliefert, um dies sehr einfach zu machen. mit können ngClasswir die Klasse dynamisch aktualisieren; ngModelermöglicht die bidirektionale Datenbindung; ngShowund ngHideprogrammgesteuert ein Element ein- oder ausblenden; und viele mehr - einschließlich derer, die wir selbst schreiben. Mit anderen Worten, wir können alle Arten von Attraktivität ohne DOM-Manipulation erzielen . Je weniger DOM-Manipulationen durchgeführt werden, desto einfacher lassen sich Anweisungen testen, desto einfacher können sie formatiert werden, desto einfacher können sie in Zukunft geändert werden und desto wiederverwendbarer und verteilbarer sind sie.

Ich sehe viele Entwickler, die neu in AngularJS sind und Direktiven als Ort verwenden, um eine Menge jQuery zu werfen. Mit anderen Worten, sie denken, "da ich keine DOM-Manipulation im Controller durchführen kann, nehme ich diesen Code in eine Direktive". Das ist sicherlich viel besser, aber oft ist es immer noch falsch .

Denken Sie an den Logger, den wir in Abschnitt 3 programmiert haben. Auch wenn wir das in eine Direktive aufnehmen, wollen wir es trotzdem auf "Angular Way" machen. Es sind immer noch keine DOM-Manipulationen erforderlich! Es gibt viele Male, in denen eine DOM-Manipulation erforderlich ist, aber es ist viel seltener als Sie denken! Fragen Sie sich vor der DOM-Manipulation an einer beliebigen Stelle in Ihrer Anwendung, ob dies wirklich erforderlich ist. Es könnte einen besseren Weg geben.

Hier ist ein kurzes Beispiel, das das Muster zeigt, das ich am häufigsten sehe. Wir wollen einen umschaltbaren Knopf. (Hinweis: Dieses Beispiel ist ein wenig erfunden und ausführlich, um kompliziertere Fälle darzustellen, die auf genau die gleiche Weise gelöst werden.)

.directive( 'myDirective', function () {
    return {
        template: '<a class="btn">Toggle me!</a>',
        link: function ( scope, element, attrs ) {
            var on = false;

            $(element).click( function () {
                on = !on;
                $(element).toggleClass('active', on);
            });
        }
    };
});

Daran sind einige Dinge falsch:

1. Erstens war jQuery nie notwendig. Wir haben hier nichts getan, was jQuery überhaupt brauchte!
2. Zweitens gibt es keinen Grund, es hier zu verwenden, selbst wenn wir jQuery bereits auf unserer Seite haben. Wir können es einfach verwenden angular.elementund unsere Komponente funktioniert weiterhin, wenn sie in ein Projekt ohne jQuery eingefügt wird.
3. Drittens : Selbst unter der Annahme , jQuery wurde für diese Richtlinie an der Arbeit erforderlich, jqLite ( angular.element) wird immer jQuery verwenden , wenn es geladen wurde! Also brauchen wir das nicht zu benutzen $- wir können es einfach benutzen angular.element.
4. Viertens, eng verwandt mit dem dritten, ist, dass jqLite-Elemente nicht eingewickelt werden müssen $- das element, was an die linkFunktion übergeben wird, wäre bereits ein jQuery-Element!
5. Und fünftens, was wir in den vorherigen Abschnitten erwähnt haben, warum mischen wir Vorlagenmaterial in unsere Logik?

Diese Richtlinie kann viel einfacher umgeschrieben werden (auch in sehr komplizierten Fällen!):

.directive( 'myDirective', function () {
    return {
        scope: true,
        template: '<a class="btn" ng-class="{active: on}" ng-click="toggle()">Toggle me!</a>',
        link: function ( scope, element, attrs ) {
            scope.on = false;

            scope.toggle = function () {
                scope.on = !scope.on;
            };
        }
    };
});

Auch hier befindet sich das Vorlagenmaterial in der Vorlage, sodass Sie (oder Ihre Benutzer) es problemlos gegen eines austauschen können, das jedem erforderlichen Stil entspricht, und die Logik musste nie berührt werden. Wiederverwendbarkeit - Boom!

Und es gibt noch all diese anderen Vorteile, wie das Testen - es ist einfach! Unabhängig davon, was in der Vorlage enthalten ist, wird die interne API der Direktive nie berührt, sodass das Refactoring einfach ist. Sie können die Vorlage beliebig ändern, ohne die Direktive zu berühren. Und egal was Sie ändern, Ihre Tests bestehen immer noch.

w00t!

Wenn Direktiven also nicht nur Sammlungen von jQuery-ähnlichen Funktionen sind, welche? Direktiven sind eigentlich Erweiterungen von HTML . Wenn HTML etwas nicht tut, wofür Sie es benötigen, schreiben Sie eine Anweisung, um es für Sie zu tun, und verwenden es dann so, als ob es Teil von HTML wäre.

Anders ausgedrückt, wenn AngularJS etwas nicht tut aus dem Kasten heraus , denken , wie das Team es erreichen würde direkt mit passen ngClick, ngClasset al.

Zusammenfassung

Verwenden Sie nicht einmal jQuery. Schließen Sie es nicht einmal ein. Es wird dich zurückhalten. Und wenn Sie zu einem Problem kommen, von dem Sie glauben, dass Sie es bereits in jQuery zu lösen wissen, bevor Sie nach dem greifen $, versuchen Sie, darüber nachzudenken, wie es innerhalb der Grenzen des AngularJS zu tun ist. Wenn Sie es nicht wissen, fragen Sie! 19 Mal von 20, der beste Weg, dies zu tun, erfordert nicht jQuery, und der Versuch, es mit jQuery zu lösen, führt zu mehr Arbeit für Sie.

Imperativ → deklarativ

In jQuery werden Selektoren verwendet, um DOM- Elemente zu finden und dann Ereignishandler an sie zu binden / zu registrieren. Wenn ein Ereignis ausgelöst wird, wird dieser (zwingende) Code ausgeführt, um das DOM zu aktualisieren / zu ändern.

In AngularJS möchten Sie eher an Ansichten als an DOM-Elemente denken . Ansichten sind (deklaratives) HTML, das AngularJS- Direktiven enthält . Direktiven richten die Event-Handler hinter den Kulissen für uns ein und geben uns eine dynamische Datenbindung. Selektoren werden selten verwendet, sodass der Bedarf an IDs (und einigen Arten von Klassen) stark verringert wird. Ansichten sind an Modelle gebunden (über Bereiche). Ansichten sind eine Projektion des Modells. Ereignisse ändern Modelle (dh Daten, Bereichseigenschaften), und die Ansichten, die diese Modelle projizieren, werden "automatisch" aktualisiert.

Denken Sie in AngularJS an Modelle und nicht an von jQuery ausgewählte DOM-Elemente, die Ihre Daten enthalten. Stellen Sie sich Ansichten als Projektionen dieser Modelle vor, anstatt Rückrufe zu registrieren, um das zu manipulieren, was der Benutzer sieht.

Trennung von Bedenken

jQuery verwendet unauffälliges JavaScript - Verhalten (JavaScript) ist von der Struktur (HTML) getrennt.

AngularJS verwendet Controller und Direktiven (von denen jede ihren eigenen Controller haben und / oder Kompilierungs- und Verknüpfungsfunktionen haben kann), um das Verhalten aus der Ansicht / Struktur (HTML) zu entfernen. Angular verfügt auch über Dienste und Filter, mit denen Sie Ihre Anwendung trennen / organisieren können.

Siehe auch https://stackoverflow.com/a/14346528/215945

Anwendungsdesign

Ein Ansatz zum Entwerfen einer AngularJS-Anwendung:

1. Denken Sie an Ihre Modelle. Erstellen Sie Dienste oder Ihre eigenen JavaScript-Objekte für diese Modelle.
2. Überlegen Sie, wie Sie Ihre Modelle präsentieren möchten - Ihre Ansichten. Erstellen Sie HTML-Vorlagen für jede Ansicht mit den erforderlichen Anweisungen, um eine dynamische Datenbindung zu erhalten.
3. Schließen Sie an jede Ansicht einen Controller an (mithilfe von ng-view und routing oder ng-controller). Lassen Sie den Controller nur die Modelldaten finden / abrufen, die die Ansicht für ihre Arbeit benötigt. Machen Sie die Controller so dünn wie möglich.

Prototypische Vererbung

Mit jQuery können Sie viel tun, ohne zu wissen, wie die prototypische Vererbung von JavaScript funktioniert. Wenn Sie AngularJS-Anwendungen entwickeln, vermeiden Sie einige häufige Fallstricke, wenn Sie die JavaScript-Vererbung gut verstehen. Empfohlene Lektüre: Was sind die Nuancen der prototypischen / prototypischen Vererbung des Geltungsbereichs in AngularJS?

AngularJS vs. jQuery

AngularJS und jQuery verwenden sehr unterschiedliche Ideologien. Wenn Sie von jQuery kommen, werden Sie möglicherweise einige der Unterschiede überraschend finden. Angular kann dich wütend machen.

Das ist normal, du solltest dich durchsetzen. Angular ist es wert.

Der große Unterschied (TLDR)

jQuery bietet Ihnen ein Toolkit zum Auswählen beliebiger Bits des DOM und zum Vornehmen von Ad-hoc-Änderungen. Sie können so ziemlich alles tun, was Sie Stück für Stück mögen.

AngularJS bietet Ihnen stattdessen einen Compiler .

Dies bedeutet, dass AngularJS Ihr gesamtes DOM von oben nach unten liest und es als Code behandelt, wörtlich als Anweisungen an den Compiler. Beim Durchlaufen des DOM wird nach bestimmten Anweisungen (Compiler-Anweisungen) gesucht, die dem AngularJS-Compiler mitteilen, wie er sich verhält und was zu tun ist. Direktiven sind kleine Objekte voller JavaScript, die mit Attributen, Tags, Klassen oder sogar Kommentaren übereinstimmen können.

Wenn der Angular-Compiler feststellt, dass ein Teil des DOM mit einer bestimmten Direktive übereinstimmt, ruft er die Direktivenfunktion auf und übergibt ihr das DOM-Element, alle Attribute, den aktuellen $ scope (einen lokalen Variablenspeicher) und einige andere nützliche Bits. Diese Attribute können Ausdrücke enthalten, die von der Richtlinie interpretiert werden können und die angeben, wie und wann sie sich selbst neu zeichnen sollen.

Direktiven können dann wiederum zusätzliche Angular-Komponenten wie Controller, Dienste usw. einbinden. Das Ergebnis des Compilers ist eine vollständig geformte Webanwendung, die verkabelt und einsatzbereit ist.

Dies bedeutet, dass Angular vorlagengesteuert ist . Ihre Vorlage steuert das JavaScript, nicht umgekehrt. Dies ist ein radikaler Rollentausch und das genaue Gegenteil des unauffälligen JavaScript, das wir in den letzten 10 Jahren oder so geschrieben haben. Dies kann gewöhnungsbedürftig sein.

Wenn dies so klingt, als wäre es zu streng und einschränkend, könnte nichts weiter von der Wahrheit entfernt sein. Da AngularJS Ihren HTML-Code als Code behandelt, erhalten Sie in Ihrer Webanwendung eine Granularität auf HTML-Ebene . Alles ist möglich und die meisten Dinge sind überraschend einfach, wenn Sie ein paar konzeptionelle Sprünge machen.

Kommen wir zum Kern.

Erstens ersetzt Angular jQuery nicht

Angular und jQuery machen verschiedene Dinge. AngularJS bietet Ihnen eine Reihe von Tools zum Erstellen von Webanwendungen. jQuery bietet Ihnen hauptsächlich Tools zum Ändern des DOM. Wenn jQuery auf Ihrer Seite vorhanden ist, wird es von AngularJS automatisch verwendet. Wenn dies nicht der Fall ist, wird AngularJS mit jQuery Lite ausgeliefert, einer reduzierten, aber immer noch perfekt verwendbaren Version von jQuery.

Misko mag jQuery und hat keine Einwände dagegen, dass Sie es verwenden. Im Laufe der Zeit werden Sie jedoch feststellen, dass Sie so gut wie alle Ihre Arbeiten mit einer Kombination aus Gültigkeitsbereich, Vorlagen und Anweisungen erledigen können. Sie sollten diesen Workflow nach Möglichkeit bevorzugen, da Ihr Code diskreter, konfigurierbarer und mehr ist Winkelig.

Wenn Sie jQuery verwenden, sollten Sie es nicht überall verteilen. Der richtige Ort für die DOM-Manipulation in AngularJS befindet sich in einer Direktive. Dazu später mehr.

Unauffälliges JavaScript mit Selektoren vs. deklarativen Vorlagen

jQuery wird normalerweise unauffällig angewendet. Ihr JavaScript-Code ist in der Kopf- (oder Fußzeile) verlinkt, und dies ist der einzige Ort, an dem er erwähnt wird. Wir verwenden Selektoren, um Teile der Seite auszuwählen und Plugins zu schreiben, um diese Teile zu modifizieren.

Das JavaScript hat die Kontrolle. Der HTML-Code existiert völlig unabhängig. Ihr HTML bleibt auch ohne JavaScript semantisch. Onclick-Attribute sind eine sehr schlechte Praxis.

Eines der ersten Dinge, die Sie an AngularJS bemerken werden, ist, dass benutzerdefinierte Attribute überall sind . Ihr HTML-Code wird mit ng-Attributen übersät sein, die im Wesentlichen onClick-Attribute für Steroide sind. Dies sind Direktiven (Compiler-Direktiven) und eine der Hauptmethoden, mit denen die Vorlage mit dem Modell verknüpft wird.

Wenn Sie dies zum ersten Mal sehen, könnten Sie versucht sein, AngularJS als aufdringliches JavaScript der alten Schule abzuschreiben (wie ich es zuerst getan habe). Tatsächlich hält sich AngularJS nicht an diese Regeln. In AngularJS ist Ihr HTML5 eine Vorlage. Es wird von AngularJS zusammengestellt, um Ihre Webseite zu erstellen.

Dies ist der erste große Unterschied. Für jQuery ist Ihre Webseite ein zu manipulierendes DOM. Für AngularJS ist Ihr HTML-Code der zu kompilierende Code. AngularJS liest Ihre gesamte Webseite ein und kompiliert sie mithilfe des integrierten Compilers buchstäblich zu einer neuen Webseite.

Ihre Vorlage sollte deklarativ sein. seine Bedeutung sollte einfach durch Lesen klar sein. Wir verwenden benutzerdefinierte Attribute mit aussagekräftigen Namen. Wir stellen neue HTML-Elemente zusammen, wieder mit aussagekräftigen Namen. Ein Designer mit minimalen HTML-Kenntnissen und ohne Programmierkenntnisse kann Ihre AngularJS-Vorlage lesen und verstehen, was sie tut. Er oder sie kann Änderungen vornehmen. Dies ist der Winkelweg.

Die Vorlage befindet sich auf dem Fahrersitz.

Eine der ersten Fragen, die ich mir beim Starten von AngularJS und beim Durchlaufen der Tutorials gestellt habe, lautet: "Wo ist mein Code?" . Ich habe kein JavaScript geschrieben und trotzdem habe ich all dieses Verhalten. Die Antwort liegt auf der Hand. Da AngularJS das DOM kompiliert, behandelt AngularJS Ihren HTML-Code als Code. In vielen einfachen Fällen reicht es oft aus, nur eine Vorlage zu schreiben und AngularJS sie in eine Anwendung für Sie kompilieren zu lassen.

Ihre Vorlage steuert Ihre Anwendung. Es wird als DSL behandelt . Sie schreiben AngularJS-Komponenten, und AngularJS sorgt dafür, dass sie eingezogen und basierend auf der Struktur Ihrer Vorlage zum richtigen Zeitpunkt verfügbar gemacht werden. Dies unterscheidet sich stark von einem Standard- MVC- Muster, bei dem die Vorlage nur zur Ausgabe dient.

Es ist XSLT ähnlicher als beispielsweise Ruby on Rails .

Dies ist eine radikale Umkehrung der Kontrolle, an die man sich erst gewöhnen muss.

Versuchen Sie nicht mehr, Ihre Anwendung über JavaScript zu steuern. Lassen Sie die Vorlage die Anwendung steuern, und lassen Sie AngularJS die Verkabelung der Komponenten übernehmen. Dies ist auch der Winkelweg.

Semantisches HTML vs. semantische Modelle

Mit jQuery sollte Ihre HTML-Seite semantisch aussagekräftigen Inhalt enthalten. Wenn das JavaScript deaktiviert ist (von einem Benutzer oder einer Suchmaschine), bleibt Ihr Inhalt zugänglich.

Weil AngularJS Ihre HTML-Seite als Vorlage behandelt. Die Vorlage sollte nicht semantisch sein, da Ihr Inhalt normalerweise in Ihrem Modell gespeichert wird, das letztendlich von Ihrer API stammt. AngularJS kompiliert Ihr DOM mit dem Modell, um eine semantische Webseite zu erstellen.

Ihre HTML-Quelle ist nicht mehr semantisch, sondern Ihre API und Ihr kompiliertes DOM sind semantisch.

In AngularJS, dh im Modell, lebt der HTML-Code nur als Vorlage und nur zur Anzeige.

An diesem Punkt haben Sie wahrscheinlich alle möglichen Fragen zu SEO und Barrierefreiheit, und das zu Recht. Hier gibt es offene Fragen. Die meisten Screenreader analysieren jetzt JavaScript. Suchmaschinen können auch AJAXed- Inhalte indizieren . Trotzdem sollten Sie sicherstellen, dass Sie Pushstate-URLs verwenden und eine anständige Sitemap haben. Eine Diskussion des Problems finden Sie hier: https://stackoverflow.com/a/23245379/687677

Trennung von Bedenken (SOC) gegen MVC

Separation of Concerns (SOC) ist ein Muster, das über viele Jahre der Webentwicklung aus einer Vielzahl von Gründen entstanden ist, darunter SEO, Barrierefreiheit und Browser-Inkompatibilität. Es sieht aus wie das:

1. HTML - Semantische Bedeutung. Der HTML-Code sollte eigenständig sein.
2. CSS - Styling, ohne CSS ist die Seite noch lesbar.
3. JavaScript - Verhalten, ohne das Skript bleibt der Inhalt.

Auch hier spielt AngularJS nicht nach ihren Regeln. Mit einem Schlag beseitigt AngularJS ein Jahrzehnt empfangener Weisheit und implementiert stattdessen ein MVC-Muster, in dem die Vorlage nicht mehr semantisch ist, nicht einmal ein bisschen.

Es sieht aus wie das:

1. Modell - Ihre Modelle enthalten Ihre semantischen Daten. Modelle sind normalerweise JSON- Objekte. Modelle existieren als Attribute eines Objekts namens $ scope. Sie können auch praktische Dienstprogrammfunktionen in $ scope speichern, auf die Ihre Vorlagen dann zugreifen können.
2. Ansicht - Ihre Ansichten sind in HTML geschrieben. Die Ansicht ist normalerweise nicht semantisch, da Ihre Daten im Modell gespeichert sind.
3. Controller - Ihr Controller ist eine JavaScript-Funktion, die die Ansicht mit dem Modell verknüpft. Seine Funktion besteht darin, $ scope zu initialisieren. Abhängig von Ihrer Anwendung müssen Sie möglicherweise einen Controller erstellen oder nicht. Sie können viele Controller auf einer Seite haben.

MVC und SOC befinden sich nicht an entgegengesetzten Enden derselben Skala, sondern auf völlig unterschiedlichen Achsen. SOC macht in einem AngularJS-Kontext keinen Sinn. Du musst es vergessen und weitermachen.

Wenn Sie wie ich die Browserkriege durchlebt haben, finden Sie diese Idee möglicherweise ziemlich anstößig. Überwinde es, es wird sich lohnen, das verspreche ich.

Plugins vs. Direktiven

Plugins erweitern jQuery. AngularJS-Richtlinien erweitern die Funktionen Ihres Browsers.

In jQuery definieren wir Plugins, indem wir dem jQuery.prototype Funktionen hinzufügen. Wir verbinden diese dann mit dem DOM, indem wir Elemente auswählen und das Plugin für das Ergebnis aufrufen. Die Idee ist, die Funktionen von jQuery zu erweitern.

Wenn Sie beispielsweise ein Karussell auf Ihrer Seite haben möchten, können Sie eine ungeordnete Liste von Abbildungen definieren, die möglicherweise in ein Navigationselement eingeschlossen sind. Sie können dann etwas jQuery schreiben, um die Liste auf der Seite auszuwählen und sie als Galerie mit Zeitüberschreitungen für die gleitende Animation neu zu gestalten.

In AngularJS definieren wir Direktiven. Eine Direktive ist eine Funktion, die ein JSON-Objekt zurückgibt. Dieses Objekt teilt AngularJS mit, nach welchen DOM-Elementen gesucht werden soll und welche Änderungen daran vorgenommen werden müssen. Direktiven werden mithilfe von Attributen oder Elementen, die Sie erfinden, in die Vorlage eingebunden. Die Idee ist, die Funktionen von HTML um neue Attribute und Elemente zu erweitern.

Die AngularJS-Methode besteht darin, die Funktionen von nativ aussehendem HTML zu erweitern. Sie sollten HTML schreiben, das wie HTML aussieht und um benutzerdefinierte Attribute und Elemente erweitert ist.

Wenn Sie ein Karussell möchten, verwenden Sie einfach ein <carousel />Element, definieren Sie dann eine Anweisung, um eine Vorlage abzurufen, und lassen Sie diesen Trottel funktionieren.

Viele kleine Direktiven gegen große Plugins mit Konfigurationsschaltern

Die Tendenz bei jQuery besteht darin, große Plugins wie Lightbox zu schreiben, die wir dann konfigurieren, indem wir zahlreiche Werte und Optionen übergeben.

Dies ist ein Fehler in AngularJS.

Nehmen Sie das Beispiel eines Dropdowns. Wenn Sie ein Dropdown-Plugin schreiben, könnten Sie versucht sein, in Klick-Handlern zu codieren, vielleicht eine Funktion, um einen Chevron hinzuzufügen, der entweder oben oder unten ist, vielleicht die Klasse des entfalteten Elements zu ändern, das Menü auszublenden, alles hilfreiche Dinge.

Bis Sie eine kleine Änderung vornehmen möchten.

Angenommen, Sie haben ein Menü, das Sie beim Schweben entfalten möchten. Nun haben wir ein Problem. Unser Plugin hat unseren Click-Handler für uns verkabelt. Wir müssen eine Konfigurationsoption hinzufügen, damit es sich in diesem speziellen Fall anders verhält.

In AngularJS schreiben wir kleinere Direktiven. Unsere Dropdown-Richtlinie wäre lächerlich klein. Es kann den gefalteten Zustand beibehalten und Methoden zum Falten (), Entfalten () oder Umschalten () bereitstellen. Diese Methoden würden einfach $ scope.menu.visible aktualisieren, einen Booleschen Wert, der den Status enthält.

Jetzt können wir dies in unserer Vorlage verkabeln:

<a ng-click="toggle()">Menu</a>
<ul ng-show="menu.visible">
  ...
</ul>

Müssen Sie bei Mouseover aktualisieren?

<a ng-mouseenter="unfold()" ng-mouseleave="fold()">Menu</a>
<ul ng-show="menu.visible">
  ...
</ul>

Die Vorlage steuert die Anwendung, sodass wir eine Granularität auf HTML-Ebene erhalten. Wenn wir von Fall zu Fall Ausnahmen machen möchten, macht die Vorlage dies einfach.

Closure vs. $ scope

JQuery-Plugins werden in einem Abschluss erstellt. Die Privatsphäre wird innerhalb dieser Schließung gewahrt. Es liegt an Ihnen, Ihre Scope-Kette innerhalb dieses Verschlusses zu halten. Sie haben nur Zugriff auf die von jQuery an das Plugin übergebenen DOM-Knoten sowie auf alle im Closure definierten lokalen Variablen und auf die von Ihnen definierten Globals. Dies bedeutet, dass Plugins ziemlich eigenständig sind. Dies ist eine gute Sache, kann jedoch beim Erstellen einer gesamten Anwendung einschränkend sein. Der Versuch, Daten zwischen Abschnitten einer dynamischen Seite zu übertragen, wird zur Pflicht.

AngularJS hat $ scope-Objekte. Dies sind spezielle Objekte, die von AngularJS erstellt und verwaltet werden und in denen Sie Ihr Modell speichern. Bestimmte Anweisungen erzeugen einen neuen $ scope, der standardmäßig mithilfe der prototypischen Vererbung von JavaScript von seinem umhüllenden $ scope erbt. Auf das $ scope-Objekt kann im Controller und in der Ansicht zugegriffen werden.

Das ist der kluge Teil. Da die Struktur der $ scope-Vererbung in etwa der Struktur des DOM folgt, haben Elemente nahtlosen Zugriff auf ihren eigenen Bereich und alle enthaltenen Bereiche, bis hin zum globalen $ scope (der nicht mit dem globalen Bereich identisch ist).

Dies erleichtert die Weitergabe von Daten und das Speichern von Daten auf einer geeigneten Ebene erheblich. Wenn ein Dropdown-Menü geöffnet wird, muss nur der Dropdown-Bereich $ darüber Bescheid wissen. Wenn der Benutzer seine Einstellungen aktualisiert, möchten Sie möglicherweise den globalen $ -Bereich aktualisieren, und alle verschachtelten Bereiche, die die Benutzereinstellungen abhören, werden automatisch benachrichtigt.

Dies mag kompliziert klingen. Wenn Sie sich erst einmal darin entspannen, ist es wie Fliegen. Sie müssen das $ scope-Objekt nicht erstellen, AngularJS instanziiert und konfiguriert es für Sie, korrekt und angemessen basierend auf Ihrer Vorlagenhierarchie. AngularJS stellt es Ihrer Komponente dann mithilfe der Magie der Abhängigkeitsinjektion zur Verfügung (dazu später mehr).

Manuelle DOM-Änderungen im Vergleich zur Datenbindung

In jQuery nehmen Sie alle Ihre DOM-Änderungen von Hand vor. Sie erstellen programmgesteuert neue DOM-Elemente. Wenn Sie ein JSON-Array haben und es in das DOM einfügen möchten, müssen Sie eine Funktion schreiben, um den HTML-Code zu generieren und einzufügen.

In AngularJS können Sie dies auch tun, es wird jedoch empfohlen, die Datenbindung zu verwenden. Ändern Sie Ihr Modell, und da das DOM über eine Vorlage daran gebunden ist, wird Ihr DOM automatisch aktualisiert, ohne dass ein Eingriff erforderlich ist.

Da die Datenbindung über die Vorlage entweder über ein Attribut oder über die geschweifte Klammer erfolgt, ist dies sehr einfach. Es ist wenig kognitiver Aufwand damit verbunden, so dass Sie es die ganze Zeit tun werden.

<input ng-model="user.name" />

Bindet das Eingabeelement an $scope.user.name. Durch das Aktualisieren der Eingabe wird der Wert in Ihrem aktuellen Bereich aktualisiert und umgekehrt.

Gleichfalls:

<p>
  {{user.name}}
</p>

gibt den Benutzernamen in einem Absatz aus. Es handelt sich um eine Live-Bindung. Wenn der $scope.user.nameWert aktualisiert wird, wird auch die Vorlage aktualisiert.

Ajax die ganze Zeit

In jQuery ist es ziemlich einfach, einen Ajax-Aufruf zu tätigen, aber Sie können sich das noch zweimal überlegen. Es gibt die zusätzliche Komplexität, über die man nachdenken muss, und ein gutes Stück Skript, das man pflegen muss.

In AngularJS ist Ajax Ihre Standardlösung, und dies geschieht ständig, fast ohne dass Sie es merken. Sie können Vorlagen mit ng-include einschließen. Sie können eine Vorlage mit der einfachsten benutzerdefinierten Direktive anwenden. Sie können einen Ajax-Anruf in einen Dienst einbinden und sich einen GitHub- Dienst oder einen Flickr- Dienst erstellen , auf den Sie mit erstaunlicher Leichtigkeit zugreifen können.

Serviceobjekte vs Hilfsfunktionen

Wenn wir in jQuery eine kleine nicht dom-bezogene Aufgabe ausführen möchten, z. B. das Abrufen eines Feeds von einer API, schreiben wir möglicherweise eine kleine Funktion, um dies in unserem Abschluss zu tun. Das ist eine gültige Lösung, aber was ist, wenn wir häufig auf diesen Feed zugreifen möchten? Was ist, wenn wir diesen Code in einer anderen Anwendung wiederverwenden möchten?

AngularJS gibt uns Serviceobjekte.

Dienste sind einfache Objekte, die Funktionen und Daten enthalten. Sie sind immer Singletons, was bedeutet, dass es nie mehr als einen von ihnen geben kann. Angenommen, wir möchten auf die Stapelüberlauf-API zugreifen, schreiben wir möglicherweise eine, StackOverflowServicedie Methoden dafür definiert.

Nehmen wir an, wir haben einen Einkaufswagen. Möglicherweise definieren wir einen ShoppingCartService, der unseren Warenkorb verwaltet und Methoden zum Hinzufügen und Entfernen von Artikeln enthält. Da der Dienst ein Singleton ist und von allen anderen Komponenten gemeinsam genutzt wird, kann jedes Objekt, das benötigt wird, in den Warenkorb schreiben und Daten daraus abrufen. Es ist immer der gleiche Wagen.

Serviceobjekte sind in sich geschlossene AngularJS-Komponenten, die wir nach Belieben verwenden und wiederverwenden können. Sie sind einfache JSON-Objekte, die Funktionen und Daten enthalten. Sie sind immer Singletons. Wenn Sie also Daten in einem Dienst an einem Ort speichern, können Sie diese Daten an einem anderen Ort abrufen, indem Sie denselben Dienst anfordern.

Abhängigkeitsinjektion (DI) vs. Instatiation - auch bekannt als De-Spaghettifizierung

AngularJS verwaltet Ihre Abhängigkeiten für Sie. Wenn Sie ein Objekt möchten, beziehen Sie sich einfach darauf, und AngularJS wird es für Sie besorgen.

Bis Sie anfangen, dies zu verwenden, ist es schwer zu erklären, was für ein enormer Zeitsegen dies ist. In jQuery gibt es nichts Vergleichbares wie AngularJS DI.

DI bedeutet, dass Sie anstatt Ihre Anwendung zu schreiben und zu verkabeln, stattdessen eine Bibliothek von Komponenten definieren, die jeweils durch eine Zeichenfolge gekennzeichnet sind.

Angenommen, ich habe eine Komponente namens 'FlickrService', die Methoden zum Abrufen von JSON-Feeds von Flickr definiert. Wenn ich nun einen Controller schreiben möchte, der auf Flickr zugreifen kann, muss ich mich beim Deklarieren des Controllers nur namentlich auf den 'FlickrService' beziehen. AngularJS kümmert sich darum, die Komponente zu instanziieren und meinem Controller zur Verfügung zu stellen.

Zum Beispiel definiere ich hier einen Service:

myApp.service('FlickrService', function() {
  return {
    getFeed: function() { // do something here }
  }
});

Wenn ich diesen Dienst jetzt nutzen möchte, bezeichne ich ihn einfach mit folgendem Namen:

myApp.controller('myController', ['FlickrService', function(FlickrService) {
  FlickrService.getFeed()
}]);

AngularJS erkennt, dass ein FlickrService-Objekt erforderlich ist, um den Controller zu instanziieren, und stellt eines für uns bereit.

Dies macht die Verkabelung sehr einfach und beseitigt so gut wie jede Tendenz zur Spagettierung. Wir haben eine flache Liste von Komponenten, und AngularJS übergibt sie uns nacheinander, sobald wir sie benötigen.

Modulare Servicearchitektur

jQuery sagt sehr wenig darüber aus, wie Sie Ihren Code organisieren sollten. AngularJS hat Meinungen.

AngularJS bietet Ihnen Module, in die Sie Ihren Code einfügen können. Wenn Sie ein Skript schreiben, das beispielsweise mit Flickr kommuniziert, möchten Sie möglicherweise ein Flickr-Modul erstellen, in das alle Ihre Flickr-bezogenen Funktionen eingebunden werden. Module können andere Module (DI) enthalten. Ihre Hauptanwendung ist normalerweise ein Modul, und dies sollte alle anderen Module umfassen, von denen Ihre Anwendung abhängt.

Sie erhalten eine einfache Wiederverwendung von Code. Wenn Sie eine andere Anwendung auf Flickr-Basis schreiben möchten, können Sie einfach das Flickr-Modul einbinden und voila, Sie haben Zugriff auf alle Ihre Flickr-bezogenen Funktionen in Ihrer neuen Anwendung.

Module enthalten AngularJS-Komponenten. Wenn wir ein Modul einfügen, stehen uns alle Komponenten in diesem Modul als einfache Liste zur Verfügung, die durch ihre eindeutigen Zeichenfolgen gekennzeichnet ist . Wir können diese Komponenten dann mithilfe des Abhängigkeitsinjektionsmechanismus von AngularJS ineinander injizieren.

Um zusammenzufassen

AngularJS und jQuery sind keine Feinde. Es ist möglich, jQuery in AngularJS sehr gut zu verwenden. Wenn Sie AngularJS gut verwenden (Vorlagen, Datenbindung, $ scope, Direktiven usw.), werden Sie feststellen, dass Sie viel weniger jQuery benötigen, als Sie sonst benötigen könnten.

Die Hauptsache ist, dass Ihre Vorlage Ihre Anwendung steuert. Hör auf zu versuchen, große Plugins zu schreiben, die alles können. Schreiben Sie stattdessen kleine Anweisungen, die eines tun, und schreiben Sie dann eine einfache Vorlage, um sie miteinander zu verbinden.

Denken Sie weniger an unauffälliges JavaScript als an HTML-Erweiterungen.

Mein kleines Buch

Ich war so begeistert von AngularJS, dass ich ein kurzes Buch darüber geschrieben habe, das Sie gerne online lesen können: http://nicholasjohnson.com/angular-book/ . Ich hoffe es ist hilfreich.

Können Sie den notwendigen Paradigmenwechsel beschreiben?

Imperativ gegen Deklarativ

Mit jQuery teilen Sie dem DOM Schritt für Schritt mit, was geschehen muss. Mit AngularJS beschreiben Sie, welche Ergebnisse Sie möchten, aber nicht, wie es geht. Mehr dazu hier . Lesen Sie auch die Antwort von Mark Rajcok.

Wie entwerfe und gestalte ich clientseitige Webanwendungen unterschiedlich?

AngularJS ist ein komplettes clientseitiges Framework, das das MVC- Muster verwendet (siehe grafische Darstellung ). Es konzentriert sich stark auf die Trennung von Bedenken.

Was ist der größte Unterschied? Was soll ich aufhören zu tun / benutzen? Was soll ich stattdessen tun / verwenden?

jQuery ist eine Bibliothek

AngularJS ist ein wunderschönes clientseitiges Framework, das in hohem Maße testbar ist und eine Menge cooler Dinge wie MVC, Abhängigkeitsinjektion , Datenbindung und vieles mehr kombiniert .

Es konzentriert sich auf die Trennung von Bedenken und Tests ( Unit-Tests und End-to-End-Tests), was eine testgetriebene Entwicklung erleichtert.

Der beste Weg, um zu beginnen, ist das fantastische Tutorial . Sie können die Schritte in ein paar Stunden durchgehen; Wenn Sie jedoch die Konzepte hinter den Kulissen beherrschen möchten, enthalten sie eine Vielzahl von Referenzen zur weiteren Lektüre.

Gibt es serverseitige Überlegungen / Einschränkungen?

Sie können es in vorhandenen Anwendungen verwenden, in denen Sie bereits reines jQuery verwenden. Wenn Sie jedoch die AngularJS-Funktionen vollständig nutzen möchten, können Sie die Serverseite mithilfe eines RESTful- Ansatzes codieren .

Auf diese Weise können Sie die Ressourcenfactory nutzen , die eine Abstraktion Ihrer serverseitigen RESTful- API erstellt und serverseitige Aufrufe (Abrufen, Speichern, Löschen usw.) unglaublich einfach macht.

Um den "Paradigmenwechsel" zu beschreiben, denke ich, dass eine kurze Antwort ausreichen kann.

AngularJS ändert die Art und Weise, wie Sie Elemente finden

In jQuery verwenden Sie normalerweise Selektoren , um Elemente zu finden und sie dann zu verbinden:
$('#id .class').click(doStuff);

In AngularJS verwenden Sie Anweisungen , um die Elemente direkt zu markieren und zu verkabeln:
<a ng-click="doStuff()">

AngularJS braucht nicht (oder wollen) Sie Elemente mit Selektoren zu finden - der Hauptunterschied zwischen der AngularJS jqLite im Vergleich zu ausgewachsenen jQuery ist , dass jqLite nicht Selektoren unterstützt .

Wenn Leute also sagen, dass jQuery überhaupt nicht enthalten ist, liegt dies hauptsächlich daran, dass sie nicht möchten, dass Sie Selektoren verwenden. Sie möchten, dass Sie lernen, stattdessen Direktiven zu verwenden. Direkt, nicht auswählen!

jQuery

jQuery macht lächerlich lange JavaScript-Befehle wie getElementByHerpDerpkürzer und browserübergreifend.

AngularJS

Mit AngularJS können Sie Ihre eigenen HTML-Tags / -Attribute erstellen, die für dynamische Webanwendungen geeignet sind (da HTML für statische Seiten entwickelt wurde).

Bearbeiten:

Sagen: "Ich habe einen jQuery-Hintergrund. Wie denke ich in AngularJS?" ist wie zu sagen "Ich habe einen HTML-Hintergrund, wie denke ich in JavaScript?" Die Tatsache, dass Sie die Frage stellen, zeigt, dass Sie die grundlegenden Zwecke dieser beiden Ressourcen höchstwahrscheinlich nicht verstehen. Aus diesem Grund habe ich mich entschieden, die Frage zu beantworten, indem ich einfach auf den grundlegenden Unterschied hinwies, anstatt die Liste mit den Worten "AngularJS verwendet Direktiven, während jQuery CSS-Selektoren verwendet, um ein jQuery-Objekt zu erstellen, das dies und das usw. tut ..." durchzugehen. . Diese Frage erfordert keine lange Antwort.

Mit jQuery können Sie die Programmierung von JavaScript im Browser vereinfachen. Kürzere, browserübergreifende Befehle usw.

AngularJS erweitert HTML, sodass Sie nicht <div>überall etwas platzieren müssen, um eine Anwendung zu erstellen. Dadurch funktioniert HTML tatsächlich für Anwendungen und nicht für das, wofür es entwickelt wurde, nämlich für statische, lehrreiche Webseiten. Dies wird auf Umwegen mit JavaScript erreicht, aber im Grunde ist es eine Erweiterung von HTML, nicht von JavaScript.

jQuery: Sie denken viel darüber nach, das DOM nach DOM-Elementen abzufragen und etwas zu tun.

AngularJS: DAS Modell ist die Wahrheit, und Sie denken immer aus diesem Winkel.

Wenn Sie beispielsweise Daten von THE Server erhalten, die in einem bestimmten Format im DOM angezeigt werden sollen, müssen Sie in jQuery '1. FINDEN 'wo im DOM Sie diese Daten platzieren möchten, die' 2. UPDATE / APPEND 'dort, indem Sie einen neuen Knoten erstellen oder einfach dessen innerHTML festlegen . Wenn Sie diese Ansicht aktualisieren möchten, müssen Sie dann '3. FINDEN Sie 'den Ort und' 4. AKTUALISIEREN'. Dieser Zyklus des Suchens und Aktualisierens, der im selben Kontext wie das Abrufen und Formatieren von Daten vom Server durchgeführt wird, ist in AngularJS beendet.

Mit AngularJS haben Sie Ihr Modell (JavaScript-Objekte, an die Sie bereits gewöhnt sind) und der Wert des Modells gibt Auskunft über das Modell (offensichtlich) und über die Ansicht. Eine Operation am Modell wird automatisch in die Ansicht übertragen, sodass Sie dies nicht tun. Ich muss nicht darüber nachdenken. Sie befinden sich in AngularJS und finden keine Dinge mehr im DOM.

Um es anders auszudrücken: In jQuery müssen Sie über CSS-Selektoren nachdenken, dh wo sich das divoder tddas eine Klasse oder ein Attribut usw. befindet, damit ich deren HTML oder Farbe oder Wert erhalten kann, aber in AngularJS. Sie werden feststellen, dass Sie so denken: Mit welchem ​​Modell ich es zu tun habe, werde ich den Wert des Modells auf wahr setzen. Sie kümmern sich nicht darum, ob die Ansicht, die diesen Wert widerspiegelt, ein Kontrollkästchen ist oder sich in einem tdElement befindet (Details, über die Sie in jQuery häufig nachgedacht hätten).

Und mit der DOM-Manipulation in AngularJS fügen Sie Direktiven und Filter hinzu, die Sie sich als gültige HTML-Erweiterungen vorstellen können.

Eine weitere Sache, die Sie in AngularJS erleben werden: In jQuery rufen Sie die jQuery-Funktionen häufig auf, in AngularJS ruft AngularJS Ihre Funktionen auf, sodass AngularJS Ihnen sagt, wie Sie Dinge tun sollen, aber die Vorteile sind es wert, AngularJS zu lernen In der Regel müssen Sie lernen, was AngularJS will oder wie AngularJS erfordert, dass Sie Ihre Funktionen präsentieren, und es wird entsprechend aufgerufen. Dies ist eines der Dinge, die AngularJS eher zu einem Framework als zu einer Bibliothek machen.

Das sind einige sehr nette, aber langwierige Antworten.

Um meine Erfahrungen zusammenzufassen:

1. Controller und Anbieter (Dienste, Fabriken usw.) dienen zum Ändern des Datenmodells, NICHT von HTML.
2. HTML und Direktiven definieren das Layout und die Bindung an das Modell.
3. Wenn Sie Daten zwischen Controllern austauschen müssen, erstellen Sie einen Dienst oder eine Factory. Dies sind Singletons, die in der gesamten Anwendung gemeinsam genutzt werden.
4. Wenn Sie ein HTML-Widget benötigen, erstellen Sie eine Direktive.
5. Wenn Sie Daten haben und jetzt versuchen, HTML zu aktualisieren ... STOP! Aktualisieren Sie das Modell und stellen Sie sicher, dass Ihr HTML an das Modell gebunden ist.

jQuery ist eine DOM-Manipulationsbibliothek.

AngularJS ist ein MV * Framework.

Tatsächlich ist AngularJS eines der wenigen JavaScript MV * -Frameworks (viele JavaScript MVC-Tools fallen immer noch unter die Kategoriebibliothek).

Als Framework hostet es Ihren Code und übernimmt die Verantwortung für Entscheidungen darüber, was und wann aufgerufen werden soll!

AngularJS selbst enthält eine jQuery-lite-Edition. Für einige grundlegende DOM-Auswahlen / Manipulationen müssen Sie die jQuery-Bibliothek wirklich nicht einschließen (sie spart viele Bytes, um im Netzwerk ausgeführt zu werden.)

AngularJS hat das Konzept von "Direktiven" für die DOM-Manipulation und das Entwerfen wiederverwendbarer UI-Komponenten. Sie sollten es daher immer dann verwenden, wenn Sie das Bedürfnis haben, DOM-Manipulationsaufgaben auszuführen (Direktiven sind nur dort, wo Sie jQuery-Code schreiben sollten, während Sie AngularJS verwenden).

AngularJS beinhaltet eine gewisse Lernkurve (mehr als jQuery :-).

-> Für jeden Entwickler mit jQuery-Hintergrund wäre mein erster Rat, "JavaScript als erstklassige Sprache zu lernen, bevor Sie auf ein umfangreiches Framework wie AngularJS springen!" Ich habe die obige Tatsache auf die harte Tour gelernt.

Viel Glück.

Es sind Äpfel und Orangen. Sie wollen sie nicht vergleichen. Das sind zwei verschiedene Dinge. In AngularJs ist bereits jQuery Lite integriert, mit dem Sie grundlegende DOM-Manipulationen durchführen können, ohne die vollständige jQuery-Version einzubeziehen.

Bei jQuery dreht sich alles um die DOM-Manipulation. Es löst alle browserübergreifenden Probleme, mit denen Sie sich sonst befassen müssen, aber es ist kein Framework, mit dem Sie Ihre App in Komponenten wie AngularJS unterteilen können.

Eine schöne Sache bei AngularJs ist, dass Sie damit die DOM-Manipulation in den Anweisungen trennen / isolieren können. Es gibt integrierte Anweisungen, die Sie verwenden können, z. B. ng-click. Sie können Ihre eigenen benutzerdefinierten Anweisungen erstellen, die Ihre gesamte Ansichtslogik oder DOM-Manipulation enthalten, damit Sie nicht den DOM-Manipulationscode in den Controllern oder Diensten mischen, die sich um die Geschäftslogik kümmern sollten.

Angular unterteilt Ihre App in - Controller - Dienste - Ansichten - usw.

und es gibt noch eine Sache, das ist die Richtlinie. Es ist ein Attribut, das Sie an jedes DOM-Element anhängen können, und Sie können mit jQuery darin verrückt werden, ohne sich Sorgen machen zu müssen, dass Ihre jQuery jemals mit AngularJs Komponenten in Konflikt gerät oder die Architektur durcheinander bringt.

Ich habe von einem Treffen gehört, an dem ich teilgenommen habe. Einer der Gründer von Angular sagte, sie hätten wirklich hart gearbeitet, um die DOM-Manipulation zu trennen. Versuchen Sie also nicht, sie wieder einzubeziehen.

Hören Sie sich den Podcast JavaScript Jabber: Episode # 32 an , in dem die ursprünglichen Schöpfer von AngularJS: Misko Hevery & Igor Minar vorgestellt werden. Sie sprechen viel darüber, wie es ist, aus anderen JavaScript-Hintergründen, insbesondere jQuery, zu AngularJS zu kommen.

Einer der Punkte im Podcast hat viele Dinge für mich in Bezug auf Ihre Frage zum Klicken gebracht:

MISKO : [...] eines der Dinge, über die wir in Angular kaum nachgedacht haben, ist, wie wir viele Notluken bereitstellen, damit Sie herauskommen und im Grunde einen Ausweg finden können. Für uns lautet die Antwort „Direktiven“. Und mit Direktiven werden Sie im Wesentlichen zu einem normalen kleinen jQuery-JavaScript. Sie können tun, was Sie wollen.

IGOR : Stellen Sie sich die Direktive als Anweisung an den Compiler vor, die sie anzeigt , wann immer Sie auf dieses bestimmte Element oder dieses CSS in der Vorlage stoßen, und Sie behalten diese Art von Code und dieser Code ist für das Element und alles unter diesem Element verantwortlich im DOM-Baum.

Eine Abschrift der gesamten Episode finden Sie unter dem oben angegebenen Link.

Um Ihre Frage direkt zu beantworten: AngularJS hat eine sehr gute Meinung und ist ein echtes MV * -Framework. Sie können jedoch immer noch all die wirklich coolen Dinge tun, die Sie mit jQuery innerhalb von Direktiven kennen und lieben. Es geht nicht um "Wie mache ich das, was ich in jQuery gewohnt bin?" Soweit es um "Wie kann ich AngularJS mit all den Dingen ergänzen, die ich in jQuery gemacht habe?"

Es sind wirklich zwei sehr unterschiedliche Geisteszustände.

Ich finde diese Frage interessant, weil ich Node.js und AngularJS zum ersten Mal ernsthaft mit JavaScript programmiert habe . Ich habe jQuery nie gelernt, und ich denke, das ist eine gute Sache, weil ich nichts verlernen muss. Tatsächlich vermeide ich aktiv jQuery-Lösungen für meine Probleme und suche stattdessen ausschließlich nach einem "AngularJS-Weg", um sie zu lösen. Ich denke, meine Antwort auf diese Frage würde sich im Wesentlichen darauf beschränken, "wie jemand zu denken, der jQuery nie gelernt hat" und jede Versuchung zu vermeiden, jQuery direkt zu integrieren (offensichtlich verwendet AngularJS es in gewissem Maße hinter den Kulissen).

AngularJS und jQuery:

AngularJs und JQuery sind auf jeder Ebene völlig unterschiedlich, mit Ausnahme der JQLite-Funktionalität. Sie werden sie sehen, sobald Sie mit dem Erlernen der Kernfunktionen von AngularJs beginnen (ich habe es unten erklärt).

AngularJs ist ein clientseitiges Framework, mit dem die unabhängige clientseitige Anwendung erstellt werden kann. JQuery ist eine clientseitige Bibliothek, die im DOM herumspielt.

AngularJs Cooles Prinzip - Wenn Sie einige Änderungen an Ihrer Benutzeroberfläche wünschen, denken Sie aus der Perspektive der Änderung von Modelldaten. Wenn Sie Ihre Daten ändern, wird die Benutzeroberfläche neu gerendert. Sie müssen nicht jedes Mal mit DOM herumspielen, es sei denn und bis es kaum erforderlich ist und dies auch über Angular Directives geregelt werden sollte.

Um diese Frage zu beantworten, möchte ich meine Erfahrungen mit der ersten Unternehmensanwendung mit AngularJS teilen. Dies sind die beeindruckendsten Funktionen, die Angular bietet, wenn wir unsere jQuery-Denkweise ändern und Angular wie ein Framework und nicht wie die Bibliothek erhalten.

Die bidirektionale Datenbindung ist erstaunlich: Ich hatte ein Raster mit allen Funktionen UPDATE, DELTE, INSERT. Ich habe ein Datenobjekt, das das Modell des Gitters mit ng-repeat bindet. Sie müssen nur eine einzige Zeile einfachen JavaScript-Codes zum Löschen und Einfügen schreiben und fertig. Das Raster wird automatisch aktualisiert, wenn sich das Rastermodell sofort ändert. Die Update-Funktionalität ist in Echtzeit, kein Code dafür. Du fühlst dich großartig an !!!

Wiederverwendbare Anweisungen sind super: Schreiben Sie Anweisungen an einer Stelle und verwenden Sie sie in der gesamten Anwendung. OH MEIN GOTT!!! Ich habe diese Direktive für Paging, Regex, Validierungen usw. verwendet. Es ist wirklich cool!

Das Routing ist stark: Es liegt an Ihrer Implementierung, wie Sie es verwenden möchten, es sind jedoch nur sehr wenige Codezeilen erforderlich, um die Anforderung zur Angabe von HTML und Controller (JavaScript) weiterzuleiten.

Controller sind großartig: Controller kümmern sich um ihren eigenen HTML-Code, aber diese Trennung funktioniert auch gut für allgemeine Funktionen. Wenn Sie dieselbe Funktion auf Knopfdruck im Master-HTML aufrufen möchten, schreiben Sie einfach denselben Funktionsnamen in jeden Controller und schreiben Sie individuellen Code.

Plugins: Es gibt viele andere ähnliche Funktionen wie das Anzeigen eines Overlays in Ihrer App. Sie müssen keinen Code dafür schreiben, sondern verwenden einfach ein Overlay-Plugin, das als wc-Overlay verfügbar ist. Dadurch werden automatisch alle XMLHttpRequest (XHR) -Anforderungen bearbeitet.

Ideal für RESTful- Architektur: Als vollständiges Framework eignet sich AngularJS hervorragend für die Arbeit mit einer RESTful-Architektur. Das Aufrufen von REST CRUD-APIs ist sehr einfach und einfacher

Dienste : Schreiben Sie allgemeine Codes mit Diensten und weniger Code in Controllern. Dienste können verwendet werden, um gemeinsame Funktionen zwischen den Steuerungen zu teilen.

Erweiterbarkeit : Angular hat die HTML-Direktiven mithilfe von Angular-Direktiven erweitert. Schreiben Sie Ausdrücke in HTML und werten Sie sie zur Laufzeit aus. Erstellen Sie Ihre eigenen Anweisungen und Dienste und verwenden Sie sie ohne zusätzlichen Aufwand in einem anderen Projekt.

Als JavaScript MV * -Einsteiger, der sich ausschließlich auf die Anwendungsarchitektur konzentriert (nicht auf die Server- / Clientseite), würde ich auf jeden Fall die folgende Ressource empfehlen (die überraschenderweise noch nicht erwähnt wurde): JavaScript Design Patterns von Addy Osmani als Einführung in verschiedene JavaScript-Entwurfsmuster . Die in dieser Antwort verwendeten Begriffe stammen aus dem oben verlinkten Dokument. Ich werde nicht wiederholen, was in der akzeptierten Antwort wirklich gut formuliert war. Stattdessen verweist diese Antwort auf die theoretischen Hintergründe, die AngularJS (und andere Bibliotheken) unterstützen.

Wie ich werden Sie schnell feststellen, dass AngularJS (oder Ember.js , Durandal und andere MV * -Frameworks) ein komplexes Framework ist, das viele der verschiedenen JavaScript-Entwurfsmuster zusammensetzt.

Ich fand es auch einfacher, (1) nativen JavaScript-Code und (2) kleinere Bibliotheken für jedes dieser Muster separat zu testen, bevor ich in ein globales Framework eintauche. Dadurch konnte ich besser verstehen, welche entscheidenden Probleme ein Framework anspricht (weil Sie persönlich mit dem Problem konfrontiert sind).

Zum Beispiel:

• JavaScript Objektorientierte Programmierung (dies ist ein Google-Suchlink). Es ist keine Bibliothek, aber sicherlich eine Voraussetzung für jede Anwendungsprogrammierung. Es brachte mir die nativen Implementierungen der Prototyp-, Konstruktor-, Singleton- und Dekorationsmuster bei
• jQuery / Unterstrich für das Fassadenmuster (wie WYSIWYGs zur Manipulation des DOM)
• Prototype.js für das Muster Prototyp / Konstruktor / Mixin
• RequireJS / Curl.js für das Modulmuster / AMD
• KnockoutJS für das beobachtbare Publish / Subscribe-Muster

NB: Diese Liste ist weder vollständig noch die besten Bibliotheken. Es sind einfach die Bibliotheken, die ich benutzt habe. Diese Bibliotheken enthalten auch mehr Muster, die genannten sind nur ihre Hauptschwerpunkte oder ursprünglichen Absichten. Wenn Sie der Meinung sind, dass etwas in dieser Liste fehlt, erwähnen Sie es bitte in den Kommentaren, und ich werde es gerne hinzufügen.

Wenn Sie AngularJS verwenden, benötigen Sie jQuery nicht mehr. AngularJS selbst hat die Bindung und Direktive, was ein sehr guter "Ersatz" für die meisten Dinge ist, die Sie mit jQuery tun können.

Normalerweise entwickle ich mobile Anwendungen mit AngularJS und Cordova . Das EINZIGE, was ich von jQuery brauchte, ist der Selector.

Durch Googeln sehe ich, dass es da draußen ein eigenständiges jQuery-Auswahlmodul gibt. Es ist Sizzle.

Und ich habe beschlossen, ein kleines Code-Snippet zu erstellen, mit dem ich schnell eine Website mit AngularJS mit der Leistung von jQuery Selector (mit Sizzle) starten kann.

Ich habe meinen Code hier geteilt: https://github.com/huytd/Sizzular