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

No hay comentarios:

Publicar un comentario

Suscribirse a: Enviar comentarios (Atom)