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.

en No hay comentarios:
Etiquetas:

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.

en No hay comentarios:
Etiquetas:

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:

  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.

en No hay comentarios:
Etiquetas:
Suscribirse a: Entradas (Atom)