Primeros pasos con Angular

Introducción

Angular es un framework de desarrollo web creado por Google, basado en TypeScript. Pero, ¿por qué es un framework? Angular tiene todo lo que se necesita para crear un producto/proyecto.

• Gestor de estado
• Enrutamiento
• Reactividad
• Peticiones HTTP
• Directivas
• etc…

Pero, los componentes más importantes son:

• Componentes: Son piezas que representan una parte de la intefaz de usuario. (HTML, ts y css(opcional))
• Rutas: Son componentes que permiten el cambio entre páginas. Esto permite tener logica para las transiciones entre las páginas, generar el control de acceso y autorización en las distintas páginas y tener control sobre la renderización.
• Directivas: Estas clases se encargan de modificar el comportamiento de los componentes. (Directivas de artibutos, estructurales y personalizados o componentes)
• Services: Son clases que contienen la logica de negocio. Estos servicios nos permiten gestionar datos, realizar operaciones y realizar llamadas a APIs, etntre otras cosas.
• Modulos: Son clases que agrupan funcionalidades relacionadas que ayudan a organizar el código, encapsular las dependencias y facilitar la reutilización de código.
• Pipes: Son una estratefia para modificar los datos que se muestran en la interfaz de usuario. Tambien permiten ordenar, filtrar y transformar datos.

Instalación de Angular

Instalación de Angular CLI

Usar este comando para instalar Angular CLI:

npm install -g @angular/cli

Validación de la instalación

Para este ejemplo, usaremos la versión 19 de Angular, pero puede usar cualquier versión depues de la 18.

ng --version

Creación de un nuevo proyecto

Usar este comando para crear un nuevo proyecto, en este caso se llamará ‘angular-app’:

ng new angular-app

• Generalmente la consola indicará que tipo de formatos de hojas de estilo se usarán. En lo personal, yo uso CSS debido a que luego podría usar frameworks como Tailwind CSS o Bootstrap.
• Una nueva característica de Angular es permitirnos usar Server-Side Rendering (SSR), pero esta entrada se enfocará en SPA, por lo que no se necesitará esta característica.
• Se instalará automaticamente Angular y todas las dependencias necesarias.

Ejecución del proyecto

Para ejecutar el proyecto, se debe ingresar en el directorio del proyecto y ejecutar el comando de ejecución:

cd angular-app
ng serve -o

• cd angular-app: cambio de directorio al directorio del proyecto
• ng serve: ejecución del proyecto
• -o: abre el navegador por defecto

Estructura del proyecto

Al crear un proyecto con Angular este va a crear una estructura de directorios. Esta estructura es muy sencilla y entenderla es el primer paso para comenzar a programar con Angular.

Carpetas

• .angular: Contiene los archivos de configuración de Angular.
• .vscode: Contiene los archivos de configuración de Visual Studio Code (El editor que uso).
• node_modules: Contiene los paquetes de dependencias de Angular. Estos paquetes se instalan con npm, pnpm, yarn o bun.
• public: Contiene los archivos estáticos que se pueden acceder desde cualquier parte de la aplicación, como por ejemplo, imágenes, archivos CSS, etc.
• src: Contiene los archivos fuente de la aplicación.

Archivos de configuración

• .editorconfig: Configuración de formato de código.
• .gitignore: Lista de archivos que Angular debe ignorar al usar git.
• angular.json: Configuración de Angular.
• pnpm-lock.yml: Es el archivo que contiene la versión de cada paquete de dependencias que se instaló con pnpm y estas dependencias se guardan en el node_modules
• package.json: Configuración de paquetes de dependencias. Los paquetes de dependencias son pequeños paquetes que contienen una funcionalidad, que ayudan a la aplicación a funcionar.
• README.md: En este archivo se explica el proyecto y las dependencias que se instalaron.(Generalmente se usa para documentar el proyecto)
• tsconfig.json: Configuración de TypeScript. Generalmente esta configuración ya la genera Angular con las mejores opciones para optimizar el rendimiento de Angular.

Archivos fuente (SRC)

Los archivos fuente son los archivos que contienen el código de la aplicación. En este caso, el código fuente de Angular se encuentra en el directorio src.

• index.html: Contiene el código HTML de la aplicación. Este archivo se encarga de mostrar el componente ‘app’ en el navegador. Es la entrada principal de la aplicación.
• main.ts: Contiene el código de TypeScript de la aplicación. Este archivo se encarga de inicializar la aplicación. Aquí se define la forma de renderización de la aplicación, en el caso de este ejemplo, renderizado en el navegador.
• styles.css: Contiene el código de estilos globales de la aplicación.

Componente ‘app’

