El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia

HOME

Angular es un framework de desarrollo web basado en TypeScript, mantenido por Google, que permite crear aplicaciones web dinámicas y robustas. En este módulo, aprenderás los conceptos básicos de Angular, desde la configuración inicial hasta la creación de componentes y servicios.

¿Qué es Angular?

Angular es un framework de desarrollo web que facilita la creación de aplicaciones de una sola página (SPA). Algunas de sus características clave incluyen:

Componentes: Angular utiliza componentes para construir la interfaz de usuario.
Data Binding: Permite la sincronización automática de datos entre el modelo y la vista.
Directivas: Añaden comportamiento a los elementos del DOM.
Servicios e Inyección de Dependencias: Facilitan la gestión de datos y la lógica de negocio.
Rutas: Permiten la navegación entre diferentes vistas de la aplicación.

Configuración del Entorno

Requisitos Previos

Node.js y npm: Angular CLI requiere Node.js y npm para funcionar.
Angular CLI: Una herramienta de línea de comandos para inicializar, desarrollar y mantener aplicaciones Angular.

Instalación de Angular CLI

Para instalar Angular CLI, abre tu terminal y ejecuta el siguiente comando:

npm install -g @angular/cli

Creación de un Nuevo Proyecto Angular

Una vez que Angular CLI esté instalado, puedes crear un nuevo proyecto Angular con el siguiente comando:

ng new nombre-del-proyecto

Sigue las instrucciones en pantalla para configurar tu proyecto. Una vez creado, navega al directorio del proyecto:

cd nombre-del-proyecto

Para iniciar el servidor de desarrollo, ejecuta:

ng serve

Abre tu navegador y ve a http://localhost:4200 para ver tu aplicación Angular en funcionamiento.

Estructura de un Proyecto Angular

Un proyecto Angular típico tiene la siguiente estructura de directorios:

nombre-del-proyecto/
├── e2e/                     # Pruebas de extremo a extremo
├── node_modules/            # Dependencias del proyecto
├── src/                     # Código fuente de la aplicación
│   ├── app/                 # Módulos y componentes de la aplicación
│   ├── assets/              # Recursos estáticos (imágenes, fuentes, etc.)
│   ├── environments/        # Configuraciones de entorno
│   ├── index.html           # Archivo HTML principal
│   ├── main.ts              # Punto de entrada de la aplicación
│   ├── polyfills.ts         # Polyfills para compatibilidad con navegadores
│   ├── styles.css           # Estilos globales
│   └── test.ts              # Configuración de pruebas unitarias
├── angular.json             # Configuración del proyecto Angular
├── package.json             # Dependencias y scripts del proyecto
└── tsconfig.json            # Configuración de TypeScript

Componentes en Angular

Creación de un Componente

Para crear un nuevo componente, usa el siguiente comando:

ng generate component nombre-del-componente

Esto generará un nuevo directorio con los archivos necesarios para el componente:

src/app/nombre-del-componente/
├── nombre-del-componente.component.ts
├── nombre-del-componente.component.html
├── nombre-del-componente.component.css
└── nombre-del-componente.component.spec.ts

Estructura de un Componente

Un componente Angular consta de cuatro archivos principales:

nombre-del-componente.component.ts: Contiene la lógica del componente.
nombre-del-componente.component.html: Define la plantilla HTML del componente.
nombre-del-componente.component.css: Contiene los estilos específicos del componente.
nombre-del-componente.component.spec.ts: Archivo de pruebas unitarias para el componente.

Ejemplo de Componente

// nombre-del-componente.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-nombre-del-componente',
  templateUrl: './nombre-del-componente.component.html',
  styleUrls: ['./nombre-del-componente.component.css']
})
export class NombreDelComponenteComponent {
  titulo: string = 'Hola, Angular!';
}

<!-- nombre-del-componente.component.html -->
<h1>{{ titulo }}</h1>

Data Binding

Angular proporciona varias formas de enlazar datos entre el modelo y la vista:

