AngularJS App: Wie Sie .js Dateien in index.html einbinden

Question

Ich bin neu bei angularJS. Ich habe es geschafft, eine phonegap App mit angularJS zu erstellen. Die App ist in Ordnung und läuft gut. Das Problem ist jetzt, dass ich ein wenig mehr Verständnis dafür habe, wie angularJS funktioniert (zumindest denke ich, dass ich es habe), ich mache mir Sorgen um die Struktur meiner App-Dateien und die Wartbarkeit des Codes. Mein Projekt folgt dem eckigen Muster. Angular Seed on GitHub, wo ich diese Struktur haben:

js 
    app.js 
    controllers.js 
    directives.js 
    services.js 
    filters.js 

Nach der Untersuchung, wie Anwendungen mit AngularJS zu strukturieren, habe ich einige sehr schöne Artikel darüber gefunden: Building Huuuuuge Apps with AngularJS und HOW TO STRUCTURE LARGE ANGULARJS APPLICATIONS

Meine Frage scheint mir sehr albern, aber ich konnte keinen Ausweg finden. Ich schaffte es meinen Controller in verschiedene Dateien zu trennen, und ich habe jetzt diese Struktur:

scripts 
    controllers 
      LoginCtrl.js 
      HomeCtrl.js 
      AboutCtrl.js 
      ClientCtrl.js 

Die Sache, die ich mit bin zu kämpfen, ist, dass in der Art und Weise, dass mein App vorher war, hatte ich nur eine controller.js Datei . In meiner index.html-Datei lade ich alle Skriptdateien normal mit dem Skript-Tag. Jetzt, da ich 4 verschiedene .js-Dateien für meine Controller habe, wie lade ich sie in meine index.html-Datei? Muss ich sie alle dort laden?

Es sieht nicht richtig für mich laden alle Skripte in der index.html-Datei so (Ich weiß, dass mit einer Datei der Code auf die gleiche Weise geladen wird, ist es nur komisch zu mir mit vielen Skript Tags dort gepackt). Ich habe das ng-boilerplate-Projekt auf github gefunden und auf ihrer index.html laden sie die Skripte dynamisch. Das Problem ist, ich kann jetzt keine neue ng-bolisteller Platte starten, und ich konnte nicht finden, wie sie es gemacht haben. Sorry für den langen Text. Vielen Dank!

Answer 1

Verweisen auf jede Skriptdatei in einem eigenen Tag in index.html ist definitiv eine Möglichkeit, es zu tun, und die einfachste. wenn Sie etwas sauberer Allerdings wollen, werfen Sie einen Blick auf eines der verschiedenen Führungen zu kombinieren Angular mit RequireJS:

http://www.startersquad.com/blog/angularjs-requirejs/

Does it make sense to use Require.js with Angular.js?

Dieser Ansatz in erster Linie bei der Lösung des Problems von welcher Reihenfolge zu gerichtet ist Laden Sie die Dateien, um Abhängigkeiten zu erfüllen, aber es hat auch die Konsequenz der Bereinigung der index.html ... wenn auch auf Kosten der zusätzlichen Konfiguration an anderer Stelle.

Answer 2

Verwenden http://browserify.org/

Sie erhalten sehr einfach und elegant commonjs modules und viele erstaunliche Bibliotheken von node.js in Ihrem Browser.

Der Code wird in einzelne js-Datei gebündelt.