javascript - otro - ¿Cómo crear archivos de controlador AngularJS separados?

ng-href angularjs

Question

Tengo todos mis controladores AngularJS en un archivo, controllers.js. Este archivo está estructurado de la siguiente manera:

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

Lo que me gustaría hacer es poner Ctrl1 y Ctrl2 en archivos separados. Luego incluiría ambos archivos en mi index.html, pero ¿cómo debería estructurarse? Intenté hacer algo como esto y se produce un error en la consola del navegador web que dice que no puede encontrar mis controladores. ¿Alguna pista?

Busqué en StackOverflow y encontré esta pregunta similar; sin embargo, esta sintaxis usa un marco diferente (CoffeeScript) en la parte superior de Angular, por lo que no he podido seguir.

AngularJS: ¿Cómo creo controladores en varios archivos?

Answer 1

¿Qué pasa con esta solución? Módulos y controladores en archivos (al final de la página) Funciona con varios controladores, directivas, etc.

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 también tiene recomendaciones de mejores prácticas para la estructura de aplicaciones angulares que realmente me gusta agrupar por contexto. No todos los html en una carpeta, sino, por ejemplo, todos los archivos para inicio de sesión (html, css, app.js, controller.js, etc.). Entonces, si trabajo en un módulo, todas las directivas son más fáciles de encontrar.

Answer 2

Archivo uno:

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

Archivo dos:

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

}]);

Archivo tres:

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

}]);

Incluir en ese orden. Recomiendo 3 archivos para que la declaración del módulo sea por sí sola.

En cuanto a la estructura de carpetas, hay muchas muchas opiniones sobre el tema, pero estas dos son bastante buenas.

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

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

Answer 3

Aunque ambas respuestas son técnicamente correctas, quiero introducir una opción de sintaxis diferente para esta respuesta. Este imho hace que sea más fácil leer lo que está pasando con la inyección, diferenciar entre etc.

Archivo uno

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

Archivo dos

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

Archivo tres

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

Answer 4

El uso de la API angular.module con una matriz al final le indicará a angular que cree un nuevo módulo:

myApp.js

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

Usarlo sin la matriz es en realidad una función getter. Así que para separar tus controladores, puedes hacer:

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

Durante sus importaciones de JavaScript, solo asegúrese de que myApp.js esté detrás de AngularJS pero antes de cualquier controlador / servicio / etc ... de lo contrario, angular no podrá inicializar sus controladores.

Answer 5

No es tan elegante, pero la solución de implementación es muy simple: utiliza una variable global.

En el "primer" archivo:

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

en el "segundo", "tercero", etc:

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

Answer 6

Por brevedad, aquí hay una muestra de ES2015 que no se basa en 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)