Interpolación: {{ variable }} para mostrar datos en la vista.
Binding de Propiedad: [propiedad]="variable" para enlazar propiedades de elementos HTML.
Binding de Evento: (evento)="funcion()" para manejar eventos del DOM.
Binding Bidireccional: [(ngModel)]="variable" para sincronizar datos en ambas direcciones.

Ejemplo de Data Binding

// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  titulo: string = 'Hola, Angular!';
  mensaje: string = '';

  actualizarMensaje(event: any): void {
    this.mensaje = event.target.value;
  }
}

<!-- app.component.html -->
<h1>{{ titulo }}</h1>
<input type="text" (input)="actualizarMensaje($event)">
<p>{{ mensaje }}</p>

Directivas

Las directivas son instrucciones en el DOM que le dicen a Angular cómo comportarse. Hay tres tipos principales de directivas:

Directivas de Atributo: Modifican el comportamiento de un elemento, atributo o componente existente.
Directivas Estructurales: Cambian la estructura del DOM (e.g., *ngIf, *ngFor).
Directivas de Componente: Son directivas con una plantilla asociada.

Ejemplo de Directiva Estructural

<!-- app.component.html -->
<ul>
  <li *ngFor="let item of items">{{ item }}</li>
</ul>

// app.component.ts
export class AppComponent {
  items: string[] = ['Elemento 1', 'Elemento 2', 'Elemento 3'];
}

Servicios e Inyección de Dependencias

Los servicios en Angular son clases que proporcionan datos o lógica de negocio. Se pueden inyectar en componentes y otros servicios utilizando el sistema de inyección de dependencias de Angular.

Creación de un Servicio

Para crear un nuevo servicio, usa el siguiente comando:

ng generate service nombre-del-servicio

Ejemplo de Servicio

// nombre-del-servicio.service.ts
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class NombreDelServicioService {
  obtenerDatos(): string[] {
    return ['Dato 1', 'Dato 2', 'Dato 3'];
  }
}

Inyección de un Servicio en un Componente

// app.component.ts
import { Component, OnInit } from '@angular/core';
import { NombreDelServicioService } from './nombre-del-servicio.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  datos: string[] = [];

  constructor(private servicio: NombreDelServicioService) {}

  ngOnInit(): void {
    this.datos = this.servicio.obtenerDatos();
  }
}

<!-- app.component.html -->
<ul>
  <li *ngFor="let dato of datos">{{ dato }}</li>
</ul>

Conclusión

En este módulo, hemos cubierto los conceptos básicos de Angular, incluyendo la configuración del entorno, la estructura de un proyecto, la creación de componentes, el data binding, las directivas y los servicios. Estos fundamentos te proporcionarán una base sólida para desarrollar aplicaciones web con Angular.

En el siguiente módulo, profundizaremos en la gestión del estado con Redux, una herramienta poderosa para manejar el estado de las aplicaciones Angular de manera eficiente.

Conceptos Básicos de Angular

¿Qué es Angular?

Configuración del Entorno

Requisitos Previos

Instalación de Angular CLI

Creación de un Nuevo Proyecto Angular

Estructura de un Proyecto Angular

Componentes en Angular

Creación de un Componente

Estructura de un Componente

Ejemplo de Componente

Data Binding

Ejemplo de Data Binding

Directivas

Ejemplo de Directiva Estructural

Servicios e Inyección de Dependencias

Creación de un Servicio

Ejemplo de Servicio

Inyección de un Servicio en un Componente

Conclusión

JavaScript: De Principiante a Avanzado

Módulo 1: Introducción a JavaScript

Módulo 2: Estructuras de Control

Módulo 3: Funciones

Módulo 4: Objetos y Arrays

Módulo 5: Objetos y Funciones Avanzadas

Módulo 6: El Modelo de Objetos del Documento (DOM)

Módulo 7: APIs del Navegador y Temas Avanzados

Módulo 8: Pruebas y Depuración

Módulo 9: Rendimiento y Optimización

Módulo 10: Frameworks y Librerías de JavaScript

Módulo 11: Proyecto Final