AngularJS Laderegler von Ordner

Question

ich bin neu in AngularJS, und habe Frage, wie ich Controller und andere js aus strukturierten Ordnern laden kann?

Zum Beispiel habe ich Struktur:

app/ 
-common 
-users 
--userController.js 
--userService.js 
-orders 
-app.js 

Wie i-Controller und Service aus dem Ordner Benutzer laden sollte?

Und noch eine kleine Frage: Was bedeutet squre bracerts?

app.config(['someThing'], function($routeProvider) 

Answer 1

Sie haben alle verbinden Dateien in Ihrer Haupt-HTML-Seite und stellen Sie sicher, dass sie geladen sind. Wie von Dwight oben erwähnt.

Ein alternativer Ansatz wäre, etwas wie Grunt.js zu verwenden, um die App zu "bauen". Dies würde beinhalten, alle controller.js-Dateien in eine zu kombinieren - die Sie dann in Ihre HTML-Seite laden. Auf diese Weise werden alle Dateien für die Entwicklung getrennt, aber für die Bereitstellung zusammengebraut.

Answer 2

Sie können Ihren Code dort platzieren, wo Sie möchten. Wenn Sie sie in eckige Module stecken, wird eckig es finden. Also, wenn Sie einen Dienst in /app/common/services/foo.js wie haben:

angular.module('app').service('foo', function() { ... }); 

können Sie dies in der userController:

angular.module('app').controller('UserController', function($scope, foo) { ... }); 

Hier können Sie sehen, wie ich foo in unserem Controller injiziert. Angular Dependency Injection System ist schlau genug, um Ihren Code zu finden, egal wo Sie sie setzen.

Sie können auch verschiedene Module als app erstellen, können Sie haben:

angular.module('other').service('bar', function() { ... }); 

Und wo Sie das app Modul, so etwas wie folgt definieren:

angular.module('app', []); 

Sie müssen nur die neu hinzufügen Modul dort als eine Abhängigkeit, das ist, was die [] sind für:

angular.module('app', ['other']); 

Jetzt können Sie den Dienst bar in Ihrem Controller :)

Auf der anderen Seite verwenden, die Syntax Sie sprechen sind die Array-Notation, etwa wie folgt:

angular.module('app').controller('FooCtrl', ['$scope', 'foo', function($scope, foo) { ... }]); 

Dies benötigt wird wenn Sie Ihren Code mangle, wenn Sie es denn in der verkleinerten Code minify, könnten Sie so etwas wie diese:

angular.module('app').controller('FooCtrl', ['$scope', 'foo', function(f, g) { ... }]); 

wie Sie sehen, sind die Funktionsparameter jetzt f und g und ein Gular weiß nicht, was zu injizieren, basierend auf diesen Namen, so dass es auf den Strings, die wir zur Verfügung gestellt, so dass f ist $scope und g ist foo.

Es gibt keine Notwendigkeit, diese Anmerkung direkt zu verwenden, es gibt mehrere Tools, die das für Sie tun, wie ngmin.

Prost.

EDIT: Sie müssten jede Javascript-Datei in eine <script> hinzufügen oder die wird nicht geladen und Angular würde es nicht finden.

die Dateien Hinzufügen einer nach dem anderen ein Schmerz ist, weil Sie 5 haben können oder können Sie haben 200

Es ist besser, sie verketten und dafür möchte ich empfehlen: grunt-concat-sourcemap, weil es eine sourcemap zu generieren, so dass Sie wird eine Datei mit der gesamten App haben, aber in den Dev-Tools sehen Sie sie in separaten Dateien.

Ich empfehle Ihnen linemanjs zu überprüfen, die ein gutes Werkzeug ist Javascript-Anwendungen zu entwickeln und verketten die Dateien für Sie, Quellkartierungen, minify, die Array-Notation Sachen auch ...