Wie erstelle ich separate AngularJS-Controller-Dateien?

Ich habe alle meine AngularJS-Controller in einer Datei, controller.js. Diese Datei ist wie folgt aufgebaut:

angular.module('myApp.controllers', [])
  .controller('Ctrl1', ['$scope', '$http', function($scope, $http) {    
  }])
  .controller('Ctrl2', ['$scope', '$http', function($scope, $http) }
  }])

Ich möchte Strg1 und Strg2 in separate Dateien einfügen. Ich würde dann beide Dateien in meine index.html aufnehmen, aber wie sollte das strukturiert sein? Ich habe versucht, so etwas zu tun, und es wird ein Fehler in der Webbrowser-Konsole ausgegeben, der besagt, dass meine Controller nicht gefunden werden können. Irgendwelche Hinweise?

Ich habe StackOverflow durchsucht und diese ähnliche Frage gefunden. Diese Syntax verwendet jedoch ein anderes Framework (CoffeeScript) als Angular, sodass ich nicht folgen konnte.

AngularJS: Wie erstelle ich Controller in mehreren Dateien?

Datei eins:

angular.module('myApp.controllers', []);

Datei zwei:

angular.module('myApp.controllers').controller('Ctrl1', ['$scope', '$http', function($scope, $http){

}]);

Datei drei:

angular.module('myApp.controllers').controller('Ctrl2', ['$scope', '$http', function($scope, $http){

}]);

In diese Reihenfolge aufnehmen. Ich empfehle 3 Dateien, damit die Moduldeklaration eigenständig ist.

Was die Ordnerstruktur betrifft, gibt es viele, viele Meinungen zu diesem Thema, aber diese beiden sind ziemlich gut

https://github.com/angular/angular-seed

http://briantford.com/blog/huuuuuge-angular-apps.html

Wenn Sie die Angular.module-API mit einem Array am Ende verwenden, wird Angular angewiesen , ein neues Modul zu erstellen:

myApp.js

// It is like saying "create a new module"
angular.module('myApp.controllers', []); // Notice the empty array at the end here

Die Verwendung ohne das Array ist eigentlich eine Getter-Funktion. Um Ihre Controller zu trennen, können Sie Folgendes tun:

Ctrl1.js

// It is just like saying "get this module and create a controller"
angular.module('myApp.controllers').controller('Ctrlr1', ['$scope', '$http', function($scope, $http) {}]);

Ctrl2.js

angular.module('myApp.controllers').controller('Ctrlr2', ['$scope', '$http', function($scope, $http) {}]);

Stellen Sie beim Importieren von Javascript sicher, dass sich myApp.js nach AngularJS befindet, jedoch vor Controllern / Diensten / etc ... andernfalls kann Angular Ihre Controller nicht initialisieren.

Obwohl beide Antworten technisch korrekt sind, möchte ich für diese Antwort eine andere Syntaxauswahl einführen. Dieses Imho macht es einfacher zu lesen, was mit der Injektion los ist, zwischen zu unterscheiden usw.

Datei Eins

// Create the module that deals with controllers
angular.module('myApp.controllers', []);

Datei Zwei

// Here we get the module we created in file one
angular.module('myApp.controllers')

// We are adding a function called Ctrl1
// to the module we got in the line above
.controller('Ctrl1', Ctrl1);

// Inject my dependencies
Ctrl1.$inject = ['$scope', '$http'];

// Now create our controller function with all necessary logic
function Ctrl1($scope, $http) {
  // Logic here
}

Datei Drei

// Here we get the module we created in file one
angular.module('myApp.controllers')

// We are adding a function called Ctrl2
// to the module we got in the line above
.controller('Ctrl2', Ctrl2);

// Inject my dependencies
Ctrl2.$inject = ['$scope', '$http'];

// Now create our controller function with all necessary logic
function Ctrl2($scope, $http) {
  // Logic here
}

Was ist mit dieser Lösung? Module und Controller in Dateien (am Ende der Seite) Es funktioniert mit mehreren Controllern, Direktiven usw.:

app.js.

var app = angular.module("myApp", ['deps']);

myCtrl.js

app.controller("myCtrl", function($scope) { ..});

html

<script src="app.js"></script>
<script src="myCtrl.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">

Google hat auch Best-Practice-Empfehlungen für die Angular-App-Struktur, die ich sehr gerne nach Kontext gruppiere. Nicht alle HTML-Dateien in einem Ordner, aber zum Beispiel alle Dateien für die Anmeldung (HTML, CSS, app.js, controller.js usw.). Wenn ich also an einem Modul arbeite, sind alle Anweisungen leichter zu finden.

Der Kürze halber hier ein ES2015-Beispiel, das nicht auf globalen Variablen basiert

// controllers/example-controller.js

export const ExampleControllerName = "ExampleController"
export const ExampleController = ($scope) => {
  // something... 
}

// controllers/another-controller.js

export const AnotherControllerName = "AnotherController"
export const AnotherController = ($scope) => {
  // functionality... 
}

// app.js

import angular from "angular";

import {
  ExampleControllerName,
  ExampleController
} = "./controllers/example-controller";

import {
  AnotherControllerName,
  AnotherController
} = "./controllers/another-controller";

angular.module("myApp", [/* deps */])
  .controller(ExampleControllerName, ExampleController)
  .controller(AnotherControllerName, AnotherController)

Nicht so anmutig, aber die sehr einfach zu implementierende Lösung - mit globalen Variablen.

In der "ersten" Datei:

window.myApp = angular.module("myApp", [])
....

im "zweiten", "dritten" usw.:

myApp.controller('MyController', function($scope) {
    .... 
    });