AngularJS | Data Binding

-

Ejemplo de Data Binding en AngularJS

En este primer ejemplo aprenderemos cómo funciona el data binding en AngularJS.
Para comenzar, crearemos una página HTML con la estructura básica:

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Data Binding</title>
</head>
<body>
    <div>
        <h2>AngularJS Data Binding</h2>
    </div>
</body>
</html>

Agregar AngularJS

Dentro de la sección <head> incluiremos la referencia a AngularJS.
En este caso utilizaremos la versión 1.8.3:

<head>
    <meta name="viewport" content="width=device-width" />
    <title>Data Binding</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.3/angular.min.js"
        integrity="sha512-KZmyTq3PLx9EZl0RHShHQuXtrvdJ+m35tuOiwlcZfs/rE7NZv29ygNA8SFCkMXTnYZQK2OX0Gm2qKGfvWEtRXA=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>

Caja de texto y párrafo

Ahora añadiremos una caja de texto y un párrafo en el <body>:

<body>
    <div>
        <h2>AngularJS Data Binding</h2>
        <input type="text" placeholder="Escribe tu nombre">
        <p></p>
    </div>
</body>

Directivas de AngularJS

Para indicar que estamos trabajando con AngularJS debemos agregar las directivas ng-app y ng-controller:

<html ng-app="myApp">
<body ng-controller="myController">

Conectar el modelo

La idea es que el texto que escribamos en la caja se muestre automáticamente en el párrafo.
Para lograrlo:

  1. Usamos la directiva ng-model en el <input> para enlazarlo a una variable llamada nombre.

  2. En el <p> mostramos esa variable con la sintaxis de interpolación {{ }}.

<input type="text" ng-model="nombre" placeholder="Escribe tu nombre">
<p>Tu nombre es: {{ nombre }}</p>

Código del controlador

Finalmente, agregaremos un pequeño bloque de código AngularJS dentro de un <script>.
Aquí definimos el módulo y el controlador, y damos un valor inicial a la variable:

<script>
    angular.module("myApp", [])
        .controller("myController", function ($scope) {
            $scope.nombre = "Mi Nombre";
        });
</script>

Código completo

El resultado final es el siguiente:

<html ng-app="myApp">
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Data Binding</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.3/angular.min.js"
        integrity="sha512-KZmyTq3PLx9EZl0RHShHQuXtrvdJ+m35tuOiwlcZfs/rE7NZv29ygNA8SFCkMXTnYZQK2OX0Gm2qKGfvWEtRXA=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body ng-controller="myController">
    <div>
        <h2>AngularJS Data Binding</h2>
        <input type="text" ng-model="nombre" placeholder="Escribe tu nombre">
        <p>Tu nombre es: {{ nombre }}</p>
    </div>

    <script>
        angular.module("myApp", [])
            .controller("myController", function ($scope) {
                $scope.nombre = "Mi Nombre";
            });
    </script>
</body>
</html>

👉 Con este ejemplo ya puedes ver cómo funciona el two-way data binding en AngularJS: cualquier texto que escribas en la caja se reflejará automáticamente en el párrafo.

Comentarios

Publicar un comentario

Entradas populares de este blog

Validar registros de un DataTable

-
Imagen
Ahora lo que vamos a hacer es validar los usuarios que vayamos agregando para evitar tener dos usuarios con la misma clave. Para hacer esto hay varios métodos pero voy a presentar la que me parece es la más fácil de implementar, vamos a utilizar el método Select con el que ya cuentan los DataTables, es decir, vamos a seleccionar los registros que contengan la clave que nosotros vayamos ingresando, si el DataTable nos devuelve registros eso nos indicará que la clave ya esta utilizada, de lo contrario nos dirá que nadie tiene esa clave. Empecemos.... Veamos el siguiente ejemplo, estamos a punto de agregar un usuario con la clave 1, pero si revisan ya existe un usuario con la clave 1. Entonces, con las siguientes líneas de código realizaremos la validación: VB.NET ... 'Leemos el dataTable Dim DT As DataTable = Session("DT") 'Revisamos si ya existe el usuario Dim DR() As DataRow DR = DT.Select("Clave = " & strClave) ...
Leer más

Agregar registros a un GridView utilizando un DataTable

-
Imagen
Lo que pretendemos lograr es poder agregar registros a un GridView utilizando un DataTable que contenga toda la información que queremos mostrar. Vamos a utilizar tres cajas de texto, uno para ingresar la clave del usuario, uno para ingresar el nombre del usuario y por último uno para ingresar el teléfono del usuario. Utilizaremos un botón para agregar el registro y un GridView donde mostraremos los usuarios que vayamos agregando. Lo primero que debemos hacer es crear el DataTable donde guardaremos la información, haremos la declaración del DataTable en el Page_Load de la página. VB NET Protected Sub Page_Load(...) Handles Me.Load 'Revisamos que no sea un refresh If Not IsPostBack Then 'Creamos el DataTable Dim DT As New DataTable DT.Columns.Add("Clave", Type.GetType("System.String")) DT.Columns.Add("Nombre", Type.GetType("System.String")) DT.Columns.Add("Telefono", Type.GetType("System.String"))...
Leer más

Agregar imágenes a los CommandFields

-
Imagen
Ahora bien, si lo que queremos es que nos salga una imagen en lugar de una leyenda tendremos que hacer lo siguiente. En mi caso, voy a agregar una carpeta llamada Imagenes dentro de mi proyecto, y en esa carpeta voy a agregar cuatro imágenes: Actualizar.ico , Cancelar.ico , Editar.ico y Eliminar.ico Entonces, para asignarle la imagen correspondiente a cada CommandField lo haremos desde codigo de la siguiente manera: VB NET Private Sub ImageCommandFields() 'Editar Dim oEditColumn As CommandField = dgvListado.Columns(0) oEditColumn.ButtonType = System.Web.UI.WebControls.ButtonType.Image oEditColumn.EditImageUrl = "~/Imagenes/Editar.ico" oEditColumn.CancelImageUrl = "~/Imagenes/Cancelar.ico" oEditColumn.UpdateImageUrl = "~/Imagenes/Actualizar.ico" 'Eliminar Dim oDeleteColumn As CommandField = dgvListado.Columns(1) oDeleteColumn.ButtonType = System.Web.UI.WebControls.ButtonType.Image oDeleteColumn.DeleteImageUrl = "~/Imagenes/...
Leer más