Ne Object

viernes, 12 de septiembre de 2025

AngularJS | Lista dinámica para Agregar, Editar o Eliminar elementos

En este ejemplo usaremos un único input para agregar y editar elementos de la lista; los botones cambian según el modo (agregar o edición).

1. Estructura básica de HTML

Definimos el esquema inicial del documento.


<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Lista dinámica con un solo input</title>
</head>
<body>
    <div>
        <!-- contenido de la app irá aquí -->
    </div>
</body>
</html>

2. Agregar AngularJS

Incluimos la librería AngularJS desde un CDN.


<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>

3. Definir la aplicación y el controlador

Inicializamos la aplicación Angular con ng-app="myApp" y vinculamos el controlador principal con ng-controller="myController".


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

4. Input y botones dinámicos (Agregar / Actualizar / Cancelar)

Colocamos un input enlazado con ng-model="nuevaFruta" para capturar el texto. Los botones cambian según modoEdicion:

Si no estamos en edición (modoEdicion === false) mostramos Agregar.
Si estamos editando (modoEdicion === true) mostramos Actualizar y Cancelar.
Esto permite reutilizar el mismo input para añadir y para editar.


<input type="text" ng-model="nuevaFruta" placeholder="Escribe una fruta">
<button ng-if="!modoEdicion" ng-click="agregarFruta()">Agregar</button>
<button ng-if="modoEdicion" ng-click="actualizarFruta()">Actualizar</button>
<button ng-if="modoEdicion" ng-click="cancelarEdicion()">Cancelar</button>

5. Lista con opciones de editar y eliminar

Mostramos la lista con ng-repeat. Cada elemento tiene:

El texto de la fruta.
Un botón Editar que carga el valor al input principal y pone la app en modo edición.
Un botón Eliminar que remueve el elemento del array.
Se usa track by $index para evitar problemas cuando hay elementos con el mismo valor.


<ul>
    <li ng-repeat="fruta in frutas track by $index">
        {{ fruta }}
        <button ng-click="editarFruta($index)">Editar</button>
        <button ng-click="eliminarFruta($index)">Eliminar</button>
    </li>
</ul>

6. Código AngularJS

Definimos el módulo y el controlador. Se inicializan las variables de estado (frutas, nuevaFruta, modoEdicion, indiceEdicion) y las funciones:

agregarFruta() → valida y agrega al array, limpia el input.
eliminarFruta(index) → remueve el elemento; si se estaba editando ese mismo elemento cancela la edición.
editarFruta(index) → carga el elemento en el input y activa el modo edición guardando el índice.
actualizarFruta() → valida y reemplaza el elemento en su índice, luego cancela la edición.
cancelarEdicion() → restaura el estado a modo agregar.


<script>
    var app = angular.module("myApp", []);

    app.controller("myController", function ($scope) {
        // Lista inicial
        $scope.frutas = ["Manzana", "Naranja", "Plátano"];

        // Modelo del input
        $scope.nuevaFruta = "";

        // Estado de edición
        $scope.modoEdicion = false;
        $scope.indiceEdicion = -1;

        // Agregar fruta: valida y añade al array
        $scope.agregarFruta = function () {
            if ($scope.nuevaFruta) {
                $scope.frutas.push($scope.nuevaFruta);
                $scope.nuevaFruta = ""; // limpiar input
            }
        };

        // Eliminar fruta: quita del array y cancela edición si aplica
        $scope.eliminarFruta = function (index) {
            $scope.frutas.splice(index, 1);
            if ($scope.indiceEdicion === index) {
                $scope.cancelarEdicion();
            } else if ($scope.indiceEdicion > index) {
                $scope.indiceEdicion--;
            }
        };

        // Editar fruta: carga el valor en el input y activa modo edición
        $scope.editarFruta = function (index) {
            $scope.nuevaFruta = $scope.frutas[index];
            $scope.indiceEdicion = index;
            $scope.modoEdicion = true;
        };

        // Actualizar fruta: reemplaza el valor en la posición guardada
        $scope.actualizarFruta = function () {
            if ($scope.nuevaFruta && $scope.indiceEdicion > -1) {
                $scope.frutas[$scope.indiceEdicion] = $scope.nuevaFruta;
                $scope.cancelarEdicion();
            }
        };

        // Cancelar edición: limpia el input y restaura el modo agregar
        $scope.cancelarEdicion = function () {
            $scope.nuevaFruta = "";
            $scope.indiceEdicion = -1;
            $scope.modoEdicion = false;
        };
    });
</script>

7. Código completo

Integración de todo en una sola página:


