it-swarm.com.de

"Thinking in AngularJS", wenn ich einen jQuery-Hintergrund habe?

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önnten, eine Antwort zu formulieren:

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

Ich suche keinen detaillierten Vergleich zwischen jQuery und AngularJS.

4519
Mark Rajcok

1. Gestalten 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 sich von dieser einfachen Voraussetzung unglaublich entwickelt hat.

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

2. Ergänzen Sie jQuery nicht mit AngularJS

Beginnen Sie in ähnlicher Weise nicht mit der Idee, dass jQuery X, Y und Z ausführt, sondern fügen Sie AngularJS für Modelle und Controller hinzu. Dies istreallyverlockend, wenn Sie gerade erst anfangen. Deshalb empfehle ich neuen AngularJS-Entwicklern immer, jQuery überhaupt nicht zu verwenden, zumindest nicht, bis sie sich daran gewöhnt haben Dinge auf die "Angular Way" zu tun.

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

Das Fazit lautet: Denken Sie beim Lösen zuerst an AngularJS. Wenn Ihnen keine Lösung einfällt, fragen Sie die Community. Wenn es nach alledem keine einfache Lösung gibt, können Siedannnach der jQuery greifen. Aber lass jQuery nicht zu einer Krücke werden, sonst wirst du AngularJS nie beherrschen.

3. Denken Sie immer in Architektur

Stellen Sie zunächst fest, dass Anwendungen mit einer Seiteapplicationsist. Sie sindnichtWebseiten. Wir müssen also wie ein serverseitiger Entwickler denkenund zusätzlichwie ein clientseitiger Entwickler denken. Wir müssen darüber nachdenken, wie wir unsere Anwendung in einzelne, erweiterbare und testbare Komponenten aufteilen können.

Alsowiemachst du das? Wie denken Sie in AngularJS? Im Folgenden werden einige allgemeine Prinzipien im Gegensatz zu jQuery aufgeführt.

Die Ansicht ist der "offizielle Rekord"

In jQuery ändern wir die Ansicht programmgesteuert. Ein Dropdown-Menü könnte wie folgt als ul definiert werden:

<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 es in unserer Anwendungslogik folgendermaßen aktivieren:

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

Wenn wir nur die Ansicht betrachten, ist es nicht sofort offensichtlich, dass hier irgendeine Funktionalität vorhanden ist. Für kleine Anwendungen ist das in Ordnung. Bei nicht trivialen Anwendungen werden die Dinge jedoch schnell verwirrend und schwierig zu warten.

In AngularJS ist die Ansicht jedoch die offizielle Aufzeichnung der ansichtsbasierten Funktionalität. Unsere ul -Deklaration 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 dies überprüfen und dannwissen, dass eine Anweisung namens dropdownMenu darauf angewendet wird; 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 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 Ansichtistder offizielle Datensatz. Außerhalb einer Direktive (mehr dazu weiter unten) ändern Sie niemalsneverdas DOM. Und Anweisungen werden angewendetin der Ansicht, so dass die Absicht klar ist.

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

Datenbindung

Dies ist mit Abstand eine der beeindruckendsten Funktionen von AngularJS und macht die im vorherigen Abschnitt erwähnten 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. So 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, die ich bereits erwähnt habe. Vor allem aber mussten wir einen DOM-Knoten manuell referenzieren und aktualisieren. 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 wenn wir die Präsentation ändern wollen?

Dies ist ein wenig chaotisch und eine Kleinigkeit gebrechlich. Aber in AngularJS können wir dies tun:

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

Und unsere Sichtweise kann so aussehen:

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

Im Übrigen könnte unsere Sichtweise 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! Aber was noch wichtiger ist, egal,wooderwiedas Protokoll aktualisiert wird, ändert sich auch die Ansicht. Automatisch. Ordentlich!

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

Eindeutige 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 auf beliebige Weise verwalten können. Dies hilft bei der obigen Datenbindung, erhält Trennung von Bedenken 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 Serviceschicht, um wiederverwendbare Aufgaben auszuführen. Sie manipulieren DOM und erweitern Ihre Ansicht mit Direktiven. und Sie kleben alles mit Controllern zusammen. 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 erläutere.

Abhängigkeitsspritze

Uns bei der Trennung von Bedenken zu helfen, ist Abhängigkeitsinjektion (DI). Wenn Sie aus einer serverseitigen Sprache kommen (von Java bis PHP ), kennen Sie dieses Konzept wahrscheinlich bereits, aber wenn Sie clientseitig sind Typ von jQuery, dieses Konzept kann alles von albern über überflüssig bis hipster erscheinen. Aber es ist nicht. :-)

Im weitesten Sinne bedeutet DI, dass Sie Komponenten sehr frei deklarieren können und dann von jeder anderen Komponente nur eine Instanz anfordern, und sie wird gewährt. Sie müssen nicht über Ladereihenfolge, Speicherorte oder ähnliches Bescheid wissen. Die Leistung ist möglicherweise nicht sofort sichtbar, aber ich gebe nur ein (allgemeines) Beispiel: Testen.

