Doubt multiple angular controllers

0

Suppose I have the following

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() {...}

Now, if I call any method it will work, but I would like to have 2 controllers and each of them contain 5 methods, if I had 100 methods in a single controller it is very difficult to maintain it, it can be done as a general controller and import the others?

    
asked by sirdaiz 02.10.2018 в 14:15
source

2 answers

1

A good way to solve your problem is to create a service to be reused in your application; in this way you avoid redundancy and code cloning.

For example, if we need to create a function that concatenates and we know that it would be useful for other controllers:

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

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

app.controller('ctrl', ['$scope', 'miServicio', function($scope, miServicio){
  $scope.st1 = '';
  $scope.st2 = '';
  
  $scope.click = function(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>

Now if you need to use it in another controller you only need to inject the service in said controller

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

Much more practical =)

You tell us if it's what you need.

    
answered by 02.10.2018 / 15:37
source
0

There is no problem in defining more than one controller in the same module or if you want, on the same page.

In the same module they are defined as follows:

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

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

To define multiple controllers you can also do it each on your own sheet or all on the same sheet:

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

}]);

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

}]);

But the best practices indicate that you define everything in separate files:

app.module.js

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

and then you pass the dependencies to the controllers:

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

}]);
    
answered by 02.10.2018 в 14:35