En este artículo, conoceremos el concepto de vinculación de datos , junto con los diferentes tipos de vinculación disponibles en AngularJS.
El enlace de datos se refiere a la sincronización de datos entre el modelo y la vista. La sincronización de datos es imprescindible para mantener actualizados en todo momento los datos que se muestran al usuario y los datos que se almacenan. En AngularJS, el enlace de datos es un concepto importante, ya que actúa como un puente entre la vista y la lógica de la aplicación AngularJS. El enlace de datos en AngularJS se logra mediante el uso de directivas.
Hay 2 componentes principales del enlace de datos en AngularJS:
- Modelo: Es el encargado de mantener los datos en la aplicación.
- Ver: Es el contenedor HTML donde se muestra la aplicación al usuario.
AngularJS proporciona dos tipos de enlace de datos:
- Enlace de datos unidireccional
- Enlace de datos bidireccional
Discutiremos ambos en detalle con ejemplos.
Enlace de datos unidireccional: en el enlace de datos unidireccional, el flujo de datos es en una sola dirección , es decir, del modelo a la vista. Se toma un valor del modelo de datos, se inserta en un elemento HTML y se muestra al usuario. Pero no hay forma de actualizar el modelo de acuerdo con la entrada proporcionada por el usuario, lo que significa que los datos no pueden fluir de la vista al modelo.
El enlace de datos unidireccional se puede lograr mediante:
- Interpolación
- Usando la directiva ng-bind
Interpolación : la interpolación es una técnica de enlace de datos unidireccional que se utiliza para transferir los datos de un código TypeScript a una plantilla HTML (vista). Utiliza la expresión de plantilla entre llaves dobles para mostrar los datos del componente a la vista.
Sintaxis :
{{expression}}
Ejemplo : este ejemplo describe el enlace de datos unidireccional utilizando expresiones de llaves dobles.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Data Binding Example</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
</head>
<body ng-app="myApp">
<div ng-controller="myCtrl">
<h1>{{title1}}</h1>
<h2>{{title2}}</h2>
<p>{{description}}</p>
</div>
<script type="text/javascript">
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.title1 = "GeeksforGeeks";
$scope.title2 = "AngularJs Data Binding";
$scope.description ="Data Binding refers "
+ "to the synchronization of data "
+ "between the model and view";
});
</script>
</body>
</html>
Explicación: En el ejemplo anterior, hemos usado expresiones para vincular los datos del modelo a la vista. En la etiqueta <script> hemos creado un módulo llamado “myApp”. A este módulo, hemos agregado un controlador «myCtrl». Hemos agregado propiedades a este controlador como title1, title2 y description. Luego hemos especificado estas propiedades en los elementos HTML donde queremos mostrar los datos a los usuarios.
Producción:
Uso de la directiva ng-bind : la directiva ng-bind en AngularJS se usa para vincular/reemplazar el contenido de texto de cualquier elemento HTML en particular con el valor que se ingresa en la expresión dada. El valor del contenido HTML especificado se actualiza cada vez que el valor de la expresión cambia en la directiva ng-bind.
Sintaxis:
<element ng-bind="expression"> Contents... </element>
Ejemplo : este ejemplo describe el enlace de datos unidireccional mediante la directiva ng-bind.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Data Binding Example</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
</head>
<body ng-app="myApp">
<div ng-controller="myCtrl">
<p>Firstname:
<span ng-bind="firstname"></span>
</p>
<p>Lastname:
<span ng-bind="lastname"></span>
</p>
</div>
<script type="text/javascript">
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.firstname = "GeeksforGeeks";
$scope.lastname = "AngularJS";
});
</script>
</body>
</html>
Explicación: en el ejemplo anterior, hemos usado ng-bind para vincular datos del modelo a la vista. En la etiqueta <script> hemos agregado propiedades al controlador como nombre y apellido. Hemos especificado la directiva ng-bind en las etiquetas HTML donde queremos mostrar los datos. En la directiva ng-bind, hemos especificado la propiedad que queremos mostrar.
Producción:
Enlace de datos usando la directiva ng-bind
Enlace de datos bidireccional: en este tipo de enlace de datos, el flujo de datos es bidireccional, es decir, los datos pueden fluir desde el modelo a la vista, así como desde la vista al modelo. En palabras simples, podemos decir que cuando los datos en el modelo cambian, los cambios se reflejan en la vista y cuando los datos en la vista cambian, el modelo también se actualiza. La vista y el modelo se actualizan en todo momento.
El enlace de datos bidireccional se logra mediante el uso de la directiva ng-model. La directiva ng-model transfiere datos del controlador a la vista y viceversa.
Ejemplo: En este ejemplo, hemos creado un formulario que solicita el nombre del usuario, la edad y el curso en el que está interesado. Después de que el usuario ingrese todos los campos y haga clic en el botón Enviar, los detalles ingresados por el usuario son desplegado.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Data Binding Example</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
</head>
<body ng-app="myApp">
<div ng-controller="myCtrl">
<form>
<label>Enter your name:</label>
<input type="text" ng-model="name">
<br>
<label>Enter your age:</label>
<input type="number" ng-model="age">
<br>
<label>Enter the course you are interested in:</label>
<input type="text" ng-model="course">
<br>
<input type="submit" ng-click="details()">
</form>
<div ng-show="showdetails">
<h1>Details entered by the user:</h1>
<p>Name: {{name}}</p>
<p>Age: {{age}}</p>
<p>Course: {{course}}</p>
</div>
</div>
<script type="text/javascript">
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.showdetails = false;
$scope.details = function() {
$scope.showdetails = true;
}
});
</script>
</body>
</html>
Explicación: hemos especificado la directiva ng-model en todos los campos de entrada para crear una propiedad de modelo para cada uno de ellos. Inicialmente en el controlador, el valor de la propiedad «detalles» es falso. Después de hacer clic en el botón Enviar, se llama a la función detalles(), que cambia el valor de la propiedad «detalles» a verdadero. En la etiqueta <div> hemos especificado la directiva ng-show que muestra la etiqueta <div> si el valor de «detalles» es verdadero. Entonces, cuando el usuario ingresa los detalles y hace clic en el botón Enviar, los detalles se muestran usando expresiones.
Producción:
Ejemplo de enlace de datos bidireccional
Ejemplo: en este ejemplo, se supone que el usuario debe ingresar la cantidad de cada producto que desea ordenar y, en consecuencia, el precio se calculará y se mostrará al usuario.
HTML
<!DOCTYPE html>
<html>
<head>
<title>>Data Binding Example</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
<style>
table {
border: 1px solid black;
border-collapse: collapse;
}
tr, th, td {
border: 1px solid black;
border-collapse: collapse;
padding: 10px;
}
</style>
</head>
<body ng-app="myApp">
<div ng-controller="myCtrl">
<table>
<tr>
<th>Food Items</th>
<th>Price</th>
<th>Quantity</th>
</tr>
<tr>
<td>Pizza</td>
<td>100</td>
<td>
<input type="number"
ng-model="pizza">
</td>
</tr>
<tr>
<td>Pasta</td>
<td>150</td>
<td>
<input type="number"
ng-model="pasta">
</td>
</tr>
<tr>
<td>Garlic Bread</td>
<td>170</td>
<td>
<input type="number"
ng-model="garlicbread">
</td>
</tr>
<tr>
<td>Nachos</td>
<td>200</td>
<td>
<input type="number"
ng-model="nachos">
</td>
</tr>
<tr>
<td>Ice Cream</td>
<td>250</td>
<td>
<input type="number"
ng-model="icecream">
</td>
</tr>
</table>
<br>
<button ng-click="calculate()">
Place Order
</button>
<div ng-show="amt!=0">
<h1>
Total amount to be paid: {{amt}}
</h1>
</div>
</div>
<script type="text/javascript">
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.title = "Food ordering";
$scope.amt = 0;
$scope.calculate = function() {
$scope.amt = 100 * $scope.pizza
+ 150 * $scope.pasta
+ 170 * $scope.garlicbread
+ 200 * $scope.nachos
+ 250 * $scope.icecream;
}
});
</script>
</body>
</html>
Explicación: En el ejemplo anterior, hemos utilizado el enlace de datos para tomar datos del usuario de la vista, pasarlos al controlador, el controlador realiza el procesamiento usando las propiedades del modelo y luego los pasa a la vista para que los datos mostrarse a los usuarios.
Producción:
Publicación traducida automáticamente
Artículo escrito por divyasharma5d12 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA