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?

316
Beebunny 20 Nov. 2013 im 08:51

6 Antworten

Beste Antwort

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

399
Fresheyeball 8 März 2016 im 22:30

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) {
    .... 
    }); 
0
user3682640 4 Juni 2015 im 12:18

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
}
49
jason328 21 Jän. 2015 im 04:03

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)
2
Pete TNT 13 Juli 2016 im 10:00

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 eine Best-Practice-Empfehlungen für die Angular-App-Struktur Ich mag es wirklich, nach Kontext zu gruppieren. 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.

17
Ahmed Mansour 23 März 2017 im 23:06

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, haben Sie folgende Möglichkeiten:

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 myApp.js nach AngularJS, aber vor Controllern / Diensten / etc ... steht. Andernfalls kann Angular Ihre Controller nicht initialisieren.

177
Jimmy Au 16 Okt. 2014 im 16:34