Angular: Estructuras para clases, objetos y funciones

Estructuras específicas para clases, objetos y funciones

Las estructuras específicas para clases, objetos y funciones son fundamentales en la programación. Permíteme explicarte brevemente:

Clases:

Las clases son plantillas para crear objetos. Definen propiedades (atributos) y métodos (funciones) que los objetos de esa clase pueden tener. Por ejemplo, si estás construyendo una aplicación de gestión de empleados, podrías tener una clase llamada Employee con atributos como nombre, salario, y métodos como calcularBonificación().

Este código crea una aplicación simple de gestión de empleados en Angular v18. La clase Employee tiene un método calcularBonificación() que calcula una bonificación del 10% del salario. La lista de empleados se muestra en una tabla en el template del componente.

Definición de la clase Employee

// src/app/employee.ts
export class Employee {
  constructor(
    public nombre: string,
    public salario: number
  ) {}
	// Metodo para calcular bonificación
  calcularBonificacion(): number {
    return this.salario * 0.1;   // Bonificación del 10%
  }
}

Componente para mostrar la lista de empleados:

// src/app/app.component.ts
import { Component } from '@angular/core';
// Agregando Lista de Empleados
import { Employee } from './employee';
// agregando modulos necesarios 
import { CommonModule, CurrencyPipe } from '@angular/common';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CurrencyPipe, CommonModule],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  empleados: Employee[] = [
    new Employee('Juan', 50000),
    new Employee('María', 60000),
    new Employee('Pedro', 55000),
    new Employee('Ana', 70000),
    new Employee('Luis', 65000)
  ];

}

Template para mostrar la lista de empleados:

<!-- src/app/app.component.html -->
<div>
  <h2>Lista de Empleados</h2>
  <table>
    <tr>
      <th>Nombre</th>
      <th>Salario</th>
      <th>Bonificación</th>
    </tr>
    <tr *ngFor="let empleado of empleados">
      <td>{{ empleado.nombre }}</td>
      <td>{{ empleado.salario | currency }}</td>
      <td>{{ empleado.calcularBonificacion() | currency }}</td>
      <!-- no usar acento, no lo reconoce -->
    </tr>
  </table>
</div>

Estilos para la tabla (opcional):

/* src/app/app.component.css */
table { width: 100%; border-collapse: collapse; margin: 10px; }
th, td { border: 1px solid #ddd; padding: 8px; }
th { background-color: #f2f2f2; text-align: left; }

Objetos {...}

Los objetos son instancias de una clase. Representan datos específicos basados en la estructura definida por la clase .

typescript

 // La clase es: class ExampleComponent
export class ExampleComponent {
		// El objeto es: user = { ---}
	  user = { name: 'John Rojas', age: 30 }; 
  }

html

 <!-- Para mostrar los datos en pantalla --> 
<p>Name: {{ user.name }}</p>
<p>Age: {{ user.age }}</p>

Ejemplo 1: Siguiendo el ejemplo anterior, podrías crear un objeto empleado1 a partir de la clase Employee con valores como “Juan”, “$50000” y una bonificación calculada.
Ejemplo 2: Si tienes una clase Producto, puedes crear un objeto producto1 con propiedades como nombre, precio y cantidad.

TypeScript

// Definición de la clase
class Producto {
  constructor(public nombre: string, public precio: number) {}
}

// Creación de un objeto
const producto1 = new Producto('Camiseta', 25);
console.log(producto1.nombre); // Imprime 'Camiseta'

Ejemplo: 3
Este código crea una aplicación simple en Angular v18 que define una clase Producto con propiedades nombre, precio y cantidad. Luego, crea una lista de 5 productos y los muestra en una tabla en el template del componente.

Definición de la clase Producto:

// src/app/producto.ts
export class Producto {
  constructor(
    public nombre: string,
    public precio: number,
    public cantidad: number
  ) {}
}

Componente para mostrar la lista de productos:

// src/app/app.component.ts
import { Component } from '@angular/core';
// Agregando interface Lista de Productos
import { Producto } from './producto';
// agregando modulos necesarios
import { CommonModule, CurrencyPipe } from '@angular/common';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CurrencyPipe, CommonModule],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  productos: Producto[] = [
    new Producto('Camiseta', 25, 10),
    new Producto('Pantalón', 40, 5),
    new Producto('Zapatos', 60, 8),
    new Producto('Sombrero', 15, 20),
    new Producto('Bufanda', 10, 15)
  ];
}

Template para mostrar la lista de productos:

<!-- src/app/app.component.html -->
<div>
  <h1>Lista de Productos</h1>
  <table>
    <tr>
      <th>Nombre</th>
      <th>Precio</th>
      <th>Cantidad</th>
    </tr>
    <tr *ngFor="let producto of productos">
      <td>{{ producto.nombre }}</td>
      <td>{{ producto.precio | currency }}</td>
      <td>{{ producto.cantidad }}</td>
    </tr>
  </table>
</div>

Estilos para la tabla (opcional):

