it-swarm.com.de

Ist es sinnvoll, Require.js mit Angular.js zu verwenden?

Ich bin ein Neuling in Angular.js und versuche zu verstehen, wie es sich von Backbone.js unterscheidet ... Wir haben unsere Paketabhängigkeiten mit Require.js verwaltet, während wir Backbone verwendet haben. Ist es sinnvoll, dasselbe mit Angular.js zu tun?

443
Franck

Ja, es ist sinnvoll, angular.js zusammen mit require.js zu verwenden, wobei Sie require.js zum Modularisieren von Komponenten verwenden können.

Ich kann Sie auf ein Startprojekt verweisen, das both angular.js and require.js verwendet. Ich hoffe, das hilft!

223
Anshu

Um noch einmal zu sagen, was meiner Meinung nach die eigentliche Frage des OP ist:

Wenn ich eine Anwendung hauptsächlich in Angular 1.x erstelle und dies (implizit) in der Ära von Grunt/Gulp/Broccoli und Bower/NPM tue und vielleicht ein paar zusätzliche Bibliotheksabhängigkeiten habe, Fügt Require einen eindeutigen, spezifischen Wert hinzu, der über den Wert hinausgeht, den ich mit Angular ohne Require erhalte?

Oder anders ausgedrückt:

"Muss Vanilla Angular das Laden von grundlegenden Angular Komponenten effektiv verwalten , wenn ich andere Möglichkeiten habe, das Laden von grundlegenden Skripten zu handhaben? "

Und ich glaube, die grundlegende Antwort darauf lautet: "Nicht, wenn Sie nicht etwas anderes vorhaben und/oder Sie nicht in der Lage sind, neuere, modernere Tools zu verwenden."

Lassen Sie uns gleich zu Beginn klar sein: RequireJS ist ein großartiges Tool, das einige sehr wichtige Probleme gelöst hat und uns auf den Weg zu skalierbareren, professionelleren Javascript-Anwendungen gebracht hat. Es war das erste Mal, dass viele Menschen auf das Konzept der Modularisierung stießen und Dinge aus dem globalen Rahmen rausholten. Wenn Sie also eine Javascript-Anwendung erstellen, die skaliert werden muss, sind Require und das AMD-Muster keine schlechten Werkzeuge dafür.

Aber hat Angular etwas Besonderes, das Require/AMD besonders gut passt? Nein. Tatsächlich ist Angular bietet Ihnen ein eigenes Modularisierungs- und Kapselungsmuster, das die grundlegenden Modularisierungsfunktionen von AMD in vielerlei Hinsicht überflüssig macht. Die Integration von Angular Modulen in das AMD-Muster ist nicht unmöglich, aber ein bisschen ... knifflig. Sie werden auf jeden Fall Zeit damit verbringen, die beiden Muster gut zu integrieren.

Für eine Perspektive vom Angular-Team selbst gibt es this von Brian Ford, Autor des Angular Batarang und jetzt Mitglied des Angular >] _ Kernteam:

Ich empfehle nicht, RequireJS mit AngularJS zu verwenden. Obwohl es sicherlich möglich ist, habe ich noch keinen Fall gesehen, in dem RequireJS in der Praxis von Vorteil war.

Also, auf die sehr spezifische Frage von AngularJS: Angular und Require/AMD sind orthogonal und stellenweise überlappend. Sie können sie zusammen verwenden, aber es gibt keinen Grund, der speziell mit der Art/den Mustern von Angular selbst zusammenhängt.

Wie sieht es aber mit der grundlegenden Verwaltung interner und externer Abhängigkeiten für skalierbare Javascript-Anwendungen aus? Muss ich da nicht etwas wirklich kritisches für mich tun?

Ich empfehle, Bower und NPM und insbesondere NPM zu besuchen. Ich versuche nicht, einen heiligen Krieg über die komparativen Vorteile dieser Werkzeuge zu beginnen. Ich möchte nur sagen: Es gibt andere Möglichkeiten, diese Katze zu häuten, und diese Möglichkeiten können sogar besser sein als AMD/Require. (Sie haben Ende 2015 sicherlich eine viel größere Dynamik, insbesondere NPM, kombiniert mit ES6- oder CommonJS-Modulen. Siehe verwandte SO Frage .)

Was ist mit Lazy-Loading?