<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Lista dinámica con un solo input</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>
        <!-- Input principal: se usa para agregar y para editar -->
        <input type="text" ng-model="nuevaFruta" placeholder="Escribe una fruta">

        <!-- Botones que cambian según modoEdicion -->
        <button ng-if="!modoEdicion" ng-click="agregarFruta()">Agregar</button>
        <button ng-if="modoEdicion" ng-click="actualizarFruta()">Actualizar</button>
        <button ng-if="modoEdicion" ng-click="cancelarEdicion()">Cancelar</button>

        <!-- Lista con editar y eliminar -->
        <ul>
            <li ng-repeat="fruta in frutas track by $index">
                {{ fruta }}
                <button ng-click="editarFruta($index)">Editar</button>
                <button ng-click="eliminarFruta($index)">Eliminar</button>
            </li>
        </ul>
    </div>

    <script>
        var app = angular.module("myApp", []);

        app.controller("myController", function ($scope) {
            $scope.frutas = ["Manzana", "Naranja", "Plátano"];
            $scope.nuevaFruta = "";
            $scope.modoEdicion = false;
            $scope.indiceEdicion = -1;

            $scope.agregarFruta = function () {
                if ($scope.nuevaFruta) {
                    $scope.frutas.push($scope.nuevaFruta);
                    $scope.nuevaFruta = "";
                }
            };

            $scope.eliminarFruta = function (index) {
                $scope.frutas.splice(index, 1);
                if ($scope.indiceEdicion === index) {
                    $scope.cancelarEdicion();
                } else if ($scope.indiceEdicion > index) {
                    $scope.indiceEdicion--;
                }
            };

            $scope.editarFruta = function (index) {
                $scope.nuevaFruta = $scope.frutas[index];
                $scope.indiceEdicion = index;
                $scope.modoEdicion = true;
            };

            $scope.actualizarFruta = function () {
                if ($scope.nuevaFruta && $scope.indiceEdicion > -1) {
                    $scope.frutas[$scope.indiceEdicion] = $scope.nuevaFruta;
                    $scope.cancelarEdicion();
                }
            };

            $scope.cancelarEdicion = function () {
                $scope.nuevaFruta = "";
                $scope.indiceEdicion = -1;
                $scope.modoEdicion = false;
            };
        });
    </script>

</body>
</html>

viernes, 5 de septiembre de 2025

AngularJS | Lista dinámica con opción de eliminar elementos

Lista dinámica con opción de eliminar elementos

En este ejemplo aprenderás cómo agregar y eliminar elementos de una lista utilizando AngularJS y ng-repeat.

1. Estructura básica de HTML

Comenzamos con la estructura inicial de la página:


<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Lista dinámica con ng-repeat</title>
</head>
<body>
    <div>
    </div>
</body>
</html>

2. Agregar AngularJS

Incluimos la referencia a la librería AngularJS:


<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>

3. Definir la aplicación y el controlador

Agregamos las directivas ng-app y ng-controller para inicializar nuestra aplicación y enlazarla al controlador:


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

4. Input y botón para agregar frutas

Ahora creamos una caja de texto enlazada al modelo nuevaFruta y un botón que ejecuta el método agregarFruta():


<input type="text" ng-model="nuevaFruta" placeholder="Escribe una fruta">
<button ng-click="agregarFruta()">Agregar</button>

5. Lista con opción de eliminar

Mostramos los elementos usando ng-repeat. Cada fruta tiene un botón para eliminarla mediante la función eliminarFruta($index):


<ul>
    <li ng-repeat="fruta in frutas">
        {{ fruta }}
        <button ng-click="eliminarFruta($index)">Eliminar</button>
    </li>
</ul>

6. Código AngularJS

Definimos el módulo, el controlador y las funciones necesarias:


<script>
    var app = angular.module("myApp", []);

    app.controller("myController", function ($scope) {
        // Lista inicial
        $scope.frutas = ["Manzana", "Naranja", "Plátano"];

        // Función para agregar frutas
        $scope.agregarFruta = function () {
            if ($scope.nuevaFruta) {
                $scope.frutas.push($scope.nuevaFruta);
                $scope.nuevaFruta = "";
            }
        };

        // Función para eliminar frutas
        $scope.eliminarFruta = function (index) {
            $scope.frutas.splice(index, 1);
        };
    });
</script>

7. Código completo