/* src/app/app.component.css */
table { width: 100%; border-collapse: collapse; margin: 10px; }
th, td { border: 1px solid #ddd; padding: 8px; }
th { background-color: #f2f2f2; text-align: left; }

Funciones (...fx..)

Las funciones son bloques de código reutilizables que realizan una tarea específica. Pueden estar dentro de una clase (métodos) o ser independientes (funciones globales). Por ejemplo, una función calcularImpuestos(salario) podría calcular los impuestos sobre el salario de un empleado.

typescript: Copiar código


export class ExampleComponent {
  logMessage() {
    console.log('Hello from Angular!');
  }

Html

<button (click)="logMessage()">Log Message</button>

Ejemplo: Este código crea una aplicación en Angular v18 que define una clase Empleado con métodos para calcular bonificaciones e impuestos. También incluye funciones globales para calcular tasas, razones, proporciones e IVA. Los resultados se muestran en el template del componente.

1. Definición de la clase Empleado: funciones locales = metodos

// src/app/empleado.ts
export class Empleado {
  constructor(
    public nombre: string,
    public salario: number
  ) {}

  // Método para calcular la bonificación
  calcularBonificacion(): number {
    return this.salario * 0.1; // Bonificación del 10%
  }

  // Método para calcular impuestos
  calcularImpuestos(): number {
    return this.salario * 0.15; // Impuesto del 15%
  }
}

2. Funciones globales:

// src/app/utils.ts
// Función global para calcular tasas
export function calcularTasa(valor: number, tasa: number): number {
  return valor * (tasa / 100);
}

// Función global para calcular razones
export function calcularRazon(a: number, b: number): number {
  return a / b;
}

// Función global para calcular proporciones
export function calcularProporcion(a: number, b: number): string {
  return `${a}:${b}`;
}

// Función global para calcular IVA
export function calcularIVA(precio: number, iva: number): number {
  return precio * (iva / 100);
}

3. Componente para mostrar la lista de empleados y usar las funciones globales:

// src/app/app.component.ts
import { Component } from '@angular/core';
// Agregando interface de...
import { Empleado } from './empleado';
import { calcularTasa, calcularRazon, calcularProporcion, calcularIVA } from './utils';
// agregando modulos necesarios
import { CommonModule, CurrencyPipe } from '@angular/common';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CurrencyPipe, CommonModule],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
  `
})
export class AppComponent {

  empleados: Empleado[] = [
    new Empleado('Juan', 50000),
    new Empleado('María', 60000),
    new Empleado('Pedro', 55000),
    new Empleado('Ana', 70000),
    new Empleado('Luis', 65000)
  ];

  // Ejemplos de uso de funciones globales
  tasaEjemplo = calcularTasa(1000, 5); // 5% de 1000
  razonEjemplo = calcularRazon(10, 2); // 10 dividido por 2
  proporcionEjemplo = calcularProporcion(3, 4); // Proporción 3:4
  ivaEjemplo = calcularIVA(100, 21); // 21% de 100
}

4. Template para mostrar la lista de empleados y los resultados de las funciones globales:

<!-- src/app/app.component.html -->
<div>
  <h1>Lista de Empleados</h1>
  <table>
    <tr>
      <th>Nombre</th>
      <th>Salario</th>
      <th>Bonificación</th>
      <th>Impuestos</th>
    </tr>
    <tr *ngFor="let empleado of empleados">
      <td>{{ empleado.nombre }}</td>
      <td>{{ empleado.salario | currency }}</td>
      <td>{{ empleado.calcularBonificacion() | currency }}</td>
      <td>{{ empleado.calcularImpuestos() | currency }}</td>
    </tr>
  </table>

  <h2>Ejemplos de Funciones Globales</h2>
  <p>Tasa (5% de 1000): {{ tasaEjemplo }}</p>
  <p>Razón (10 dividido por 2): {{ razonEjemplo }}</p>
  <p>Proporción (3:4): {{ proporcionEjemplo }}</p>
  <p>IVA (21% de 100): {{ ivaEjemplo | currency }}</p>
</div>

5. Estilos para la tabla (opcional):

/* src/app/app.component.css */
table { width: 100%; border-collapse: collapse; margin: 10px; }
th, td { border: 1px solid #ddd; padding: 8px; }
th { background-color: #f2f2f2; text-align: left; }

....

Métodos: funciones locales

Los métodos son funciones que se definen dentro de una clase o un objeto. Sirven para realizar acciones específicas. Ejemplo: En Angular, puedes tener un método llamado calcularTotal() que sume los valores de una lista de productos.

En Angular, los métodos se definen dentro de las clases de los componentes que pueden ser llamados desde las plantillas usando event bindings.. Puedes crear un método en el componente y luego llamarlo desde el template o desde otros métodos.

TypeScript y en el template: HTML

 // TypeScript
import { Component } from '@angular/core';

@Component({
  selector: 'app-ejemplo2', standalone: true,
  template; `<p>Resultado de la suma: {{ sumar(3, 5) }}</p>
  `,
  styles:`[]`
})
export class Ejemplo2Component {
  // Método que suma dos números
  sumar(a: number, b: number): number {
    return a + b;
  }
}

Arrays [...]

Los arrays (arreglos) son colecciones ordenadas de elementos del mismo tipo {...} . Los arrays en Angular se usan para almacenar listas de elementos. Puedes usar *ngFor para iterar sobre los elementos del array y mostrarlos en la plantilla. Ejemplo: En Angular, puedes tener un array de números [1, 2, 3] o un array de objetos [{ id: 1, nombre: 'Producto A' }, { id: 2, nombre: 'Producto B' }]. Los arrays de objetos pueden contener cualquier tipo de datos [...] . TypeScript

// Creación de un array de números
const numeros: number[] = [1, 2, 3, 4, 5];

// Creación de un array de objetos
const productos: Producto[] = [
  { nombre: 'Camiseta', precio: 25 },
  { nombre: 'Pantalón', precio: 40 }
];