Beachten Sie, dass Lazy-Loading und Lazy-Download unterschiedlich sind. Angulars fauler Ladevorgang bedeutet nicht, dass Sie sie direkt vom Server ziehen. In einer Anwendung im Yeoman-Stil mit JavaScript-Automatisierung verknüpfen und minimieren Sie den gesamten Shebang in einer einzigen Datei. Sie sind vorhanden, werden jedoch erst ausgeführt/instanziiert, wenn sie benötigt werden. Die Geschwindigkeits- und Bandbreitenverbesserungen, die Sie dadurch erzielen, überwiegen bei weitem die angeblichen Verbesserungen, die durch das verzögerte Herunterladen eines bestimmten Controllers mit 20 Leitungen erzielt werden. Tatsächlich wird die verschwendete Netzwerklatenz und der Übertragungsaufwand für diesen Controller eine Größenordnung größer sein als die Größe des Controllers selbst.

Nehmen wir jedoch an, Sie müssen wirklich verzögert herunterladen, möglicherweise für selten verwendete Teile Ihrer Anwendung, z. B. eine Administrationsoberfläche. Das ist ein sehr legitimer Fall. Require kann das ja für dich tun. Aber es gibt auchvieleandere , möglicherweisemehrflexibelOptionen dasselbe erreichen. Und Angular 2.0 wird sich anscheinend darum kümmern, eingebaut in den Router . ( Details .)

Aber was ist mit der Entwicklung auf meiner lokalen Entwickler-Box?

Wie kann ich alle meine Dutzende/Hunderte von Skriptdateien laden, ohne sie alle manuell an index.html anhängen zu müssen?

Werfen Sie einen Blick auf die Subgeneratoren in Yeomans Generator-Angular oder auf die Automatisierungsmuster in Generator-Schluck-Angular oder auf die Standard-Webpack-Automatisierung für React. Diese bieten eine übersichtliche, skalierbare Möglichkeit, um entweder die Dateien automatisch an das Gerüst anzuhängen oder sie alle automatisch zu erfassen, wenn sie in bestimmten Ordnern vorhanden sind oder bestimmten Glob-Mustern entsprechen. Sie müssen nie wieder über das Laden von Skripten nachdenken, wenn Sie die letztgenannten Optionen haben.

Endeffekt?

Require ist für bestimmte Dinge ein großartiges Werkzeug. Aber gehen Sie, wann immer möglich, mit dem Getreide um und trennen Sie Ihre Bedenken, wann immer möglich. Lassen Sie Angular sich Gedanken über Angulars eigenes Modularisierungsmuster machen und erwägen Sie, ES6-Module oder CommonJS als allgemeines Modularisierungsmuster zu verwenden. Lassen Sie moderne Automatisierungstools sich Gedanken über das Laden von Skripten und das Management von Abhängigkeiten machen. Und kümmern Sie sich um das asynchrone Lazy-Loading auf granulare Weise, anstatt es mit den anderen beiden Aspekten zu verwechseln.

Das heißt, wenn Sie Angular Apps entwickeln, jedoch Node nicht auf Ihrem Computer installieren können, um aus irgendeinem Grund JavaScript-Automatisierungstools zu verwenden, ist Require möglicherweise eine gute Alternative. Und ich habe wirklich ausgefeilte Setups gesehen, in denen Leute Angular Komponenten dynamisch laden möchten, die jeweils ihre eigenen Abhängigkeiten oder etwas anderes deklarieren. Und obwohl ich wahrscheinlich versuchen würde, dieses Problem auf andere Weise zu lösen, kann ich die Vorzüge der Idee für diese spezielle Situation erkennen.

Aber ansonsten ... haben Sie, wenn Sie mit einer neuen Angular -Anwendung und Flexibilität beginnen, um eine moderne Automatisierungsumgebung zu erstellen, viele andere, flexiblere und modernere Optionen.

(Wird wiederholt aktualisiert, um mit der sich entwickelnden JS-Szene Schritt zu halten.)

151
XML

Ja, das macht Sinn.

Winkelmodule versuchen nicht, das Problem der Skriptladereihenfolge oder des verzögerten Skriptabrufs zu lösen. Diese Ziele sind orthogonal und beide Modulsysteme können nebeneinander leben und ihre Ziele erfüllen.

Quelle: Offizielle Website von Angular JS

135
Tiago Reis

Dies ist meiner Meinung nach eine subjektive Frage, daher werde ich meine subjektive Meinung abgeben.

Angular verfügt über einen integrierten Modularisierungsmechanismus. Wenn Sie Ihre App erstellen, ist das erste, was Sie tun würden

var app = angular.module("myApp");

und dann

app.directive(...);

app.controller(...);

app.service(...);

Wenn Sie sich die Angular-Seed-App ansehen, die eine nette Starter-App für Angular ist, haben sie die Anweisungen, Dienste, Steuerungen usw. in verschiedene Module aufgeteilt und diese Module dann als Abhängigkeiten von Ihrer Haupt-App geladen.

