AngularJS RequireJS Browserify und das Javascript Modul/globaler Bereich Albtraum

Question

Ich habe in letzter Zeit ein bisschen in diesem CommonJS vs AMD Kampf gegraben und das sind meine Ergebnisse ... (Übrigens predige ich hier nicht, ich teile meine Gedanken mit Erhalten Sie einige konstruktive Einblicke ...) Das RequireJS bringt zu viel Komplexität zu meinen Angular-Modulen, es fühlt sich falsch an, da es ein Modul-Wrap in einem Modul ist ... Der Browserify-Weg ist sauberer, aber damit er richtig funktioniert Du musst deine Abhängigkeit und deine Abhängigkeitsabhängigkeiten richtig implementiert haben und leider leben wir nicht in einer perfekten Welt ... also musst du die innere Abhängigkeit der shimmed Libs shimmen und shimmen ... ich bin es nicht ein großer Fan von zusätzlicher Komplexität ...

Die Art und Weise, die ich derzeit anstrebe (und vorbehaltlich all Ihrer konstruktiven Kritik ...)

Ich habe eine Grunt-Datei verketten und minimieren alle meine Ressourcen, die libs wie BreezeJS, $, Q, Ladda, etc .. . Lecks auf dem globalen Bereich ... Dann erkläre ich diese Art Modul für dieses Globals:

module.value('gLadda', (function(){ 

    if("Ladda" in window && "Spinner" in window){ 
     return Ladda; 
    }else{ 
     throw new Error("The Globals Ladda || Spinner are missing"); 
    } 

})()); 

Nachdem in meinem app ich mit den „Angularify“ Abhängigkeiten arbeiten, ich habe diese Technik in einem Team nicht verwendet und ich frage mich, ob das für einige ein rotes Licht abgibt, und wenn sie erklären würden, warum ... Danke für deine Zeit.

Answer 1

Von einer Feature-Anfrage habe ich für inclusion of an AMD loader als Teil der zusätzlichen ng-Module.

Angular verfügt über eine Funktion, mit der Benutzer Moduldefinitionen erstellen und Entitäten wie Controller später anhand einer String-ID suchen können. Angular bietet keine Möglichkeit, Skripte in einer separaten Datei zu laden, was bedeutet, dass Sie vier Optionen haben:

Speichern Sie alle Ihre Javascript in einer einzigen Datei.

Trennen Sie Ihr Javascript in separate Dateien und fügen Sie Skript-Tags für jede Datei hinzu.

Verwenden Sie einen AMD File Loader wie requireJS, um Skriptdateien und ihre Abhängigkeiten zu verwalten.

Verwenden Sie einen Precompiler wie browserify, um nodejs-Stildateien in einer einzigen Skriptdatei zusammenzuführen.

Wenn ein Projekt wächst, werden die Dateien schwieriger zu verwalten, nicht nur wegen ihrer Größe, sondern weil die Abhängigkeiten zwischen Modulen komplizierter werden. Große Projekte können auch vom langsamen Laden eines AMD-Laders profitieren.

Ein AMD-Modulladeprogramm listet die Abhängigkeiten auf, die vorhanden sein müssen, bevor diese Datei ausgeführt werden kann. Das Problem ist, dass AMD-Abhängigkeiten nahe an der von Angular verwendeten Injection-Liste liegen, aber nicht genau die gleiche Sache. Ein Problem kann in diesem Code zu sehen:

define(['angular'], function(angular) { 
    return angular.module('myApp.controllers', ['myApp.services']) 
    .controller('MyController', ['$scope', 'myService', 
     function($scope, myService) { 
     $scope.data = myService.getData(); 
     } 
    ]) 
}; 

Die Aussage definieren an der Spitze sagt, um sicherzustellen, dass angular vor dem Ausführen dieser Funktion initialisiert wird. Die Anweisung angular.module besagt, dass '$ scope' und 'myService' gesucht und in die Variablen $scope und myService injiziert werden sollen. Das Problem ist, dass der AMD Loader die Datei, die myApp.services definiert, möglicherweise nicht initialisiert hat, in der Sie annehmen können, dass myService definiert ist, da es in der obigen Definition nicht angezeigt wurde. Dies erzeugt eine große Trennung zwischen der Injektionsliste und der AMD-Abhängigkeitsliste. Es ist nicht nur schwierig zu sagen, ob 'myApp.Dienstleistungen; geladen wurde, ist es auch schwierig zu sagen, welche speziellen Komponenten in 'myApp.services' verfügbar sind. IOW Ist 'myService' sowohl geladen als auch injizierbar?

Ich verwende derzeit die Option # 3 in Form von require, weil ich die Fähigkeit haben muss, Controller dynamisch über Routing zu laden (siehe ersten Link). Auch die Größe der Anwendung, mit der ich arbeite, macht browserfy unpraktisch, da es so viele Seiten gibt. Ich stimme jedoch zu, dass dies suboptimal ist, aber ich sehe im Moment keine andere Wahl.
Aus praktischen Gründen definiere ich eine injizierbare pro Datei. Ich versuche auch, dass alle injizierbaren Arrays mit dem require-Array übereinstimmen. Dies ist nicht notwendig, aber es macht den Code wartungsfreundlicher.

fand ich diese Artikel hilfreich diese in schriftlicher Form:

https://github.com/marcoslin/angularAMD

http://weblogs.asp.net/dwahlin/archive/2013/05/22/dynamically-loading-controllers-and-views-with-angularjs-and-requirejs.aspx