Macht es Sinn, Require.js mit Angular.js zu verwenden?

Question

Ich bin ein Neuling in Angular.js und versuche zu verstehen, wie es sich von Backbone.js... Wir haben unsere Pakete Abhängigkeiten mit Require.js zu verwalten, während mit Backbone. Macht es Sinn, dasselbe mit Angular.js zu tun?

Answer 1

Ja, es macht Sinn, die angular.js zusammen mit require.js wobei Sie Folgendes verwenden können require.js für die Modularisierung von Komponenten.

Hay un Saatgutprojekt die die both angular.js and require.js .

Answer 2

Um noch einmal zu sagen, was ich denke, was die Frage des Auftraggebers wirklich ist:

Wenn ich eine Anwendung hauptsächlich in Angular 1.x baue und dies (implizit) in der Ära von Grunt/Gulp/Broccoli und Bower/NPM tue, und ich vielleicht ein paar zusätzliche Bibliotheksabhängigkeiten habe, bietet Require einen klaren, spezifischen Mehrwert, der über das hinausgeht, was ich erhalte, wenn ich Angular ohne Require verwende?

Oder, anders ausgedrückt:

"Benötigt Vanilla Angular Require, um das Laden von Angular-Komponenten effektiv zu verwalten, ob ich andere Möglichkeiten habe, das Laden von Skripten zu handhaben? "

Und ich glaube, die grundlegende Antwort darauf lautet: "Nein, es sei denn, Sie haben etwas anderes zu tun und/oder Sie sind nicht in der Lage, neuere, modernere Werkzeuge zu verwenden."

Um es gleich vorweg zu nehmen: RequireJS ist ein großartiges Tool, das einige sehr wichtige Probleme gelöst hat und uns auf den Weg zu skalierbaren, professionelleren Javascript-Anwendungen gebracht hat, auf dem wir uns jetzt befinden. Wichtig ist auch, dass es das erste Mal war, dass viele Leute mit dem Konzept der Modularisierung in Berührung kamen und damit, Dinge aus dem globalen Bereich herauszuholen. Wenn man also eine Javascript-Anwendung bauen will, die skalierbar sein soll, dann sind Require und das AMD-Pattern keine schlechten Werkzeuge, um das zu tun.

Aber, Gibt es irgendetwas Besonderes an Angular, das Require/AMD zu einer besonders guten Lösung macht? Nein. Tatsächlich bietet Angular ein eigenes Modularisierungs- und Kapselungsmuster, das die grundlegenden Modularisierungsfunktionen von AMD in vielerlei Hinsicht überflüssig macht. Und die Integration von Angular-Modulen in das AMD-Muster ist nicht unmöglich, aber es ist ein bisschen... heikel. Sie werden definitiv Zeit damit verbringen, die beiden Muster gut zu integrieren.

Für eine Perspektive des Angular-Teams selbst, gibt es este von Brian Ford, Autor des Angular Batarang und jetzt Mitglied des Angular Core Teams:

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

Nun zu der sehr spezifischen Frage von AngularJS: Angular und Require/AMD sind orthogonal und überschneiden sich teilweise. Sie kann verwenden Sie sie zusammen, aber es gibt keinen Grund speziell auf die Art / Muster von Angular selbst bezogen.

Aber wie sieht es mit der grundlegenden Verwaltung von internen und externen Abhängigkeiten für skalierbare Javascript-Anwendungen aus? Leistet Require da nicht etwas wirklich Entscheidendes für mich?

Ich empfehle, sich Bower und NPM anzusehen, insbesondere NPM. Ich versuche nicht, einen heiligen Krieg über die vergleichbaren Vorteile dieser Tools zu beginnen. Ich möchte nur sagen: Es gibt andere Wege, diese Katze zu häuten, und diese Wege Mai noch besser sein als AMD/Require. (Sie haben sicherlich viel mehr populäre Momentum in Ende 2015, insbesondere NPM, kombiniert mit ES6 oder CommonJS Module. Siehe zugehörige SO-Frage .)

Wie steht es mit dem "faulen Laden"?

