AngularJS : konkatenieren Pausen-Modul in der Reihenfolge der Deklaration

Ich bin mit Grunzen zu verketten meine .js Dateien für meine Eckige app.

Habe ich gerade durchgemacht und aufgeräumt, die Codebasis zu Folgen den Konventionen diskutiert hier, insbesondere die Gruppierung der meinen code in kleine Module, die Funktionen darstellen.

Aber ich finde, dass die Reihenfolge der Verkettung erscheint, brechen Sie die app, wenn ein-Modul ist verbraucht, bevor es deklariert ist.

zB:

|-- src/
|   |-- app/
|   |   |-- userProfile/
|   |   |   |   userProfile.js
|   |   |   |-- deposits/
|   |   |   |   |-- depositFormCtrl.js

Wo:

//userProfile.js
var userProfile = angular.module('userProfile',[])

//depositFormCtrl.js
angular.module('userProfile')
    .controller('DepositFormCtrl', function($scope) {...});

Wenn grunt führt die Verkettung depositFormCtrl.js erscheint vor userProfile.js. Dies bewirkt, dass die app einen Fehler auslösen, zu jammern:

Nicht abgefangener Fehler: Keine Modul: userProfile

Ich sehe viele sprechen über die Möglichkeiten der Nutzung von RequireJS /AMD zu verwalten, die lade-Reihenfolge der Module. Aber oft ist es erklärte, dass dies übertrieben ist /nicht erforderlich, wie Eckige übernimmt dies für Sie.

E. g: Brian Ford von der Winkelposition team erwähnt:

Meine persönliche Meinung ist, dass, RequireJS zu viel; das einzige Merkmal, dass AngularJS das DI-system ist wirklich fehlt, ist das asynchrone laden.

Er erklärte auch,anderswo, dass er nicht empfehlen, RequireJS mit Angular.

Ich habe auch gesehen, wie erwähnt, gemacht, um mit angular-loader.js, wie gezeigt, auf die Saatgut-Projekt. Allerdings, so wie ich es verstehe, (es gibt wenig offizielle Dokumentation) der loader soll das problem der be-Module aus, um, anstatt Sie referenziert werden, bevor Sie verwendet werden.

Hinzufügen angular-loader.js zu meinem Projekt das Problem nicht löst.

Gibt es eine Erklärung, die ich verwenden sollten, die verhindert, dass die Fehler, die ich habe?

Was ist der richtige Weg, um zu erklären, Module & Controller, so dass die Reihenfolge der Dateien verkettet hat keinerlei Einfluss auf den code zur Laufzeit?