So etwas wie :

var app = angular.module("myApp",["Directives","Controllers","Services"];

Angular lädt auch faul diese Module (in den Speicher), nicht ihre Skriptdateien.

Um ehrlich zu sein, wenn Sie Skriptdateien nicht faul laden, wäre dies ein Overkill, da angular von Natur aus die Menge des von Ihnen geschriebenen Codes verringert. Eine typische App, die in den meisten anderen Frameworks geschrieben wurde, kann eine Reduzierung des LOC um ca. 30-50% erwarten, wenn sie in eckiger Form geschrieben wird.

57
ganaraj

Die Verwendung von RequireJS mit AngularJS ist sinnvoll, aber nur dann, wenn Sie verstehen, wie jede von ihnen in Bezug auf die Abhängigkeitsinjektion funktioniert, da beide Abhängigkeiten injizieren, diese jedoch sehr unterschiedlich injizieren Dinge.

AngularJS verfügt über ein eigenes Abhängigkeitssystem, mit dem Sie AngularJS-Module in ein neu erstelltes Modul einfügen können, um Implementierungen wiederzuverwenden. Angenommen, Sie haben ein "erstes" Modul erstellt, das einen AngularJS-Filter "greet" implementiert:

angular
  .module('first', [])
  .filter('greet', function() {
    return function(name) {
      return 'Hello, ' + name + '!';
    }
  });

Angenommen, Sie möchten den "Begrüßungs" -Filter in einem anderen Modul namens "second" verwenden, das einen "Goodbye" -Filter implementiert. Sie können dies tun, indem Sie das "erste" Modul in das "zweite" Modul einfügen:

angular
  .module('second', ['first'])
  .filter('goodbye', function() {
    return function(name) {
      return 'Good bye, ' + name + '!';
    }
  });

Damit dies ohne RequireJS korrekt funktioniert, müssen Sie sicherstellen, dass das "erste" AngularJS-Modul auf der Seite geladen ist, bevor Sie das "zweite" AngularJS-Modul erstellen. Angebotsunterlagen:

Abhängig von einem Modul bedeutet dies, dass das erforderliche Modul geladen werden muss, bevor das erforderliche Modul geladen wird.

In diesem Sinne kann Ihnen RequireJS hier helfen, da RequireJS eine übersichtliche Methode zum Einfügen von Skripten in die Seite bietet, mit der Sie die Skriptabhängigkeiten untereinander organisieren können.

Gehen Sie zurück zu den "ersten" und "zweiten" AngularJS-Modulen. Gehen Sie dazu wie folgt vor:

// firstModule.js file
define(['angular'], function(angular) {
  angular
    .module('first', [])
    .filter('greet', function() {
      return function(name) {
        return 'Hello, ' + name + '!';
      }
    });
});
// secondModule.js file
define(['angular', 'firstModule'], function(angular) {
  angular
    .module('second', ['first'])
    .filter('goodbye', function() {
      return function(name) {
        return 'Good bye, ' + name + '!';
      }
    });
});

Sie können sehen, dass wir von der "firstModule" -Datei abhängig sind, die eingefügt werden soll, bevor der Inhalt des RequireJS-Rückrufs ausgeführt werden kann, für den das "erste" AngularJS-Modul geladen werden muss, um das "zweite" AngularJS-Modul zu erstellen.

Randnotiz: Um AngularJS in der RequireJS-Rückruffunktion verwenden zu können, muss "angular" in die Dateien "firstModule" und "secondModule" als Abhängigkeit eingefügt und in RequireJS config so konfiguriert werden, dass "angular" dem Bibliothekscode zugeordnet wird. Möglicherweise wird AngularJS auch auf herkömmliche Weise auf die Seite geladen (Skript-Tag), obwohl die Vorteile von RequireJS zunichte gemacht werden.

Weitere Details zur RequireJS-Unterstützung vom AngularJS-Core ab Version 2.0 in meinem Blogbeitrag.

Basierend auf meinem Blog-Beitrag "Aus RequireJS mit AngularJS Sinn machen" , hier ist der Link .

33
leog

Wie @ganaraj bereits erwähnt hat AngularJS eine Abhängigkeitsinjektion im Kern. Beim Erstellen von Spielzeugsaatgutanwendungen mit und ohne RequireJS stellte ich persönlich fest, dass RequireJS für die meisten Anwendungsfälle wahrscheinlich zu viel des Guten war.

Das bedeutet nicht, dass RequireJS nicht für das Laden von Skripten und das Reinhalten der Codebasis während der Entwicklung nützlich ist. Kombination des r.js-Optimierers ( https://github.com/jrburke/r.js ) mit Mandel ( https://github.com/jrburke/almond ) kann eine sehr schlanke Geschichte zum Laden von Skripten erstellen. Da jedoch die Funktionen für das Abhängigkeitsmanagement bei angular im Kern Ihrer Anwendung nicht so wichtig sind, können Sie auch andere Clientseiten (HeadJS, LABjs, ...) oder sogar Serverseiten (MVC4 Bundler,. ..) Skriptladelösungen für Ihre spezielle Anwendung.

21
johlrich

Ja, speziell für sehr große SPAs.

In einigen Szenarien ist RequireJS ein Muss. Zum Beispiel entwickle ich PhoneGap-Anwendungen mit AngularJS, das auch die Google Map API verwendet. Ohne AMD-Loader wie RequireJS würde die App beim Start einfach abstürzen, wenn sie offline ist, da die Google Map-API-Skripts nicht als Quelle verwendet werden können. Mit einem AMD-Loader kann ich dem Benutzer eine Fehlermeldung anzeigen.

Die Integration zwischen AngularJS und RequireJS ist jedoch etwas schwierig. Ich habe angleAMD erstellt, um diesen Prozess weniger schmerzhaft zu gestalten:

http://marcoslin.github.io/angularAMD/

17
marcoseu

Kurze Antwort ist, es macht Sinn. Kürzlich wurde dies in der ng-conf 2014 diskutiert. Hier ist der Vortrag zu diesem Thema:

http://www.youtube.com/watch?v=4yulGISBF8w

12
Dalorzo

Es ist sinnvoll, requirejs mit angularjs zu verwenden, wenn Sie verzögertes Laden von Controllern und Direktiven usw. planen, und gleichzeitig mehrere verzögerte Abhängigkeiten in einzelne Skriptdateien zu kombinieren, um das verzögerte Laden erheblich zu beschleunigen. RequireJS hat ein Optimierungswerkzeug , das das Kombinieren erleichtert. Siehe http://ify.io/using-requirejs-with-optimization-for-lazy-loading-angularjs-artefacts/

7
ify.io

Ja, es ist sinnvoll, requireJS mit Angular zu verwenden. Ich habe mehrere Tage damit verbracht, verschiedene technische Lösungen zu testen.

Ich habe ein Angular Seed mit RequireJS auf der Serverseite erstellt. Sehr einfach. Ich verwende die SHIM-Notation für kein AMD-Modul und nicht für AMD, da es meiner Meinung nach sehr schwierig ist, mit zwei verschiedenen Dependency-Injektionssystemen umzugehen.

Ich benutze grunt und r.js, um js-Dateien auf dem Server zu verketten. Dies hängt von der SHIM-Konfigurationsdatei (Abhängigkeit) ab. Daher verweise ich in meiner App nur auf eine js-Datei.

Weitere Informationen finden Sie auf meinem Github Angular Seed: https://github.com/matohawk/angular-seed-requirejs

7
Matohawk

Ich würde die Verwendung von Require.js vermeiden. Apps, die ich gesehen habe, führen zu einem Durcheinander mehrerer Arten von Modulmusterarchitekturen. AMD, Revealing, verschiedene Geschmacksrichtungen von IIFE usw. Es gibt andere Möglichkeiten zum Laden bei Bedarf, wie z. B. den loadOnDemand Angular mod . Das Hinzufügen von anderem Material füllt Ihren Code nur mit Cruft und erzeugt ein niedriges Signal-Rausch-Verhältnis und macht Ihren Code schwer lesbar.

3

Hier ist der Ansatz, den ich benutze: http://thaiat.github.io/blog/2014/02/26/angularjs-and-requirejs-for-very-large-applications/

Die Seite zeigt eine mögliche Implementierung von AngularJS + RequireJS, wobei der Code nach Features und anschließend nach Komponententyp aufgeteilt wird.

2
Avi Haiat

Antwort von Brian Ford

AngularJS hat ein eigenes Modulsystem und benötigt normalerweise kein RJS.

Referenz: https://github.com/yeoman/generator-angular/issues/4

1
stevemao

Ich denke, dass es von Ihrer Projektkomplexität abhängt, da angular ziemlich modularisiert ist. Ihre Controller können zugeordnet werden und Sie können diese JavaScript-Klassen einfach in Ihre index.html-Seite importieren.

Aber für den Fall, dass Ihr Projekt größer wird. Wenn Sie ein solches Szenario erwarten, sollten Sie angular in requirejs integrieren. In this Artikel sehen Sie eine Demo-App für eine solche Integration.

0
lastboy