Nehmen wir an, wir benötigen in unserer Anwendung einen Dienst, der serverseitigen Speicher über eine REST - API und je nach Anwendungsstatus auch 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 dencontroller. Wir können einfach einen Scheindienst mit demselben Namen wie unsere ursprüngliche Komponente hinzufügen, und der Injektor stellt sicher, dass unser Controller den falschen automatisch erhält - unser Controller kennt den Unterschied nicht und muss ihn nicht kennen.

Apropos testen ...

4. Testgetriebene Entwicklung -always

Dies ist wirklich Teil von Abschnitt 3 über Architektur, aber es ist so wichtig, dass ich es 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 geeignet 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. Also müssen wir eine Komponente separat entwickeln unddannin unsere Anwendung integrieren. Wie unpraktisch! So oft entscheiden wir uns bei der Entwicklung mit jQuery für die iterative statt für die testgetriebene Entwicklung. Und wer könnte uns die Schuld geben?

Da wir jedoch getrennte Anliegen haben, können wir die testgetriebene Entwicklung in AngularJS iterativ durchführen! Angenommen, wir möchten, dass eine supereinfache Anweisung in unserem Menü angibt, wie unsere aktuelle Route lautet. Wir können im Hinblick auf unsere 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-active-Direktive schreiben:

it( 'should add "active" when the route changes', inject(function() {
    var Elm = $compile( '<a href="/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 durchfü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 besteht nunundunser Menü verhält sich wie gewünscht. Unsere Entwicklung istsowohliterativals auchtestgetrieben. Verdammt cool.

5. Direktiven sind konzeptionellnotpaketierte jQuery

Sie werden oft hören "nur DOM-Manipulation in einer Direktive ausführen". Dies ist eine Notwendigkeit. Behandle es mit gebührendem Respekt!

Aber lasst uns etwas tiefer tauchen ...

Einige Direktiven dekorieren nur das, was sich bereits in der Ansicht befindet (denken Sie an ngClass) und führen daher manchmal die DOM-Manipulation sofort durch und sind dann im Grunde genommen fertig. Aber wenn eine Direktive wie ein "Widget" ist und eine Vorlage hat, sollte sieauchdie Trennung von Bedenken berücksichtigen. Das heißt, das Templatetoosollte weitgehend unabhängig von seiner Implementierung in den Link- und Controller-Funktionen bleiben.

AngularJS wird mit einer ganzen Reihe von Tools geliefert, die dies sehr einfach machen. mit ngClass können wir die Klasse dynamisch aktualisieren; ngModel ermöglicht bidirektionale Datenbindung; ngShow und ngHide zeigen ein Element programmgesteuert an oder verbergen es; und viele mehr - auch die, die wir selbst schreiben. Mit anderen Worten, wir können alle Arten von AwesomenessohneDOM-Manipulation durchführen. Je weniger DOM-Manipulationen durchgeführt werden, desto einfacher ist es, Direktiven zu testen, umso einfacher ist es, sie zu gestalten, umso einfacher sind sie in Zukunft zu ändern und umso wiederverwendbarer und verteilbarer sind sie.

Ich sehe viele Entwickler, die AngularJS noch nicht kennen und Direktiven als Ausgangspunkt für eine Reihe von jQuery verwenden. Mit anderen Worten, sie denken: "Da ich keine DOM-Manipulation im Controller ausführen kann, werde ich diesen Code in eine Direktive einfügen." Das ist sicherlich viel besser, aber es ist oftimmer noch falsch.

Denken Sie an den Logger, den wir in Abschnitt 3 programmiert haben. Auch wenn wir das in eine Direktive setzen, wollen wirstillden "Angular Way" machen. Esstillnimmt keine DOM-Manipulation an! Es gibt viele Male, in denen eine DOM-Manipulation erforderlich ist, aber es ist einlotseltener als Sie denken! Bevor Sie die DOM-Manipulationanywherein Ihrer Anwendung ausführen, fragen Sie sich, 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 ausgefeilt und ein Skosh Verbose, 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 überhaupt jQuery benötigt hätte!
  2. Zweitens, auch wenn wir jQuery bereits auf unserer Seite haben, gibt es keinen Grund, es hier zu verwenden. Wir können einfach angular.element verwenden und unsere Komponente funktioniert weiterhin, wenn sie in ein Projekt ohne jQuery verschoben wird.
  3. Drittens wird jqLite (angular.element)immerjQuery if verwenden, selbst wenn jQueryfür diese Anweisungerforderlich war es wurde geladen! Wir brauchen also nicht den $ zu verwenden - wir können einfach den angular.element verwenden.
  4. Viertens, eng verwandt mit dem dritten, ist, dass jqLite-Elemente nicht in $ eingeschlossen werden müssen - das element, das an die link -Funktion übergeben wird, wärealready beein jQuery-Element!
  5. Und fünftens, wie wir in den vorhergehenden Abschnitten erwähnt haben, warum mischen wir Template-Inhalte in unsere Logik ein?

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

.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 ein Material austauschen können, das jedem gewünschten Stil und der Logik entspricht. ) musste nie berührt werden. Wiederverwendbarkeit - Boom!

Und es gibt noch all diese anderen Vorteile, wie das Testen - es ist ganz einfach! Unabhängig davon, was in der Vorlage enthalten ist, wird die interne API der Direktive niemals 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!

Also, wenn Direktiven nicht nur Sammlungen von jQuery-ähnlichen Funktionen sind, was sind sie dann? Direktiven sind eigentlich Erweiterungen von HTML . Wenn HTML nicht das tut, wofür Sie es brauchen, schreiben Sie eine Direktive, um es für Sie zu tun, und verwenden Sie es dann so, als ob es Teil von HTML wäre.

Anders ausgedrückt: Wenn AngularJS nicht sofort einsatzbereit ist, überlegen Sie, wie das Team es schaffen würde, um es mit ngClick, ngClass, et al.

Zusammenfassung

Verwenden Sie nicht einmal jQuery. Fügen 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 lösen können, überlegen Sie sich, wie Sie es innerhalb der AngularJS-Grenzen lösen können, bevor Sie zum $ greifen. Wenn Sie es nicht wissen, fragen Sie! 19 von 20 Fällen, für die beste Methode ist jQuery nicht erforderlich, und der Versuch, es mit jQuery zu lösen, führt zu mehr Arbeit für Sie.

7182

Imperativ → deklarativ

In jQuery werden Selektoren verwendet, um DOM Elemente zu finden und dann Ereignishandler daran 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 (deklarative) HTML-Dateien, die AngularJS-Anweisungen enthalten. Direktiven richten die Event-Handler hinter den Kulissen für uns ein und geben uns eine dynamische Datenbindung. Selektoren werden selten verwendet, so dass 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 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 nauffälliges JavaScript - Verhalten (JavaScript) ist von der Struktur (HTML) getrennt.

AngularJS verwendet Controller und Direktiven (von denen jeder seinen eigenen Controller haben kann und/oder Funktionen zum Kompilieren und Verknüpfen hat), um das Verhalten aus der Ansicht/Struktur zu entfernen ( HTML). Angular hat auch Dienste und Filter zu helfen trennen/organisieren Sie Ihre Bewerbung.

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

Anwendungsdesign

Ein Ansatz zum Entwerfen einer AngularJS-Anwendung:

  1. Denken Sie an Ihre Modelle. Erstellen Sie für diese Modelle Dienste oder eigene JavaScript-Objekte.
  2. Überlegen Sie, wie Sie Ihre Modelle präsentieren möchten - Ihre Ansichten. Erstellen Sie HTML-Vorlagen für jede Ansicht. Verwenden Sie dabei die erforderlichen Anweisungen, um eine dynamische Datenbindung zu erhalten.
  3. Ordnen Sie jeder Ansicht einen Controller zu (mit ng-view and routing oder ng-controller). Lassen Sie den Controller nur die Modelldaten finden/abrufen, die die Ansicht zur Ausführung ihrer Aufgabe benötigt. Stellen Sie die Controller so dünn wie möglich ein.

Prototypische Vererbung

Mit jQuery können Sie viel tun, ohne zu wissen, wie die prototypische Vererbung von JavaScript funktioniert. Bei der Entwicklung von AngularJS-Anwendungen vermeiden Sie einige häufige Probleme, wenn Sie die JavaScript-Vererbung gut verstehen. Empfohlene Lektüre: Welche Nuancen hat die prototypische/prototypische Vererbung des Gültigkeitsbereichs in AngularJS?

408
Mark Rajcok

AngularJS vs. jQuery

AngularJS und jQuery verwenden sehr unterschiedliche Ideologien. Wenn Sie von jQuery kommen, werden Sie einige der Unterschiede vielleicht überraschen. Angular kann dich verärgern.

Das ist normal, du solltest durchschieben. Angular ist es wert.

Der große Unterschied (TLDR)

mit jQuery erhalten Sie ein Toolkit, mit dem Sie beliebige Bits des DOM auswählen und Ad-hoc-Änderungen daran vornehmen können. Sie können so ziemlich alles tun, was Sie Stück für Stück mögen.

AngularJS gibt Ihnen stattdessen einen Compiler .

Dies bedeutet, dass AngularJS Ihr gesamtes DOM von oben nach unten liest und als Code behandelt, wörtlich als Anweisungen an den Compiler. Beim Durchlaufen des DOM werden bestimmte Anweisungen (Compiler-Anweisungen) gesucht, die dem AngularJS-Compiler mitteilen, wie er sich zu verhalten hat 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 und den aktuellen $ -Bereich (der ein lokaler Variablenspeicher ist). 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 selbst neu gezeichnet werden soll.

Direktiven können dann wiederum zusätzliche Angular Komponenten wie Controller, Services usw. einbinden. Am Ende des Compilers befindet sich eine vollständig ausgebildete Webanwendung, die verkabelt und einsatzbereit ist.

Dies bedeutet, dass Angular Template Driven 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 geschrieben haben. Dies kann etwas gewöhnungsbedürftig sein.

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

Kommen wir zur Sache.

Erstens ersetzt Angular jQuery nicht

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

Misko mag jQuery und hat nichts dagegen, dass Sie es verwenden. Sie werden jedoch feststellen, dass Sie im Laufe der Zeit nahezu Ihre gesamte Arbeit 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 umfassender sein wird Angular.

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

Unauffälliges JavaScript mit Selektoren und deklarativen Vorlagen

jQuery wird normalerweise unauffällig angewendet. Ihr JavaScript-Code ist in der Kopfzeile (oder in der Fußzeile) verlinkt. Dies ist die einzige Stelle, an der er erwähnt wird. Wir verwenden Selektoren, um Teile der Seite herauszusuchen und Plugins zu schreiben, um diese Teile zu modifizieren.

Das JavaScript hat die Kontrolle. Der HTML hat eine völlig eigenständige Existenz. 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, bei denen es sich im Wesentlichen um onClick-Attribute für Steroide handelt. Dies sind Direktiven (Compiler-Direktiven) und eine der Hauptmethoden, mit denen die Vorlage an das Modell angehängt 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). AngularJS hält sich nicht an diese Regeln. In AngularJS ist Ihr HTML5 eine Vorlage. Es wird von AngularJS kompiliert, 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 zu kompilieren. AngularJS liest Ihre gesamte Webseite ein und kompiliert sie mithilfe des eingebauten Compilers buchstäblich zu einer neuen Webseite.

Ihre Vorlage sollte deklarativ sein. seine Bedeutung sollte einfach durch Lesen klar werden. Wir verwenden benutzerdefinierte Attribute mit aussagekräftigen Namen. Wir erfinden neue HTML-Elemente, 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 Angular Weg.

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 diese 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 diese entsprechend der Struktur Ihrer Vorlage zum richtigen Zeitpunkt eingezogen und verfügbar werden. Dies unterscheidet sich stark von einem Standardmuster MVC , bei dem die Vorlage nur für die Ausgabe vorgesehen ist.

Es ist zum Beispiel eher XSLT als 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 AngularJS für die Verkabelung der Komponenten sorgen. Dies ist auch der Angular Weg.

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 ist, 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 ist HTML lediglich eine Vorlage, die nur angezeigt werden soll.

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

Trennung der Interessen (SOC) gegen MVC

Trennung von Bedenken (SOC) ist ein Muster, das über viele Jahre der Webentwicklung aus einer Vielzahl von Gründen gewachsen ist, einschließlich SEO, Barrierefreiheit und Browser-Inkompatibilität. Es sieht aus wie das:

  1. HTML - Semantische Bedeutung. Das HTML sollte alleine stehen.
  2. CSS - Styling, ohne CSS ist die Seite noch lesbar.
  3. JavaScript - Verhalten, ohne das Skript bleibt der Inhalt erhalten.

Auch hier spielt AngularJS nicht nach ihren Regeln. Mit AngularJS wird ein Jahrzehnt empfangener Weisheit aufgehoben und stattdessen ein MVC-Muster implementiert, bei dem das Template nicht mehr semantisch ist, nicht einmal ein bisschen 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 nützliche Hilfsprogrammfunktionen 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 sich Ihre Daten im Modell befinden.
  3. Controller - Ihr Controller ist eine JavaScript-Funktion, die die Ansicht mit dem Modell verknüpft. Seine Funktion ist es, $ 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 des gleichen Maßstabs, 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 erlebt haben, ist diese Idee möglicherweise ziemlich anstößig. Komm drüber hinweg, es wird sich lohnen, das verspreche ich.

Plugins vs. Direktiven

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

In jQuery definieren wir Plugins, indem wir dem jQuery.prototype Funktionen hinzufügen. Wir binden diese dann in das DOM ein, indem wir Elemente auswählen und das Plugin für das Ergebnis aufrufen. Die Idee ist, die Fähigkeiten 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 nav-Element eingeschlossen sind. Sie können dann eine jQuery schreiben, um die Liste auf der Seite auszuwählen und sie als Galerie mit Zeitüberschreitungen für die Gleitanimation neu zu formatieren.

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 und welche Änderungen vorgenommen werden müssen. Direktiven werden mit Attributen oder Elementen, die Sie erfinden, in die Vorlage eingebunden. Die Idee ist, die Fähigkeiten von HTML mit neuen Attributen und Elementen zu erweitern.

Der AngularJS-Weg besteht darin, die Funktionen von nativ aussehendem HTML zu erweitern. Sie sollten HTML schreiben, das wie HTML aussieht und mit benutzerdefinierten Attributen und Elementen erweitert wird.

Wenn Sie ein Karussell möchten, verwenden Sie einfach ein <carousel /> -Element, definieren Sie dann eine Direktive, um eine Vorlage einzulesen, und lassen Sie diesen Sauger funktionieren.

Viele kleine Direktiven vs. große Plugins mit Konfigurationsschaltern

Die Tendenz bei jQuery ist, 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 Click-Handlern Code zu schreiben, vielleicht eine Funktion zum Hinzufügen eines Chevrons, die entweder nach oben oder nach unten zeigt, vielleicht die Klasse des entfalteten Elements zu ändern, das Menü auszublenden, alles Nützliche.

Bis Sie eine kleine Änderung vornehmen möchten.

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

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

Jetzt in unserer Vorlage können wir dies verdrahten:

<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 Closure erstellt. Die Privatsphäre bleibt in diesem Rahmen gewahrt. Es liegt an Ihnen, Ihre Scope-Kette innerhalb dieses Abschlusses zu halten. Sie haben wirklich nur Zugriff auf die von jQuery an das Plugin übergebenen DOM-Knoten sowie auf alle in der Closure definierten lokalen Variablen und alle von Ihnen definierten globalen Knoten. Dies bedeutet, dass Plugins in sich abgeschlossen sind. Dies ist eine gute Sache, kann jedoch beim Erstellen einer gesamten Anwendung einschränkend wirken. Der Versuch, Daten zwischen Abschnitten einer dynamischen Seite zu übertragen, wird zur Aufgabe.

AngularJS hat $ scope-Objekte. Hierbei handelt es sich um spezielle Objekte, die von AngularJS erstellt und verwaltet werden und in denen Sie Ihr Modell speichern. Bestimmte Direktiven erzeugen einen neuen $ -Bereich, der standardmäßig über die prototypische JavaScript-Vererbung von seinem umschließenden $ -Bereich erbt. Auf das $ scope-Objekt kann in der Steuerung und in der Ansicht zugegriffen werden.

Das ist der clevere Teil. Da die Struktur der $ scope-Vererbung in etwa der Struktur des DOM folgt, können Elemente nahtlos auf ihren eigenen Bereich und alle enthaltenen Bereiche zugreifen, bis hin zum globalen $ scope (der nicht mit dem globalen Bereich identisch ist).

Dies erleichtert das Weitergeben von Daten und das Speichern von Daten auf einer geeigneten Ebene erheblich. Wenn ein Dropdown entfaltet ist, muss nur der Dropdown-Bereich $ darüber informiert werden. 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.

Das hört sich vielleicht kompliziert an. Wenn Sie sich erst einmal entspannen, ist es, als würden Sie fliegen. Sie müssen das $ scope-Objekt nicht erstellen, AngularJS instanziiert und konfiguriert es für Sie, korrekt und entsprechend Ihrer Vorlagenhierarchie. AngularJS stellt es dann Ihrer Komponente mit der Magie der Abhängigkeitsinjektion zur Verfügung (dazu später mehr).

Manuelle DOM-Änderungen im Vergleich zur Datenbindung

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

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

Da die Datenbindung über die Vorlage mithilfe eines Attributs oder der Syntax für geschweifte Klammern erfolgt, ist dies sehr einfach. Es gibt wenig kognitiven Aufwand damit verbunden, so dass Sie es die ganze Zeit tun.

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

Bindet das Eingabeelement an $scope.user.name. Durch 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 ist eine Live-Bindung. Wenn also der Wert von $scope.user.name aktualisiert wird, wird auch die Vorlage aktualisiert.

Ajax die ganze Zeit

In jQuery ist das Tätigen eines Ajax-Aufrufs ziemlich einfach, aber es ist immer noch etwas, über das Sie sich zweimal Gedanken machen könnten. Es gibt die zusätzliche Komplexität, über die man nachdenken muss, und ein gutes Stück Skript, das gepflegt werden muss.

In AngularJS ist Ajax Ihre Standardlösung, und dies geschieht die ganze Zeit, fast ohne dass Sie es merken. Sie können Vorlagen mit ng-include einbinden. 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 - oder einen Flickr - Dienst erstellen, auf den Sie erstaunlich einfach zugreifen können.

Dienstobjekte 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 Closure 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.

Services sind einfache Objekte, die Funktionen und Daten enthalten. Sie sind immer Singletons, das heißt, es kann nie mehr als eine von ihnen geben. Angenommen, wir möchten auf die Stack Overflow-API zugreifen, schreiben wir möglicherweise ein StackOverflowService, das Methoden dafür definiert.

Nehmen wir an, wir haben einen Einkaufswagen. Möglicherweise definieren wir einen ShoppingCartService, der unseren Einkaufswagen 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 Einkaufswagen schreiben und Daten daraus abrufen. Es ist immer der gleiche Wagen.

Serviceobjekte sind eigenständige AngularJS-Komponenten, die wir nach eigenem Ermessen verwenden und wiederverwenden können. Sie sind einfache JSON-Objekte, die Funktionen und Daten enthalten. Es handelt sich immer um Singletons. Wenn Sie also Daten zu einem Dienst an einem Ort speichern, können Sie diese Daten an einen anderen Ort übertragen, indem Sie denselben Dienst anfordern.

Dependency Injection (DI) vs. Instatiation - aka De-Spaghettification

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 damit anfangen, ist es schwer zu erklären, was für ein enormer Zeitvorteil dies ist. In jQuery gibt es nichts Vergleichbares wie AngularJS DI.

DI bedeutet, dass Sie Ihre Anwendung nicht schreiben und miteinander verbinden, sondern eine Bibliothek von Komponenten definieren, die jeweils durch einen String 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 beim Deklarieren des Controllers nur den Namen des 'FlickrService' angeben. AngularJS sorgt dafür, dass die Komponente instanziiert und meinem Controller zur Verfügung gestellt wird.

Zum Beispiel definiere ich hier einen Service:

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

Wenn ich diesen Dienst nutzen möchte, verweise ich einfach mit folgendem Namen darauf:

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

AngularJS erkennt, dass ein FlickrService-Objekt zum Instanziieren des Controllers erforderlich ist, und stellt uns eines zur Verfügung.

Dies macht die Verkabelung sehr einfach und eliminiert so gut wie jede Neigung zur Spagettifizierung. Wir haben eine flache Liste von Komponenten, und AngularJS übergibt sie uns nach und nach, wenn 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 beispielsweise ein Skript schreiben, das mit Flickr kommuniziert, möchten Sie möglicherweise ein Flickr-Modul erstellen, in das alle Ihre Flickr-Funktionen eingebunden werden. Module können auch andere Module (DI) enthalten. Ihre Hauptanwendung ist normalerweise ein Modul. Dies sollte auch 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-Funktionen in Ihrer neuen Anwendung.

Module enthalten AngularJS-Komponenten. Wenn wir ein Modul einbinden, 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 eine Menge weniger jQuery benötigen als Sie könnten sonst verlangen.

Die Hauptsache ist, dass Ihre Vorlage Ihre Anwendung antreibt. Hören Sie auf, große Plugins zu schreiben, die alles können. Schreiben Sie stattdessen kleine Direktiven, die eine Sache 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.

184
superluminary

Können Sie den notwendigen Paradigmenwechsel beschreiben?

Imperativ vs Deklarativ

Mit jQuery teilen Sie dem DOM Schritt für Schritt mit, was geschehen soll. Mit AngularJS beschreiben Sie, welche Ergebnisse Sie erzielen möchten, aber nicht, wie Sie dies tun sollen. Mehr dazu hier . Schauen Sie sich auch Mark Rajcoks Antwort an.

Wie entwickle und gestalte ich clientseitige Webanwendungen anders?

AngularJS ist ein gesamtes clientseitiges Framework, das das Muster MVC verwendet (siehe deren grafische Darstellung ). Das Hauptaugenmerk liegt auf der Trennung von Anliegen.

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

jQuery ist eine Bibliothek

AngularJS ist ein wunderschönes clientseitiges Framework, das in hohem Maße testbar ist und jede Menge cooler Dinge wie MVC, Dependency Injection , Datenbindung und vieles mehr.

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

Der beste Weg, um zu beginnen, ist durch ihr tolles Tutorial . Sie können die Schritte in ein paar Stunden durchlaufen; Für den Fall, dass Sie die Konzepte hinter den Kulissen beherrschen möchten, bieten sie eine Vielzahl von Hinweisen für die weitere Lektüre.

Gibt es serverseitige Überlegungen/Einschränkungen?

Sie können es in vorhandenen Anwendungen verwenden, in denen Sie bereits pure jQuery verwenden. Wenn Sie jedoch die AngularJS-Funktionen voll ausnutzen möchten, können Sie die Serverseite mit einem RESTful -Ansatz codieren.

Auf diese Weise können Sie das Ressourcenfactory nutzen, das eine Abstraktion Ihrer serverseitigen RESTful API erstellt und serverseitige Aufrufe ausführt (abrufen, speichern, löschen, usw.) unglaublich einfach.

152
Ulises

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 Direktiven, um die Elemente direkt zu markieren und zu verdrahten:
<a ng-click="doStuff()">

AngularJS muss (oder möchte) nicht, dass Sie Elemente mithilfe von Selektoren finden - der Hauptunterschied zwischen AngularJSs jqLite und vollwertigem jQuery ist, dass jqLite nicht) Unterstützungsselektoren .

Wenn also Leute sagen, dass sie jQuery überhaupt nicht einschließen, liegt das hauptsächlich daran, dass sie nicht möchten, dass Sie Selektoren verwenden. Sie möchten, dass Sie stattdessen lernen, Anweisungen zu verwenden. Direkt, nicht auswählen!

84
Scott Rippey

jQuery

jQuery macht unglaublich lange JavaScript-Befehle wie getElementByHerpDerp kü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 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 <div> nicht überall ablegen müssen, nur um eine Anwendung zu erstellen. Dadurch funktioniert HTML tatsächlich für Anwendungen und nicht für das, wofür es entwickelt wurde - für statische, lehrreiche Webseiten. Mit JavaScript wird dies auf Umwegen erreicht, aber im Grunde ist es eine Erweiterung von HTML, nicht von JavaScript.

69
Nick Manning

jQuery: Sie denken viel darüber nach, das DOM für DOM-Elemente 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 Sie in einem bestimmten Format im DOM anzeigen möchten, müssen Sie in jQuery '1. FIND ', wo im DOM Sie diese Daten platzieren möchten, die' 2. UPDATE/APPEND 'es dort durch Erstellen eines neuen Knotens oder setzen Sie einfach sein innerHTML . Wenn Sie dann diese Ansicht aktualisieren möchten, wählen Sie '3. FIND 'den Ort und' 4. AKTUALISIEREN'. Dieser Zyklus des Findens und Aktualisierens aller im selben Kontext durchgeführten Vorgänge zum Abrufen und Formatieren von Daten vom Server ist in AngularJS weggefallen.

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. Ich muss nicht darüber nachdenken. Sie finden sich in AngularJS wieder und finden keine Dinge mehr im DOM.

Anders ausgedrückt, in jQuery müssen Sie über CSS-Selektoren nachdenken, d. H., Wo ist div oder td, die eine Klasse oder ein Attribut usw. haben, damit ich deren erhalten kann HTML oder Farbe oder Wert, aber in AngularJS denken Sie wie folgt: Mit welchem ​​Modell ich es zu tun habe, setze ich den Wert des Modells auf true. Sie kümmern sich nicht darum, ob die Ansicht, die diesen Wert widerspiegelt, ein Kontrollkästchen ist oder sich in einem td -Element befindet (Details, über die Sie in jQuery häufig nachgedacht hätten).

Und mit der DOM-Manipulation in AngularJS fügen Sie Anweisungen 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 erklärt, wie man Dinge macht, aber die Vorteile sind es wert, AngularJS zu lernen In der Regel bedeutet dies, dass Sie lernen, was AngularJS will oder wie AngularJS es erfordert, dass Sie Ihre Funktionen präsentieren, und dies wird entsprechend aufgerufen. Dies ist eines der Dinge, die AngularJS zu einem Framework und nicht zu einer Bibliothek machen.

61
Samuel

Das sind einige sehr nette, aber langwierige Antworten.

Um meine Erfahrungen zusammenzufassen:

  1. Controller und Provider (Dienste, Fabriken usw.) dienen zum Ändern des Datenmodells, NICHT 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 - es handelt sich um Singletons, die in der 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-Code an das Modell gebunden ist.
46
Dan

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 wann aufgerufen werden soll!

AngularJS selbst enthält eine jQuery-Lite-Edition. Für einige grundlegende DOM-Auswahl-/Manipulationsvorgänge muss die jQuery-Bibliothek also nicht unbedingt enthalten sein (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 also immer dann verwenden, wenn Sie das Bedürfnis haben, DOM-Manipulations-bezogene Dinge zu tun (Direktiven sind nur Orte, an denen Sie jQuery-Code schreiben sollten, wenn Sie AngularJS verwenden).

AngularJS beinhaltet einige Lernkurven (mehr als jQuery :-).

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

Viel Glück.

45
Sutikshan Dubey

Das sind Äpfel und Orangen. Du willst 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 DOM-Manipulation. Es behebt alle Kreuzbrowserschmerzen, mit denen Sie sonst fertig werden müssen, aber es ist kein Framework, mit dem Sie Ihre App in Komponenten wie AngularJS unterteilen können.

Das Schöne an AngularJs ist, dass Sie die DOM-Manipulation in den Direktiven trennen/isolieren können. Es gibt integrierte Direktiven, die Sie verwenden können, z. B. ng-click. Sie können Ihre eigenen benutzerdefinierten Direktiven erstellen, die Ihre gesamte Ansichtslogik oder DOM-Manipulation enthalten, damit Sie nicht DOM-Manipulationscode in die Controller oder Services mischen, die sich um die Geschäftslogik kümmern sollen.

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

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

Ich habe von einem Treffen gehört, an dem ich teilgenommen habe, und einer der Gründer von Angular sagte, dass sie wirklich hart daran gearbeitet haben, die DOM-Manipulation herauszufiltern. Versuchen Sie also nicht, sie wieder einzubeziehen.

34
Jin

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

Einer der Punkte, die im Podcast angesprochen wurden, hat dazu geführt, dass viele Dinge in Bezug auf Ihre Frage auf mich klicken:

MISKO: [...] Eines der Dinge, über die wir in Angular kaum nachgedacht haben, ist, wie wir liefern viele Notluken, so dass Sie raus und im Grunde einen Ausweg finden können. Für uns heißt 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 also Direktive als Anweisung an den Compiler vor, die Sie benachrichtigt, wenn 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 in der DOM-Struktur verantwortlich.

Ein Transkript der gesamten Episode finden Sie unter dem oben angegebenen Link.

Zur direkten Beantwortung Ihrer Frage: AngularJS ist sehr einsichtig und ein echtes MV * -Framework. Sie können jedoch all die wirklich coolen Dinge, die Sie kennen und lieben, mit jQuery innerhalb von Direktiven tun. Es geht nicht um "Wie mache ich das, was ich in jQuery getan habe?" So viel wie es sich um "Wie kann ich AngularJS mit all den Dingen ergänzen, die ich früher in jQuery getan habe?"

Es sind wirklich zwei sehr unterschiedliche Geisteszustände.

31
codevinsky

Ich finde diese Frage interessant, weil ich zum ersten Mal ernsthaft mit JavaScript-Programmierung zu tun hatte Node.js und AngularJS. 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 schätze, meine Antwort auf diese Frage würde sich im Wesentlichen darauf beschränken, "wie jemand zu denken, der jQuery nie gelernt hat" und die Versuchung zu vermeiden, jQuery direkt zu integrieren (AngularJS verwendet es offensichtlich in gewissem Maße hinter den Kulissen).

30
Evan Zamir

AngularJS und jQuery:

AngularJs und JQuery unterscheiden sich mit Ausnahme der JQLite-Funktionalität auf jeder Ebene vollständig, und Sie werden es 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 das DOM umspielt.

AngularJs Cooles Prinzip - Wenn Sie einige Änderungen an Ihrer Benutzeroberfläche vornehmen möchten, denken Sie aus der Perspektive des Modelldatenwechsels. Ändern Sie Ihre Daten und die Benutzeroberfläche wird sich selbst neu rendern. Sie müssen nicht jedes Mal mit DOM herumspielen, es sei denn, dies ist so lange nicht erforderlich, und dies sollte auch über Angular-Direktiven erfolgen.

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

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

Wiederverwendbare Direktiven sind super: Schreiben Sie Direktiven 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 hängt von Ihrer Implementierung ab, wie Sie es verwenden möchten, es erfordert jedoch nur sehr wenige Codezeilen, um die Anforderung zum Angeben von HTML und zu routen Controller (JavaScript)

Controller sind großartig: Controller kümmern sich um ihr eigenes HTML, aber diese Trennung funktioniert auch für allgemeine Funktionen. Wenn Sie die gleiche Funktion beim Klicken auf eine Schaltfläche in Master-HTML aufrufen möchten, schreiben Sie einfach in jeden Controller den gleichen Funktionsnamen 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. Verwenden Sie einfach ein Overlay-Plugin, das als wc-overlay verfügbar ist. Dadurch werden automatisch alle XMLHttpRequest (XHR) -Anfragen 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

Dienste : Schreiben Sie allgemeine Codes mit Diensten und weniger Code in Controllern. Mit Hilfe von Services können die Steuerungen gemeinsame Funktionen nutzen.

Erweiterbarkeit : Angular hat die HTML-Anweisungen mit angular-Anweisungen 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.

23
Sanjeev Singh

Als Anfänger von JavaScript MV *, der sich ausschließlich auf die Anwendungsarchitektur konzentriert (nicht auf die Server-/Client-Seite), würde ich mit Sicherheit die folgende Ressource empfehlen (die ich überraschenderweise noch nicht erwähnt habe): 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 wurde. Stattdessen verweist diese Antwort auf die theoretischen Hintergründe , die AngularJS (und andere Bibliotheken) antreiben.

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

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

Zum Beispiel:

  • JavaScript Object-oriented Programming (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 / nderscore für das Fassadenmuster (wie WYSIWYGs für die Manipulation des DOM)
  • Prototype.js für das Muster prototype/constructor/mixin
  • RequireJS / Curl.js für das Modulmuster/AMD
  • KnockoutJS für das beobachtbare Publish/Subscribe-Muster

Hinweis: Diese Liste ist weder vollständig noch enthält sie die besten Bibliotheken. Es sind einfach die Bibliotheken, die ich benutzt habe. Diese Bibliotheken enthalten auch mehr Muster, die genannten sind nur ihre Hauptfokusse oder ursprünglichen Absichten. Wenn Sie das Gefühl haben, dass etwas in dieser Liste fehlt, erwähnen Sie es bitte in den Kommentaren, und ich werde es gerne hinzufügen.

20
Tyblitz

Wenn Sie AngularJS verwenden, brauchen 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 machen können.

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

Wenn ich google, sehe ich, dass es ein eigenständiges jQuery-Auswahlmodul gibt. Es ist Sizzle.

Und ich habe mich dazu entschlossen, ein winziges Code-Snippet zu erstellen, mit dem ich mithilfe von jQuery Selector (mit Sizzle) schnell eine Website mit AngularJS starten kann.

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

12
Huy Tran