javascript - services - or en angularjs

AngularJS seed: colocando JavaScript en archivos separados(app.js, controllers.js, directives.js, filters.js, services.js)

Question

Estoy usando la plantilla de angular-seed para estructurar mi aplicación. Inicialmente puse todo mi código JavaScript en un solo archivo, main.js Este archivo contenía mi declaración de módulo, controladores, directivas, filtros y servicios. La aplicación funciona bien así, pero estoy preocupado por la escalabilidad y la facilidad de mantenimiento a medida que mi aplicación se vuelve más compleja. Noté que la plantilla de semilla angular tiene archivos separados para cada uno de estos, así que intenté distribuir mi código desde el único archivo main.js en cada uno de los otros archivos mencionados en el título de esta pregunta y encontrados en la app/js directorio de la plantilla de angular-seed .

Mi pregunta es: ¿cómo administro las dependencias para que la aplicación funcione? La documentación existente que se encuentra here no es muy clara a este respecto, ya que cada uno de los ejemplos proporcionados muestra un único archivo fuente de JavaScript.

Un ejemplo de lo que tengo es:

app.js

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

controllers.js

angular.module(''myApp.controllers'', []).
    controller(''AppCtrl'', [function ($scope, $http, $filter, MyService) {

        $scope.myService = MyService; // found in services.js

        // other functions...
    }
]);

filters.js

angular.module(''myApp.filters'', []).
    filter(''myFilter'', [function (MyService) {
        return function(value) {
            if (MyService.data) { // test to ensure service is loaded
                for (var i = 0; i < MyService.data.length; i++) {
                    // code to return appropriate value from MyService
                }
            }
        }
    }]
);

services.js

angular.module(''myApp.services'', []).
    factory(''MyService'', function($http) {
        var MyService = {};
        $http.get(''resources/data.json'').success(function(response) {
            MyService.data = response;
        });
        return MyService;
    }
);

main.js

/* This is the single file I want to separate into the others */
var myApp = angular.module(''myApp''), []);

myApp.factory(''MyService'', function($http) {
    // same code as in services.js
}

myApp.filter(''myFilter'', function(MyService) {
    // same code as in filters.js
}

function AppCtrl ($scope, $http, $filter, MyService) {
    // same code as in app.js
}

¿Cómo administro las dependencias?

Gracias por adelantado.

Answer 1

El problema se debe a que "redeclaró" el módulo de su aplicación en todos sus archivos separados.

Esto es lo que la declaración del módulo de la aplicación (declaración no segura es el término correcto) se ve así:

angular.module(''myApp'', []).controller( //...

Esto es lo que la asignación (no estoy seguro de si la asignación es el término correcto) a su módulo de aplicación se ve así:

angular.module(''myApp'').controller( //...

Observe la falta de corchetes.

Por lo tanto, la versión anterior, una con los corchetes, solo debe usarse una vez, generalmente en su app.js o main.js Todos los demás archivos asociados ( controladores, directivas, filtros ...) deben usar esta última versión, la que no contiene corchetes.

Espero que tenga sentido. ¡Aclamaciones!

Answer 2

Obtiene el error porque aún no definió myApp.services . Lo que hice hasta ahora es poner todas las definiciones iniciales en un archivo y luego usarlas en otro. Como por tu ejemplo, pondría:

app.js

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

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

Eso debería eliminar el error, aunque creo que debería leer el artículo que Eduard Gamonal mencionó en uno de los comentarios.

Answer 3

Si quiere poner sus diferentes partes de la aplicación ( filters, services, controllers ) en diferentes archivos físicos, hay dos cosas que debe hacer:

1. Declare esos espacios de nombres (por falta de un término mejor) en su app.js o en cada archivo;
2. Consulte esos espacios de nombres en cada uno de los archivos.

Entonces, tu app.js se vería así:

angular.module(''myApp'', [''external-dependency-1'', ''myApp.services'', ''myApp.controllers''])
.run(function() {
   //...

})
.config(function() {
  //...
});

Y en cada archivo individual:

services.js

angular.module(''myApp.services'', []); //instantiates
angular.module(''myApp.services'') //gets
.factory(''MyService'', function() { 
  return {};
});

controllers.js

angular.module(''myApp.controllers'', []); //instantiates
angular.module(''myApp.controllers'')      //gets
.controller(''MyCtrl'', function($scope) {
  //snip...
})
.controller(''AccountCtrl'', function($scope) {
  //snip...
});

Todo esto se puede combinar en una sola llamada:

controllers.js

angular.module(''myApp.controllers'', []) 
.controller(''MyCtrl'', function($scope) {
 //snip...
});    

La parte importante es que no debe redefinir angular.module(''myApp'') ; eso haría que se sobrescriba al crear instancias de sus controladores, probablemente no lo que desea.