<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Lista dinámica con ng-repeat</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>
        <input type="text" ng-model="nuevaFruta" placeholder="Escribe una fruta">
        <button ng-click="agregarFruta()">Agregar</button>

        <ul>
            <li ng-repeat="fruta in frutas">
                {{ fruta }}
                <button ng-click="eliminarFruta($index)">Eliminar</button>
            </li>
        </ul>
    </div>

    <script>
        var app = angular.module("myApp", []);

        app.controller("myController", function ($scope) {
            // Lista inicial
            $scope.frutas = ["Manzana", "Naranja", "Plátano"];

            // Función para agregar frutas
            $scope.agregarFruta = function () {
                if ($scope.nuevaFruta) {
                    $scope.frutas.push($scope.nuevaFruta);
                    $scope.nuevaFruta = "";
                }
            };

            // Función para eliminar frutas
            $scope.eliminarFruta = function (index) {
                $scope.frutas.splice(index, 1);
            };
        });
    </script>

</body>
</html>

lunes, 1 de septiembre de 2025

AngularJS | Agregar elementos a una lista con ng-repeat

En este ejemplo veremos cómo agregar elementos dinámicamente a una lista usando AngularJS y ng-repeat.

1. Estructura básica de HTML

Comenzamos con un documento HTML simple:


<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Agregar elementos en tiempo real con ng-repeat</title>
</head>
<body>
    <div>
    </div>
</body>
</html>

2. Agregar AngularJS

Incluimos la librería AngularJS en la sección <head>:


<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>

3. Definir la aplicación y el controlador

Agregamos las directivas ng-app y ng-controller:


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

4. Caja de texto y botón para agregar elementos

Creamos un input vinculado a la variable nuevaFruta y un botón que ejecuta la función agregarFruta():


<input type="text" ng-model="nuevaFruta" placeholder="Escribe una fruta">
<button ng-click="agregarFruta()">Agregar</button>

5. Lista con `ng-repeat`

Mostramos la lista de frutas, incluyendo algunas definidas por defecto, usando ng-repeat:


<ul>
    <li ng-repeat="fruta in frutas">{{ fruta }}</li>
</ul>

Cómo funciona:

fruta in frutas recorre cada elemento del array $scope.frutas.
{{ fruta }} muestra el valor de cada elemento en la vista.
Cada vez que agregamos un nuevo elemento, la lista se actualiza automáticamente.

6. Código AngularJS

Definimos el módulo y el controlador, inicializamos la lista y creamos la función para agregar elementos:


<script>
    var app = angular.module("myApp", []);

    app.controller("myController", function ($scope) {
        // Lista inicial
        $scope.frutas = ["Manzana", "Naranja", "Plátano"];

        // Función para agregar frutas
        $scope.agregarFruta = function () {
            if ($scope.nuevaFruta) { // Validamos que no esté vacío
                $scope.frutas.push($scope.nuevaFruta);
                $scope.nuevaFruta = ""; // Limpiamos el input
            }
        };
    });
</script>

7. Código completo


<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Agregar elementos en tiempo real con ng-repeat</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>
        <input type="text" ng-model="nuevaFruta" placeholder="Escribe una fruta">
        <button ng-click="agregarFruta()">Agregar</button>

        <ul>
            <li ng-repeat="fruta in frutas">{{ fruta }}</li>
        </ul>
    </div>

    <script>
        var app = angular.module("myApp", []);

        app.controller("myController", function ($scope) {
            // Lista inicial
            $scope.frutas = ["Manzana", "Naranja", "Plátano"];

            // Función para agregar frutas
            $scope.agregarFruta = function () {
                if ($scope.nuevaFruta) {
                    $scope.frutas.push($scope.nuevaFruta);
                    $scope.nuevaFruta = "";
                }
            };
        });
    </script>

</body>
</html>

✅ Este ejemplo muestra cómo crear una lista interactiva en AngularJS que se actualiza en tiempo real al agregar elementos con un input y un botón.

jueves, 28 de agosto de 2025

AngularJS | Repeat

Ejemplo de `ng-repeat` en AngularJS

En este ejemplo veremos cómo usar el componente ng-repeat para iterar sobre listas y mostrar sus elementos dinámicamente en la vista.

1. Estructura básica de HTML

Comenzamos con un documento HTML simple:


<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Repeat</title>
</head>
<body>
</body>
</html>

2. Agregar AngularJS

Incluimos la librería AngularJS en la sección <head>:


<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>

3. Definir la aplicación y el controlador

Agregamos las directivas ng-app y ng-controller para indicar la aplicación y el controlador de AngularJS:


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

4. Crear la lista con `ng-repeat`

Creamos una lista desordenada (<ul>) y usamos ng-repeat para mostrar cada elemento del array de frutas:


<ul>
    <li ng-repeat="fruta in frutas">{{ fruta }}</li>
</ul>

Cómo funciona:

fruta in frutas indica que AngularJS recorrerá cada elemento del array $scope.frutas.
{{ fruta }} muestra el valor de cada elemento en la vista.
Si agregamos o eliminamos elementos del array, la lista se actualizará automáticamente gracias al data binding.

