0

Supongamos que tengo lo siguiente

index.html

<div ng-controller="TestController">
   .......
</div>

TestController.js

App.controller('TestController', ['$rootScope','$q','TestService', function($rootScope, $q, $TestService) 

    $scope.method1= function() {...}
    $scope.method2= function() {...}
    ...
    $scope.method10= function() {...}

Ahora, si llamo a cualquier método funcionará, pero me gustaría tener 2 controladores y que cada uno de ellos contenga 5 métodos, si tuviese 100 métodos en un solo controlador es muy dificil de mantenerlo, se puede hacer como un controller general e importar los otros?

1
  • 1
    Si necesitas crear funciones que reutilizaras en distintas páginas la mejor práctica sería crear un servicio genérico e inyectarlo en el controlador que lo requiera colega :) Commented el 2 oct. 2018 a las 12:56

2 respuestas 2

1

Una buena forma de resolver tu problema es la creación de un servicio para ser reutilizado en tu aplicación; de esta forma evitas la redundancia y la clonación de código.

Por ejemplo si necesitamos crear una función que concatene y sabemos que nos sería útil para otros controladores:

var app = angular.module('App', []);

app.service('miServicio', [function(){
  this.procesarCadenas = (val1, val2) => {
    return `${val1} ${val2}`;
  }
}]);

app.controller('ctrl', ['$scope', 'miServicio', function($scope, miServicio){
  $scope.st1 = '';
  $scope.st2 = '';
  
  $scope.click = (val1, val2) => {
    $scope.result = miServicio.procesarCadenas($scope.st1, $scope.st2);
  }
}])
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container" ng-app="App" ng-controller="ctrl">
  <div class="row">
    <div class="form-group mr-2">
      <label for="" class="control-label">Cadena #1</label>
      <input type="text" class="form-control" ng-model="st1">
    </div>
    
    <div class="form-group mr-2">
      <label for="" class="control-label">Cadena #2</label>
      <input type="text" class="form-control" ng-model="st2">
    </div>
  </div>
  
  <div class="row">
    <div class="form-group">
      <button type="button" class="btn btn-primary" ng-click="click(str1, str2)">Aplicar servicio</button>
    </div>
  </div>
  
  <div class="row">
    <div class="form-group">
      <label for="" class="control-label text-success">Resultado: {{result}}</label>
    </div>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.2/angular.min.js"></script>

Ahora si necesitas utilizarla en otro controlador sólo necesitas inyectar el servicio en dicho controller

app.controller('ctrl2', ['$scope', 'miServicio', function($scope, miServicio)]{ 
   ... 
})

Mucho más práctico =)

Nos comentas si es lo que necesitas.

2
  • un controlador puede tener varios servicios?, es decir: app.controller('ctrl', ['$scope', 'miServicio', 'miServicio2', function($scope, miServicio, miServicio2){
    – sirdaiz
    Commented el 3 oct. 2018 a las 15:27
  • Sin ningún problema! Puedes tener N servicios inyectados en tus controladores Commented el 3 oct. 2018 a las 15:30
0

No hay ningún problema en definir más de un controlador en el mismo módulo o si querés, en la misma página.

En el mismo módulo se definen así:

    angular.module("myapp",[]);
    .controller('cont1',function($scope){
      $scope.nombre="";
       });

   .controller('cont2',function($scope){
    $scope.apellido="";
    });

Para definir múltiples controladores también podes hacerlo cada uno en su hoja propia o todos en la misma hoja:

angular.module("myapp").controller('cont1'['$scope', function($scope){

}]);

angular.module("myapp").controller('cont2'['$scope', function($scope){

}]);

Pero las mejores practicas indican que definas todo en files separados:

app.module.js

angular.module("myapp",[]); // dentro de [] se incluyen las dependencias del módulo

y luego le pases las dependencias a los controladores:

.controller('ctrlName', ['$scope', function($scope){

}]);

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.