Beachten Sie, dass "lazy-loading" und "lazy-downloading" unterschiedlich sind. Das Lazy-Loading von Angular bedeutet nicht, dass Sie die Daten direkt vom Server abrufen. In einer Yeoman-Stil Anwendung mit Javascript-Automatisierung, Sie sind Verkettung und Minifying die ganze shebang zusammen in einer einzigen Datei. Sie sind zwar vorhanden, werden aber erst bei Bedarf ausgeführt/instantiiert. Die Geschwindigkeits- und Bandbreitenverbesserungen, die sich daraus ergeben, überwiegen bei weitem alle angeblichen Verbesserungen, die sich aus dem faulen Herunterladen eines bestimmten 20-Zeilen-Controllers ergeben. In der Tat wird die verschwendete Netzwerklatenz und der Übertragungsoverhead für diesen Controller um eine Größenordnung größer sein als die Größe des Controllers selbst.

Aber nehmen wir an, Sie brauchen wirklich Lazy-Downloading, vielleicht für selten genutzte Teile Ihrer Anwendung, wie z. B. eine Verwaltungsoberfläche. Das ist ein sehr legitimer Fall. Require kann das tatsächlich für Sie tun. Aber es gibt auch viele andere , Möglicherweise mehr flexibel Optionen die das Gleiche bewirken. Und Angular 2.0 wird sich anscheinend für uns darum kümmern, eingebaut in die Router . ( 詳細 .)

Aber was ist mit der Entwicklung auf meinen lokalen Dev-Boxen?

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 Untergeneratoren in Yeoman's generator-angular oder auf die Automatisierungsmuster, die in generator-gulp-angular oder bei der Standard-Webpack-Automatisierung für React. Diese bieten Ihnen einen sauberen, skalierbaren Weg, um entweder: die Dateien automatisch anzuhängen, wenn die Komponenten gerüstet werden, oder sie einfach alle automatisch zu greifen, wenn sie in bestimmten Ordnern vorhanden sind/auf bestimmte Glob-Patterns passen. Mit den letztgenannten Optionen müssen Sie sich nie wieder Gedanken über das Laden Ihrer eigenen Skripte machen.

Das Fazit?

Require ist ein großartiges Werkzeug für bestimmte Dinge. Aber gehen Sie, wann immer möglich, mit der Zeit und trennen Sie Ihre Anliegen, wann immer möglich. Lassen Sie Angular sich um Angulars eigenes Modularisierungsmuster kümmern und ziehen Sie die Verwendung von ES6-Modulen oder CommonJS als allgemeines Modularisierungsmuster in Betracht. Überlassen Sie modernen Automatisierungswerkzeugen das Laden von Skripten und die Verwaltung von Abhängigkeiten. Und kümmern Sie sich um asynchrones Lazy-Loading auf eine granulare Weise, anstatt es mit den anderen beiden Belangen zu verquicken.

Das heißt, wenn Sie Angular-Apps entwickeln, aber aus irgendeinem Grund kein Node auf Ihrem Rechner installieren können, um Javascript-Automatisierungstools zu verwenden, dann könnte Require eine gute Alternativlösung sein. Und ich habe wirklich aufwendige Setups gesehen, bei denen Leute Angular-Komponenten dynamisch laden wollen, die jeweils ihre eigenen Abhängigkeiten oder so deklarieren. Und während ich wahrscheinlich versuchen würde, dieses Problem auf eine andere Weise zu lösen, kann ich die Vorzüge der Idee sehen, für diese sehr spezielle Situation.

Aber ansonsten... wenn man mit einer neuen Angular-Anwendung und der Flexibilität, eine moderne Automatisierungsumgebung zu erstellen, bei Null anfängt... hat man eine Menge anderer, flexiblerer und modernerer Optionen.

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

Answer 3

Ja, das macht Sinn.

Angular-Module versuchen nicht, das Problem zu lösen oder das faule Abrufen von Skripten zu lösen. Diese Ziele sind orthogonal und beide Modul Systeme können nebeneinander existieren und ihre Ziele erfüllen.