• app: Contiene el código fuente del componente ‘app’. Generalmente las carpetas indican el nombre del componente.
• app->app.component.css: Contiene el código de estilos del componente ‘app’ (CSS). Modificará directamente el estilo del html.
• app->app.component.html: Contiene el código HTML del componente ‘app’. Esto será lo que verá el usuario en el navegador.
• app->app.component.spec.ts: Contiene los tests del componente ‘app’. Se usa para hacer pruebas unitarias del componente.
• app->app.component.ts: Contiene el código de TypeScript del componente ‘app’. Este archivo contiene la lógica del componente.
• app->app.config.ts: Contiene la configuración de Angular. Este archivo se encarga de configurar Angular para que funcione correctamente.
• app->app.routes.ts: Contiene la ruta de la aplicación. Este archivo se encarga de definir las rutas de la aplicación.

Componentes

Un componente es una pieza de la interfaz de usuario. Un componente generalmente es una clase que tiene un decorador @component.

// Esta es una clase que no es un componente
export class AppComponent {
 // code
}

---

// Para convertir en componente se le agrega el decorador @component, este viene de @angular/core
import { Component } from '@angular/core';
// El decorador requiere un objeto con la configuración del componente
// Es este caso @Component() requiere al menos el template que es un html
@Component({
  template: `<h1>Hola Angular</h1>`
})
export class AppComponent {
 // code
}

Template

Los templates se utilizan para mostrar la interfaz de usuario de la aplicación(HTML). En el caso anterior, el template se vincula con el componente mediante el decorador @Component.

{
  template: `<h1>Hola Angular</h1>`;
}

Si en el template se desea usar una variable, se debe definir la variable en el componente y luego utilizarla en el template.Para mostrar el valor de la variable, se debe utilizar la sintaxis de interpolación de Angular. Recordar la interpolación de Angular es {{ variable }} es propia de javascript y así que se puede muchas expresiones entre los corchetes.

import { Component } from "@angular/core";

@Component({
  template: `
    <p>Nombre: {{ name }}</p>
    <p>Edad:{{ age }}</p>
    <p>Suma{{ numero + 100 }}</p>
  `,
})
export class NameComponent {
  name: string = "Jhonatan";
  age: number = 25;
  numero: number = 10;
}

Este componente muestra el valor de las variables definidas en el componente.

El template puede comunicarse directemente con el componente, así que si se quiere cambiar el valor de una variable, se debe hacer en el componente y no en el template.

Este es el ejemplo por excelencia: el contador. En este caso, se usará un botón para incrementar el valor de la variable.

import { Component } from "@angular/core";

@Component({
  template: `
    <h1>Contador: {{ counter }}</h1>
    <button (click)="incrementOne()">Incrementar +1</button>
    <button (click)="incrementValue(10)">Incrementar +10</button>
  `,
})
export class CounterComponent {
  counter = 10; // Inicializar el contador en 10

  // Método para incrementar el contador en 1
  incrementOne() {
    this.counter++; // Se agrega la palabra this para acceder al componente
  }

  incrementValue(value: number) {
    this.counter += value; // Se cambia el valor del contador con el valor de la variable
  }
}

Este componente muestra el contador y dos botones para incrementar el valor del contador.

TemplateUrl

Cuando el HTML que se quiera mostrar en el componente es mucho más grande (supera las 3 lineas de código), se puede utilizar el templateUrl para mostrar el HTML en el componente.

// Este es componente con templateUrl (name.component.ts)
import { Component } from "@angular/core";

@Component({
  templateUrl: "./name.component.html", // Vincular el HTML con el TS
})
export class NameComponent {
  name: string = "Jhonatan";
  age: number = 25;
  numero: number = 10;
}

---
// Este es el HTML que se vincula con el componente (name.component.html)
<p>Nombre: {{ name }}</p>
<p>Edad:{{ age }}</p>
<p>Suma{{ numero + 100 }}</p>

El templateUrl se utiliza para vincular el HTML con el componente. En este caso, el HTML se encuentra en el archivo name.component.html.

Tambien es posible seguir utilizando el templateUrl y la logica del componente. Estos son los cambios del contador:

// Este es el componente con templateUrl (counter.component.ts)
import { Component } from "@angular/core";

@Component({
  templateUrl: "./counter.component.html",
})
export class CounterComponent {
  counter = 10;

  incrementOne() {
    this.counter++;
  }

  decrementOne() {
    this.counter--;
  }

  resetCounter() {
    this.counter = 10;
  }
}

y ahora el HTML:

<h1>Contador: {{ counter }}</h1>
<button (click)="decrementOne()">Decrementar -1</button>
<button (click)="incrementOne()">Incrementar +1</button>
<button (click)="resetCounter()">Resetear</button>

Styles y StylesUrl

