Comment créer des fichiers de contrôleur AngularJS séparés?

utilisant l'angle.API du module avec un tableau à la fin indiquera angular pour créer un nouveau module:

myApp.js

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

L'utiliser sans le tableau est en fait une fonction getter. Donc pour séparer vos contrôleurs, vous pouvez faire:

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) {}]);

lors de vos importations javascript, assurez-vous que myApp.js est après AngularJS mais avant tout contrôleurs / services / etc...sinon angulaire de ne pas être capable d'initialiser vos contrôleurs.

bien que les deux réponses soient techniquement correctes, je veux introduire un choix de syntaxe différent pour cette réponse. Cet imho facilite la lecture de ce qui se passe avec l'injection, la différenciation entre etc.

Fichier

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

// 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
}

// 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
}

Qu'en est-il de cette solution? Modules et contrôleurs dans les fichiers (à la fin de la page) Il fonctionne avec plusieurs contrôleurs, directives et ainsi de suite:

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 a également un recommandations de meilleures pratiques pour la Structure de L'application angulaire J'ai vraiment aimé le groupe par le contexte. Pas tout le html dans un dossier, mais par exemple tous les fichiers de connexion (html, css, app.js, contrôleur.js et ainsi de suite). Donc, si je travaille sur un module, toutes les directives sont plus faciles à trouver.

par souci de brièveté, voici un échantillon ES2015 qui ne s'appuie pas sur des variables globales

// 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)

pas si gracieux, mais la très simple dans la solution de mise en œuvre - en utilisant la variable globale.

Dans le "premier" fichier:

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

dans la "deuxième" , "troisième", etc:

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