Introducción a Angular 🚀

¿Qué es Angular?

Angular es un framework front-end desarrollado por Google para construir aplicaciones web de una sola página (SPA) basadas en TypeScript. Proporciona arquitectura, herramientas y convenciones para desarrollar aplicaciones escalables y mantenibles.

Campos principales de Angular (3) 🌐📱🖥️

Angular se usa principalmente en tres campos fundamentales:

• Web 🌐 — aplicaciones SPA para navegadores.
• Móvil 📱 — mediante soluciones como Ionic o NativeScript para aplicaciones híbridas/nativas.
• Escritorio 🖥️ — usando Electron u otras integraciones para apps de escritorio.

Seis bloques fundamentales de Angular (6) 🧩

Angular se basa en estos bloques clave:

1. Components (Componentes) — UI, templates y estilos.
2. Modules (NgModule) — agrupación y carga.
3. Templates & Data Binding — enlazado de datos y expresiones.
4. Directives — comportamiento del DOM (*ngIf, *ngFor).
5. Services & Dependency Injection — lógica reusable y proveedores.
6. Routing — navegación y lazy-loading de módulos.

Diagrama simple de los bloques fundamentales

Un pequeño diagrama para visualizar la relación:

App (NgModule principal)
   |
   +-- Components (UI) 🧱
   |      |
   |      +-- Templates & Data Binding {{ }} 🔗
   |
   +-- Services (DI) ⚙️
   |
   +-- Directives (comportamiento) ✨
   |
   +-- Routing (navegación) ➝
   |
   +-- Otros Módulos / Lazy Loading 📦

Requisitos

• Node.js (LTS recomendada) ✅
• npm o yarn ✅
• Conocimientos básicos de HTML, CSS y TypeScript ✅

Instalación completa (desde CLI hasta compilación) ⚙️

1. Instalar Node.js y npm desde https://nodejs.org
2. Instalar Angular CLI globalmente: npm install -g @angular/cli
3. Crear un nuevo proyecto: ng new nombre-proyecto (responder a las opciones que necesites: routing, estilos)
4. Entrar al proyecto: cd nombre-proyecto
5. Instalar dependencias adicionales opcionales: ng add @angular/material npm install bootstrap
6. Ejecutar en desarrollo: ng serve Abrir http://localhost:4200
7. Ejecutar pruebas: ng test
8. Lint y chequeos: ng lint
9. Compilar para producción: ng build --configuration production (o: ng build --prod)
10. (Opcional) Deploy:

• Usar servicios como Firebase Hosting, Netlify, Vercel o angular-cli-ghpages
• Ejemplo rápido para GitHub Pages: npm install -g angular-cli-ghpages ng build --base-href /repo-name/ npx angular-cli-ghpages --dir=dist/

Comandos para generar e instalar componentes y artefactos 🔧

• Generar componente: ng generate component nombre-componente ng g c shared/header
• Generar servicio: ng generate service nombre-servicio ng g s services/api
• Generar módulo: ng generate module nombre-modulo --routing
• Instalar librería (Angular Material ejemplo): ng add @angular/material
• Instalar paquete npm: npm install nombre-paquete (p. ej., npm install bootstrap @ng-bootstrap/ng-bootstrap)

Estructura básica de un proyecto Angular

• src/
  • app/ — módulos, componentes y servicios de la aplicación
  • assets/ — recursos estáticos
  • index.html — entrada principal
  • main.ts — bootstrap de la app
• angular.json — configuración del proyecto
• package.json — dependencias y scripts

Buenas prácticas rápidas

• Mantener componentes pequeños y con una sola responsabilidad.
• Usar servicios para lógica de negocio y comunicación HTTP.
• Tipar código con TypeScript y aprovechar interfaces.
• Escribir pruebas unitarias y de integración.

Recursos

• Documentación oficial: https://angular.io
• Tour of Heroes (tutorial oficial)
• Comunidad: StackOverflow, foros y canales oficiales

---

Este README es un punto de partida. Para profundizar, sigue la documentación oficial y realiza proyectos prácticos.