Los styles y stylesUrl son similares a los templates. Se utilizan para vincular el CSS con el componente. En este caso, el CSS se encuentra en el archivo name.component.css. Recordar que los estilos pueden ser de varias fuentes, por lo que styles y stylesUrl aceptan una lista de strings.

Este es el html:

// Este es el HTML que se vincula con el componente (name.component.html)
<p>Nombre: {{ name }}</p>
<p>Edad:{{ age }}</p>
<p>Suma{{ numero + 100 }}</p>

En este caso, el CSS se encuentra en el archivo name.component.ts

// Este es el componente con styles (name.component.ts)
import { Component } from "@angular/core";

@Component({
  templateUrl: "./name.component.html",
  // styles acepta una lista de strings por si se quiere utilizar múltiples fuentes de CSS
  styles: [
    `
      p {
        color: red;
      }
    `,
  ],
})
export class NameComponent {
  name: string = "Jhonatan";
  age: number = 25;
  numero: number = 10;
}

El stylesUrl se utiliza para vincular el CSS con el componente. En este caso, el CSS se encuentra en el archivo name.component.css.

// Este es el componente con stylesUrl (name.component.ts)
import { Component } from "@angular/core";

@Component({
  templateUrl: "./name.component.html",
  // styles acepta una lista de strings por si se quiere utilizar múltiples fuentes de CSS
  stylesUrls: ["./name.component.css"],
})
export class NameComponent {
  name: string = "Jhonatan";
  age: number = 25;
  numero: number = 10;
}

El archivo de estilos:

/* Este es el CSS que se vincula con el componente (name.component.css) */
p {
  color: red;
}

Para ambos casos, el resultado es el mismo:

Ahora el mismo concepto al componente Contador:

// Este es el html (counter.component.html)
<h1>Contador: {{ counter }}</h1>
<br />
<button (click)="decrementOne()">Incrementar -1</button>
<button (click)="resetCounter()">Resetear</button>
<button (click)="incrementOne()">Incrementar +1</button>

// Este es el componente con stylesUrl (counter.component.ts)
import { Component } from "@angular/core";

@Component({
  templateUrl: "./counter.component.html",
  // styles acepta una lista de strings por si se quiere utilizar múltiples fuentes de CSS
  styleUrls: ["./counter.component.css"], // Vincular el CSS con el TS
})
export class CounterComponent {
  counter = 10;

  incrementOne() {
    this.counter++;
  }

  decrementOne() {
    this.counter--;
  }

  resetCounter() {
    this.counter = 10;
  }
}

y ahora el CSS:

/* Este es el CSS que se vincula con el componente (counter.component.css) */
button {
  margin: 5px 10px;
  padding: 10px;
  border: 1px solid white;
  background-color: #008cba;
  color: white;
  border-radius: 5px;
  width: 150px;
}

button:hover {
  background-color: #006a8e;
  cursor: pointer;
  transition: 0.3s;
  box-shadow: 0 0 10px #008cba;
}

Este es el resultado:

Rutas

Para crear una ruta se debe crear un componente y luego crear una ruta que apunte a ese componente. La configuración más básica se basa en un array de rutas, y cada ruta tiene un path y un componente asociado.

import { Routes } from "@angular/router";
import { HomeComponent } from "./home/home.component"; // Importar el componente que se va a usar

// Lista de rutas
export const routes: Routes = [
  {
    path: "", // Ruta por defecto: http://localhost:4200/
    component: HomeComponent, // Componente que se renderiza
  },
];

Ahora, ¿por qué se renderiza el componente HomeComponent? En el archivo app->app.component.html se encuentra el código HTML que se renderizará en el navegador.

<router-outlet />

Este código es un marcador de posición que Angular usa para renderizar el componente que se le pase por la ruta. En este caso, el componente HomeComponent. Este app.componente.html puede verse de primera mano como el layout principal de la aplicación.

El app.component.html está vinculado con el app.component.ts, que es la clase que es la entrada principal de la aplicación. Si vemos su código, podemos ver que se importa el router-outlet:

import { Component } from "@angular/core";
import { RouterOutlet } from "@angular/router"; // Importar el router-outlet

@Component({
  selector: "app-root",
  imports: [RouterOutlet], // Importar el router-outlet
  templateUrl: "./app.component.html", // Vincular el HTML con el TS
})
export class AppComponent {
  title = "Proyecto";
}

Conclusión

En este artículo se dio un barrido de introducción a Angular, que aplica para versiones desde la 16. Hay mucho tema por fuera, pero la idea era hacer un barrido de introducción a la arquitectura de Angular, que es muy potente y poderoso. Próximamente, veremos otros temas de Angular. Si desean estar al día con Angular, pueden seguir leyendo el articulo de Angular 19, en el cual se seguirán actualizando poco a poco.

Gracias por leer.