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

j'ai tous mes contrôleurs AngularJS dans un seul fichier, contrôleurs.js. Ce fichier est structuré comme suit:

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

ce que j'aimerais faire, c'est mettre Ctrl1 et Ctrl2 dans des fichiers séparés. Je voudrais alors inclure les deux dossiers dans mon index.html, mais comment devrait-il être structuré? J'ai essayé de faire quelque chose comme ça et il envoie une erreur dans la console du navigateur Web disant qu'il ne peut pas trouver mes contrôleurs. Tous les conseils?

j'ai cherché StackOverflow et trouvé cette question semblable - cependant, cette syntaxe utilise un cadre différent (CoffeeScript) sur le dessus de L'Angular, et donc je n'ai pas été en mesure de suivre.


AngularJS: comment créer des contrôleurs dans plusieurs fichiers

309
demandé sur Community 2013-11-20 08:51:44

6 réponses

Fichier:

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

dossier deux:

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

}]);

dossier trois:

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

}]);

Inclure dans cet ordre. Je recommande 3 fichiers de sorte que la déclaration du module est sur son propre.


en ce qui concerne la structure des dossiers, il y a beaucoup de nombreuses opinions sur le sujet, mais ces deux-là sont assez bonnes

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

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

390
répondu Fresheyeball 2016-03-08 22:30:09

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.

175
répondu Jimmy Au 2014-10-16 16:34:12

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', []);
"151930920 Fichier" Deux

// 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
}
"151930920 Fichier" Trois

// 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
}
47
répondu jason328 2015-01-21 04:03:09

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.

16
répondu schasoli 2017-03-23 23:06:18

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)
2
répondu Pete TNT 2016-07-13 10:00:18

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) {
    .... 
    }); 
0
répondu user3682640 2015-06-04 12:18:23