5. Agregar el código AngularJS

Definimos un módulo y un controlador que inicializa nuestro listado de frutas:


<script>
    var app = angular.module("myApp", []);

    app.controller("myController", function ($scope) {
        $scope.frutas = ["Manzana", "Naranja", "Plátano", "Fresa", "Uva"];
    });
</script>

6. Código completo


<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Repeat</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">

    <h2>Listado de frutas</h2>

    <ul>
        <li ng-repeat="fruta in frutas">{{ fruta }}</li>
    </ul>

    <script>
        var app = angular.module("myApp", []);

        app.controller("myController", function ($scope) {
            $scope.frutas = ["Manzana", "Naranja", "Plátano", "Fresa", "Uva"];
        });
    </script>

</body>
</html>

✅ Con este ejemplo puedes ver cómo ng-repeat permite iterar sobre un array y mostrar sus elementos automáticamente en la vista sin necesidad de código repetitivo.

lunes, 25 de agosto de 2025

AngularJS | Click event

Ejemplo de evento Click en AngularJS

En este ejemplo veremos cómo ejecutar un método al hacer clic sobre un botón usando AngularJS.

1. Estructura básica de HTML

Comenzamos con un documento HTML básico:


<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Click Event</title>
</head>
<body>
</body>
</html>

2. Agregar AngularJS

Incluimos la librería AngularJS en la sección <head>:


<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>

3. Definir la aplicación y el controlador

Agregamos las directivas ng-app y ng-controller para indicar la aplicación y el controlador de AngularJS:


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

4. Crear el botón con evento `ng-click`

Dentro del <body> agregamos un botón. Usamos la directiva ng-click para llamar a una función cuando se haga clic:


<button ng-click="clickButton()">Haz clic en este botón</button>

5. Agregar el código AngularJS

Creamos un módulo y un controlador que define la función clickButton. Al hacer clic, se mostrará un mensaje de alerta en pantalla:


<script>
    var app = angular.module("myApp", []);

    app.controller("myController", function ($scope) {
        $scope.clickButton = function () {
            alert("¡Click event!");
        };
    });
</script>

6. Código completo


<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Click Event</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">
    <button ng-click="clickButton()">Haz clic en este botón</button>

    <script>
        var app = angular.module("myApp", []);

        app.controller("myController", function ($scope) {
            $scope.clickButton = function () {
                alert("¡Click event!");
            };
        });
    </script>
</body>
</html>

✅ Con este ejemplo puedes ver cómo AngularJS permite ejecutar funciones directamente desde la vista usando ng-click.

martes, 19 de agosto de 2025

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:

Usamos la directiva ng-model en el <input> para enlazarlo a una variable llamada nombre.
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.

viernes, 12 de septiembre de 2025

1. Estructura básica de HTML

2. Agregar AngularJS

3. Definir la aplicación y el controlador

4. Input y botones dinámicos (Agregar / Actualizar / Cancelar)

5. Lista con opciones de editar y eliminar

6. Código AngularJS

7. Código completo

viernes, 5 de septiembre de 2025

Lista dinámica con opción de eliminar elementos

1. Estructura básica de HTML

2. Agregar AngularJS

3. Definir la aplicación y el controlador

4. Input y botón para agregar frutas

5. Lista con opción de eliminar

6. Código AngularJS

7. Código completo

lunes, 1 de septiembre de 2025

1. Estructura básica de HTML

2. Agregar AngularJS

3. Definir la aplicación y el controlador

4. Caja de texto y botón para agregar elementos

5. Lista con ng-repeat

6. Código AngularJS

7. Código completo

jueves, 28 de agosto de 2025

Ejemplo de ng-repeat en AngularJS

1. Estructura básica de HTML

2. Agregar AngularJS

3. Definir la aplicación y el controlador

4. Crear la lista con ng-repeat

5. Agregar el código AngularJS

6. Código completo

lunes, 25 de agosto de 2025

Ejemplo de evento Click en AngularJS

1. Estructura básica de HTML

2. Agregar AngularJS

3. Definir la aplicación y el controlador

4. Crear el botón con evento ng-click

5. Agregar el código AngularJS

6. Código completo

martes, 19 de agosto de 2025

Ejemplo de Data Binding en AngularJS

Agregar AngularJS

Caja de texto y párrafo

Directivas de AngularJS

Conectar el modelo

Código del controlador

Código completo

5. Lista con `ng-repeat`

Ejemplo de `ng-repeat` en AngularJS

4. Crear la lista con `ng-repeat`

4. Crear el botón con evento `ng-click`