¿Cómo compartir datos entre controladores en AngularJS?

La tarea es compartir variables de datos entre dos o más controladores usando AngularJS. Hay muchos procedimientos para lograr esto. Aquí hablaremos de los más populares.

Enfoque: para compartir datos entre los controladores en AngularJS tenemos dos casos principales:

Comparta datos entre padre e hijo: aquí, el intercambio de datos se puede hacer simplemente usando la herencia del controlador, ya que el alcance de un controlador secundario hereda del alcance del controlador principal.

Compartir datos entre controladores sin tener relación: aquí, el intercambio de datos se puede hacer a través de varias formas, algunas de ellas son:

Mediante el uso de la variable rootScope: podemos usar la variable rootScope para almacenar datos compartidos y luego podemos hacer referencia a ellos desde cualquier controlador. Aquí, al inicio de la aplicación Angular, inicializamos la variable rootScope con algún valor y luego la referimos desde cada controlador y, por lo tanto, vinculamos las variables de alcance en ambos controladores a la variable rootScope.

Ejemplo:

<!DOCTYPE html>
<html>
  
<head>
    <title>
        Angular JS sharing data using rootScope
    </title>
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
    </script>
</head>
  
<body>
    <h1 style="color:green;"> 
        GeeksforGeeks 
    </h1>
  
    <div ng-app="mainApp">
        <div ng-controller="firstcontroller">
            <h2>First controller</h2>
            <p>{{firstvalue}}</p>
        </div>
        <div ng-controller="secondcontroller">
            <h2>Second controller</h2>
            <p>{{secondvalue}}</p>
        </div>
    </div>
  
    <script>
        var mainApp = angular.module("mainApp", []);
  
        mainApp.run(function($rootScope) {
            $rootScope.value = 
               'A Computer Science Portal for Geeks';
        });
        mainApp.controller('firstcontroller',
            function($scope, $rootScope) {
                $scope.firstvalue = $rootScope.value;
            });
        mainApp.controller('secondcontroller',
            function($scope, $rootScope) {
                $scope.secondvalue = $rootScope.value;
            });
    </script>
</body>
  
</html>                    

Producción:

Mediante fábrica o servicio: el método $rootscope no es el preferido para transferir o compartir datos porque tiene un alcance global que está disponible para toda la aplicación. Entonces, usamos otro método en el que creamos una fábrica o servicio para almacenar datos compartidos. Las fábricas y los servicios de AngularJS son funciones JS que realizan una tarea específica que contiene métodos y propiedades y se pueden inyectar en otros componentes (por ejemplo, sus controladores) mediante la inyección de dependencia. De esta manera, podemos definir una variable compartida en una fábrica, inyectarla en ambos controladores y vincular así las variables de alcance en ambos controladores a estos datos de fábrica.

Ejemplo:

<!DOCTYPE html>
<html>
  
<head>
    <title>
        Angular JS sharing data using factory
    </title>
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
    </script>
</head>
  
<body>
    <h1 style="color:green;"> 
        GeeksforGeeks 
    </h1>
  
    <div ng-app="mainApp">
        <div ng-controller="FirstController">
            <input type="text" ng-model="value.name">
            <br> Input in first controller is : {{value.name}}
        </div>
        <hr>
        <div ng-controller="SecondController">
            Input in second controller is : {{value.name}}
        </div>
    </div>
  
    <script>
        var mainApp = angular.module("mainApp", []);
  
        mainApp.factory('Fact', function() {
            return {
                name: ''
            };
        });
  
        mainApp.controller('FirstController',
                        function($scope, Fact) {
            $scope.value = Fact;
        });
  
        mainApp.controller('SecondController',
                        function($scope, Fact) {
            $scope.value = Fact;
        });
    </script>
</body>
  
</html>                    

Producción:

Publicación traducida automáticamente

Artículo escrito por pratyushranjan14 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta Cancelar la respuesta