Compartir datos entre controladores en AngularJS
- Comparta datos entre controladores primarios y secundarios en AngularJS
- Comparta datos entre controladores usando Factory o Service en AngularJS
Podemos usar varios métodos para compartir datos entre controladores en AngularJS, pero aquí solo discutiremos dos formas. La primera forma es el ámbito de las variables. La segunda forma es utilizar una factory o service.
Comparta datos entre controladores primarios y secundarios en AngularJS
El ámbito de un controlador secundario hereda el ámbito del controlador principal, lo que permite que los datos se compartan simplemente mediante la herencia del controlador.
Cuando un componente secundario está anidado dentro de un componente principal, el componente secundario puede acceder a los datos del principal.
Esto se logra mediante el uso de enlace de datos bidireccional. El componente principal puede pasar datos al secundario utilizando un enlace de propiedad o un enlace de evento.
Luego, el hijo puede devolver estos datos al padre mediante un enlace de propiedad o un enlace de evento en su controlador. Este patrón también se utiliza para compartir selecciones entre componentes relacionados.
El objeto de alcance
El objeto de alcance se crea cuando se crea una instancia de un controlador y contiene propiedades de modelo y vista.
La propiedad del modelo contiene o almacena cualquier información compartida con otros controladores. Por otro lado, la propiedad de vista tiene o almacena información sobre cómo mostrar esta información en la pantalla (como HTML).
Comparta datos entre controladores usando Factory o Service en AngularJS
En AngularJS, podemos compartir datos entre controladores usando fábricas o servicios.
Las fábricas devuelven un objeto con los métodos para crear y actualizar objetos. Podemos usar fábricas cuando queremos crear un nuevo objeto en un controlador y compartirlo con otro controlador.
Los servicios se utilizan cuando queremos compartir datos entre controladores y otros archivos JavaScript.
En conclusión, las fábricas y servicios de AngularJS son módulos JS que ejecutan un propósito específico y contienen tanto métodos como propiedades.
Se pueden inyectar en otros componentes a través de la inyección de dependencia. Podemos definir una variable compartida en una fábrica, inyectarla en ambos controladores y vincular las variables de alcance a los datos de la fábrica en este método.
Debemos seguir los siguientes pasos.
-
Registrar la fábrica o el servicio.
-
Crear un servicio o fábrica que será responsable de obtener los datos.
-
Agregar el servicio o fábrica a la lista de proveedores del módulo.
-
Crear un controlador con una función que usará el servicio.
A continuación se muestra un ejemplo para ayudarnos a comprender cómo compartir datos entre los controladores utilizando las dos formas discutidas anteriormente.
Código JavaScript:
var myApp = angular.module('myApp', []);
myApp.service('demo', [function () {
'use strict';
this.pointtot = {hello: 'Adil'};
}]);
myApp.controller('Ctrl1', ['$scope', 'demo', function($scope, demo) {
$scope.myPointtot = demo.pointtot;
}]);
myApp.controller('Ctrl2', ['$scope', 'demo', function($scope, demo) {
$scope.yourPointtot = demo.pointtot;
}]);
Código HTML:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="http://code.angularjs.org/1.2.1/angular.js"></script>
<script src="script.js"></script>
</head>
<body>
<h1>Example of sharing data between controllers</h1>
<div ng-controller="Ctrl1">
<p>Write something in Controller 1 <input ng-model="myPointtot.hello" type="text" /></p>
</div>
<div ng-controller="Ctrl2">
<h4>Everything you write in controller 1, it will be copied to controller 2 and vice versa</h4>
<p>Write something in Controller 2 <input ng-model="yourPointtot.hello" type="text" /></p>
</div>
</body>
</html>
Haga clic aquí para ver la demostración en vivo del código anterior.
Muhammad Adil is a seasoned programmer and writer who has experience in various fields. He has been programming for over 5 years and have always loved the thrill of solving complex problems. He has skilled in PHP, Python, C++, Java, JavaScript, Ruby on Rails, AngularJS, ReactJS, HTML5 and CSS3. He enjoys putting his experience and knowledge into words.
Facebook