_Quelle: Angular JS offizielle Website_

Answer 4

Ich glaube, dass dies eine subjektive Frage ist, daher werde ich meine subjektive Meinung darlegen.

Angular hat einen eingebauten Modularisierungsmechanismus. Wenn Sie Ihre Anwendung erstellen, ist das erste, was Sie tun würden

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

und dann

app.directive(...);

app.controller(...);

app.service(...);

Wenn Sie einen Blick auf die Angular-Saatgut, die ordentlich Starter-App für Angular ist, haben sie die Richtlinien, Dienste, Controller usw. in verschiedenen Modulen getrennt und dann diese Module als Abhängigkeiten auf Ihre Haupt-App geladen.

Etwa so:

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

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

In Bezug auf Lazy Loading Skript-Dateien, um ehrlich zu sein, es sei denn, Sie schreiben etwas extrem groß wäre es ein Overkill sein, weil Angular von Natur aus reduziert die Menge an Code, den Sie schreiben. Eine typische App, die in den meisten anderen Frameworks geschrieben wurde, könnte eine Reduzierung von etwa 30-50 % in LOC erwarten, wenn sie in Angular geschrieben wurde.

Answer 5

Die Verwendung von RequireJS mit AngularJS ist sinnvoll, aber nur, wenn Sie verstehen, wie jede der beiden Komponenten funktioniert Dependency Injection denn obwohl beide Abhängigkeiten injizieren, injizieren sie sehr unterschiedliche Dinge.

AngularJS hat ein eigenes Abhängigkeitssystem, mit dem Sie AngularJS-Module in ein neu erstelltes Modul injizieren können, um Implementierungen wiederzuverwenden. Nehmen wir an, Sie haben ein "erstes" Modul erstellt, das einen AngularJS-Filter "greet" implementiert:

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

Nehmen wir nun an, Sie möchten den Filter "greet" in einem anderen Modul namens "second" verwenden, das einen Filter "goodbye" implementiert. Sie können das tun, indem Sie das "erste" Modul in das "zweite" Modul injizieren:

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

Damit dies auch ohne RequireJS funktioniert, muss man sicherstellen, dass das "erste" AngularJS-Modul auf der Seite geladen ist, bevor man das "zweite" AngularJS-Modul erstellt. Ich zitiere die Dokumentation:

Die Abhängigkeit von einem Modul impliziert, dass das erforderliche Modul geladen werden muss geladen werden muss, bevor das erforderliche Modul geladen wird.

In diesem Sinne kann RequireJS Ihnen helfen, da RequireJS einen sauberen Weg bietet, Skripte in die Seite zu injizieren und Ihnen hilft, Skriptabhängigkeiten untereinander zu organisieren.

Zurück zu den "ersten" und "zweiten" AngularJS-Modulen: Hier sehen Sie, wie Sie mit RequireJS die Module in verschiedene Dateien aufteilen können, um das Laden von Skript-Abhängigkeiten zu nutzen:

// 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 davon abhängig sind, dass die Datei "firstModule" injiziert wird, bevor der Inhalt des RequireJS-Callbacks ausgeführt werden kann, der das "erste" AngularJS-Modul laden muss, um das "zweite" AngularJS-Modul zu erstellen.

Nebenbei bemerkt: Das Injizieren von "angular" in die "firstModule"- und "secondModule"-Dateien als Abhängigkeit ist erforderlich, um AngularJS innerhalb der RequireJS-Callback-Funktion zu verwenden, und es muss in der RequireJS-Konfiguration so konfiguriert werden, dass "angular" dem Bibliothekscode zugeordnet wird. Sie können AngularJS auch auf herkömmliche Weise in die Seite laden (Skript-Tag), obwohl dies die Vorteile von RequireJS zunichte macht.

Weitere Details zur Unterstützung von RequireJS durch AngularJS Core ab Version 2.0 finden Sie in meinem Blogbeitrag.

Basierend auf meinem Blogbeitrag "RequireJS mit AngularJS sinnvoll nutzen" hier ist die enlace .