papa - Cómo evitar una gran cantidad de dependencias en Angularjs

modulos angularjs

Question

Tengo una aplicación angular. Está funcionando bien, pero a medida que mi aplicación aumenta, me preocupa la gran cantidad de dependencias que debo inyectar en cada controlador.

por ejemplo

app.controller(''viewapps'',[
''$scope'',''Appfactory'',''Menu'',''$timeout'',''filterFilter'',''Notice'', ''$routeParams'',
function($scope,Appfactory,Menu,$timeout,filterFilter,Notice,$routeParams) {
//controller code..
}])

Estoy seguro de que la lista de dependencias aumentará en el futuro. ¿Estoy haciendo algo mal aquí? ¿Es este el enfoque correcto? ¿Cuál es la mejor manera de manejar esto de manera efectiva?

Answer 1

Intente mover tanta lógica como sea posible a los servicios, incluso simplemente haga que los métodos del controlador actúen como métodos de "enrutamiento - paso a través". Después de un tiempo, verá que es muy útil si desea utilizar métodos similares en otros controladores / directivas. De todos modos, 7 inyecciones es en mi opinión no mucho :)

(Editar: vea el comentario de Matt Way a continuación) Además, un consejo: en las versiones más nuevas de Angular, no tiene que escribir esta matriz, solo:

app.controller(''viewapps'', function($scope,Appfactory,Menu, $timeout,filterFilter,Notice,$routeParams){
//controller code..
}])

Answer 2

Mi enfoque es usar $injector , cuando hay muchas dependencias:

app.controller(''viewapps'', [''$scope'',''$injector'',function($scope,$injector){
var Appfactory = $injector.get(''Appfactory'');
var Menu = $injector.get(''Menu'');
//etc...
}]);

Las ventajas:

• El código puede ser minimizado y ofuscado de forma segura
• No necesita contar el índice de la dependencia, cuando declara la dependencia como el parámetro de una función

Answer 3

Es difícil ser específico sin un caso de uso exacto, o ver el código exacto en su controlador, pero parece que su controlador podría estar haciendo demasiado (o podría terminar haciendo demasiado al agregar cosas más adelante). 3 cosas que puedes hacer:

• Delegue más de la lógica a los servicios que se inyectan.

• Separar en diferentes controladores, por lo que cada uno tiene (solo) 1 responsabilidad.

• Separe las directivas, cada una con sus propios controladores y plantillas, y permita que las opciones pasen y la salida se distribuya a través de los atributos y la opción de scope de la directiva. Esta es a menudo mi opción preferida, ya que terminas construyendo un conjunto de componentes reutilizables, cada uno con una mini-API.

  Está bien que las directivas se usen así, al menos en mi opinión. No son solo para manejar eventos de JavaScript sin formato o acceder directamente al DOM.

Answer 4

He estado jugando con la idea de agrupar servicios basados ​​en controladores.

Entonces en tu ejemplo harías refactorizar tu; Los servicios AppFactory, Menu, filterFilter y Notice en un solo servicio, por ejemplo, ViewAppsServices.

Luego usaría sus servicios como ViewAppsServices.AppFactory.yourFunction ().

Como lo veo de esa manera, al menos puedes cambiar tus inyecciones a otro archivo limpiando tu controlador un poco.

Creo que la legibilidad sufriría un poco, ya que otro desarrollador tendría que mirar los paquetes en lugar del propio controlador.

Aquí hay un JSFiddle que armé para demostrar cómo funcionaría; Así es como me imagino que el tuyo funcionaría.

.service(''ViewAppsServices'', [''AppFactory'', ''Menu'', ''filterFilter'', ''Notice'',
function (AppFactory, Menu, filterFilter, Notice) {
return {
AppFactory: AppFactory,
Menu: Menu,
filterFilter: filterFilter,
Notice: Notice
};
} ])