CENTRO DE CIENCIAS BASICAS

ING. EN SISTEMAS COMPUTACIONALES

6to SEMESTRE

Materia:

Tecnologías Web

Maestra:
Georgina Salazar Partida
Trabajo de Tarea:
“Angular_Binding”
Alumno:

Jose Armando Perez Lugo

Fecha:
22/03/23
Contestar las siguientes preguntas. Subir pdf con portada

I. ¿Qué hace el código de ejemplo?

En este ejemplo de Angular, se ilustra el uso de Event Binding. El archivo
app.component.ts es el componente raíz de la aplicación y contiene una clase
llamada AppComponent. Esta clase tiene una propiedad llamada "title" y un
método llamado "showAlert()", que muestra una alerta con un mensaje. En el
archivo HTML del componente, se utiliza el Event Binding para vincular el evento
"click" del botón con el método "showAlert()". Cuando se presiona el botón, se
llama al método y se muestra una alerta con el mensaje definido en él.
Este código es un buen ejemplo de cómo se puede usar el Event Binding en
Angular para hacer que un elemento del HTML responda a eventos específicos,
como los clics de botón, y cómo se pueden llamar a métodos definidos en una
clase de componente de Angular para manejar estos eventos.
II Que hacen las líneas de código 2,3 y 4. Puedes contestar al lado de cada
linea.
1 <div>
2 <h2>Hola {{nombre}}</h2>
3 <h2>Resultado {{resultado}}</h2>
4 <button (click)="resultado = resultado + 1; cambiarNombre();">Voltear nombre<
/button>
5 </div>

• La línea 2 muestra un encabezado <h2> que utiliza una expresión de

interpolación {{}} para incluir la variable "nombre". Es importante destacar
que la variable "nombre" debe ser definida en el componente que contiene
este HTML.
• La línea 3 muestra otro encabezado <h2> que utiliza una expresión de
interpolación {{}} para incluir la variable "resultado". Esta variable es de tipo
numérico y se inicializa en cero en el componente que contiene este HTML.
• En la línea 4, se muestra un botón con un evento de clic que llama a una
función definida en el componente que contiene este HTML. Cuando se
hace clic en el botón, la función aumenta el valor de la variable "resultado"
en 1 y luego llama a la función "cambiarNombre()".
III Que hacen las líneas de código 2,3,5,7,8. Puedes contestar al lado de cada
linea.
1 export class AppComponent {
2 nombre:string;
3 resultado: number = 0;
4 constructor() {
5 this.nombre = 'Jaime Cervantes Velasco';
6 }
7 cambiarNombre (name) {
8 this.nombre = this.nombre.split('').reverse().join('');;
9}
10 }

En este fragmento de código, podemos ver las siguientes definiciones y acciones

realizadas en un componente:

• La línea 2 define una propiedad "nombre" de tipo string.

• La línea 3 define una propiedad "resultado" de tipo number y la inicializa en
0.
• En la línea 5, en el constructor, se inicializa la propiedad "nombre" con un
valor predefinido.
• La línea 7 define una función llamada "cambiarNombre" que toma un
argumento llamado "name", aunque este no se utiliza en la función. La
función invierte el valor de la propiedad "nombre" utilizando los métodos
split, reverse y join de JavaScript. El método split divide una cadena en un
arreglo de caracteres, reverse invierte el orden de los elementos en el
arreglo y join une los elementos del arreglo en una cadena.
• Finalmente, la línea 8 concluye la definición de la función "cambiarNombre".