Dies ist genau der Grund, warum ich empfehlen, mit RequireJS mit Winkelgetriebe. RequireJS lassen Sie sich ganz einfach definieren die Ladereihenfolge aller Ihrer Skripts ein, und als die, die bei der Bereitstellung für die Produktion, verwenden Sie r.js (der RequireJS-Optimierungstool), die Ihren laden um-definition-Datei und verketten Sie die Dateien genau in der Reihenfolge, in der Sie anweisen, es zu tun. Dies ist, was ich Tue, an meinen Projekten und es funktioniert perfekt.
Ich weiß nicht, ob dies Ihr problem behebt (es mir). Aber ich hatte zu laden app.js erste (die Datei mit der var app deklariert, dann könnte ich die wildcard den rest der Dateien, die mit grunt-contrib-concat

InformationsquelleAutor Marty Pitt | 2013-06-13

angularjs

16

Einer Technik, die ich manchmal benutze ist Deklarationen am Beginn der Datei verkettet. Ich tun dies, indem Sie Sie in eine spezielle Datei, die wird die erste sein, die abgeholt werden müssen, durch die Verkettung Dienstprogramm.
```
//app/_declarations.js
angular.module('userProfile',[]);

//app/userProfile/userProfile.js
angular.module('userProfile')
   .config(['$routeProvider', function ($router) {...});

//app/userProfile/deposits/depositFormCtrl.js
angular.module('userProfile')
   .controller('DepositFormCtrl', function($scope) {...});
```
Kann nicht eine gute Passform für alle Szenarien, aber ist einfach einzurichten und zu verstehen.
- Dies ist der Weg, den ich gehen am Ende mit. Es nicht nicht vorstellen, aber es funktioniert.
- Wenn Sie verwenden, Yo, es tut die gleiche Sache, es ist eine top-level app.js definiert, der im Modul und es wird immer zuerst bearbeitet.
- Bitte geben Sie Ed, der Kredit für seine Antwort.
- ich verstehe es nicht. wie wirkt sich das hinzufügen einer Erklärung Steuerung der Reihenfolge bei der Verwendung grunt-concat-contrib?
- Dies funktioniert auch mit grunt-concat-contrib. Ich glaube, dass der Schlüssel ist der _ am Anfang der Deklaration mit dem Namen. Offenbar, Grunzen sortiert die Dateien in alpha um. Es fühlt sich an wie ein hack, aber es funktioniert.
- Ich habe gerade versucht, und ich glaube, dass es nicht mehr funktioniert. '_declarations' scheint nicht zu Sortieren, es ersten. '0declarations.js' funktioniert...
- Es ist nicht für mich gearbeitet als gut.
InformationsquelleAutor ed.

Ich lief in das gleiche Problem. Ich teilte die Verkettung Schritt in meiner GruntFile.js zwei Aufgaben, so im wesentlichen meine app.js, wo mein Winkel-Anwendung definiert ist, ist 'vorangestellt' in die temporäre Datei verkettet (_app.js), und das Ergebnis gespeichert wird, mit dem gleichen Namen der temporären Datei, die in eine endgültige "_app.js'

app.js

var TestApp = angular.module('TestApp', [...]);

Sub tasks in meinem concat Abschnitt meines GruntFile.js

....
//Concatenate all Angular application JS files into _app.js.  Note the use
//of wildcards to walk the App folder subfolders to pick up all JS files.
        jsCore: {
            src: [                   
                '<%= meta.appPath%>/**/*.js',

                //Do not include app.js, since it needs to be prepended to the final concat file
                '!<%= meta.appPath/app.js',

                //Do not include config.js, since it will need to be tokenized by RM
                '!<%= meta.appPath%>/config.js'
            ],
            dest: '<%= meta.resPath %>/_app.js'
        },

        //Prepend app.js to the beginning of _app.js, and save result as _app.js.  
        //This keeps Angular happy ...
        jsApp: {
            src: [
                '<%= meta.appPath%>/app.js',
                '<%= meta.resPath%>/_app.js'
            ],
            dest: '<%= meta.resPath %>/_app.js'
        }
...

Den daraus resultierenden _app.js die Datei hat die Quelle app.js am Anfang d.h. die Erklärung der TestApp.

InformationsquelleAutor programmerj

1

Wenn Sie teilen ein Modul in vielfachen js-Dateien, und Sie nicht wollen, zu verwalten manuell in welcher Reihenfolge Ihr bauen sollte verketten von Dateien dann werden Sie brauchen, RequireJS.

Ich persönlich versuchen zu vermeiden, Aufteilung eines Moduls in mehrere Dateien, aus mehreren Gründen :
- Es kann schwierig sein zu finden alle Controller/services/etc.. aus einem einzigen Modul
- Wenn Sie das Modul ist zu groß, dann ist es wahrscheinlich bedeutet, dass Sie sich aufspalten sollten in mehrere Module
- Es ist mühsam genug, um zu erklären, manuell eine Liste der Module, Abhängigkeiten und eine Liste der injizierten Abhängigkeiten für jedes Modul. Hinzu kommt, dass eine Liste der js-Abhängigkeit benötigte Dateien von RequireJS und Sie verbringen die meisten Ihrer Zeit deklarieren langweiliges Zeug statt der Lösung geschäftlicher Probleme
Allerdings, wenn Sie halten die 1 Modul /1-Datei-Regel, Sie werden sehen, Ihre index.html wächst sehr schnell. Ich persönlich denke nicht, dass das so ein großes Problem.

InformationsquelleAutor Florian F

verwenden zu schlucken, und verwenden Sie dann gulp-eckig-sortiert

return gulp.src('./build/src/app/**/*.js')
        .pipe(sort())
        .pipe(plug.concat('concat.js'))
        .pipe(gulp.dest('./output/'));

InformationsquelleAutor Maccurt

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.