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.

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.

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.

Bootstrap 5 | Tamaño de los Botones

Existen 2 tipos de tamaños para los botones además del tamaño por default, estos son LG y SM.

<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-primary btn-sm">Small button</button>

c# | Calcular minutos entre dos fechas

Ahora veremos como calcular el total de minutos que existen entre dos fechas,

Primero asumiremos que tenemos dos variables tipo DateTime llamados fechaInicial y fechaFinal.

Lo siguiente sería crear una variable tipo TimeSpan:

TimeSpan ts = fechaInicial - fechaFinal;

Por último, la diferencia entre ambas fechas se calcularía de la siguiente manera:

ts.TotalMinutes;

Esto también nos sirve para obtener la diferencia de horas, segundos, etc.

Suerte!

JQuery | Consumiendo un método api

Ahora les mostraré como consumir un método api desde JQuery.

Primero, crearemos nuestro método Api; asumiremos que éste se encuentra en el archivo: Api/HomeApiController:

[System.Web.Http.HttpPost]

[OutputCache(Duration = 1)]

public void MetodoApi() {

// Aquí va el código de nuestro método...

}

Ahora, desde nuestro archivo JQuery, utilizamos el siguiente código para ejecutar nuestro método api:

var options = new Object;

options.cache = false;

options.headers = {

Accept: "application/json; charset=utf-8",

"Content-Type": "application/json; charset=utf-8"

};

options.type = "post";

options.url = "/Api/HomeApi/MetodoApi";

$.ajax(options);

Esto te dará una buena idea de cómo crear y consumir métodos api, más adelante realizaremos ejercicios más complejos.

Suerte!

AOS - Animate On Scroll Library

En esta ocasión les quiero presentar una librería muy interesante llamada AOS - Animate On Scroll Library, la cual, como su nombre lo indica, es una librería que contiene animaciones para objetos que van apareciendo conforme nos vamos desplazando dentro de una página.

Esta es la liga oficial de la librería:

https://michalsnik.github.io/aos/

Utilizar esta librería es muy simple, lo primero que debemos hacer es agregar las referencias a nuestra página:

<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">

<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>

Lo siguiente es iniciar el componente con la siguiente línea:

<script>

  AOS.init();

</script>

Finalmente, solo hay que definir el tipo de animación que tendrán nuestros elementos:

<div data-aos="[Tipo de Animación]"></div>

Por ejemplo:

<div data-aos="fade-up"></div>

ne...