Capítulo 1: Conceptos Básicos de Angular

Introducción: Este capítulo es una introducción esencial a Angular, un framework de desarrollo web que te permitirá construir aplicaciones web interactivas y dinámicas. Exploraremos los conceptos fundamentales de Angular y aprenderás cómo configurar tu entorno de desarrollo para comenzar a trabajar con este poderoso framework.

1.1. ¿Qué es Angular?

Angular es un framework de desarrollo web de código abierto creado por un equipo de ingenieros de Google. Inicialmente, fue desarrollado por un ingeniero llamado Misko Hevery, quien trabajaba en Google en ese momento. El desarrollo de Angular comenzó en 2009, y se lanzó la primera versión, conocida como «AngularJS» o «Angular 1.x», en 2010. AngularJS introdujo un enfoque revolucionario para el desarrollo de aplicaciones web, popularizando el concepto de la arquitectura MVW (Model-View-Whatever) y el uso de directivas personalizadas.

Posteriormente, en 2016, se lanzó una reescritura completa del framework con el nombre «Angular 2», que marcó una evolución significativa en la arquitectura y el diseño del framework. Desde entonces, Angular ha continuado evolucionando con nuevas versiones y ha mantenido su posición como un framework de desarrollo web de código abierto ampliamente utilizado.

A continuación, te proporcionaré una descripción más detallada:

¿Qué es un framework de JavaScript? Un framework de JavaScript es un conjunto de herramientas y bibliotecas predefinidas que proporciona una estructura para el desarrollo de aplicaciones web. Angular es uno de los frameworks de JavaScript más populares y se utiliza para construir aplicaciones web de una sola página (SPA), donde la mayor parte del contenido se carga dinámicamente sin recargar la página.
Historia y evolución de Angular Angular tuvo una primera versión conocida como AngularJS, que se lanzó en 2010. Sin embargo, con Angular 2 y las versiones posteriores, se produjo un cambio significativo en la arquitectura y el diseño del framework. Esto permitió que Angular se convirtiera en una herramienta más eficiente y poderosa para desarrollar aplicaciones web modernas.

Aquí tienes una breve descripción de la característica más relevante de cada una de las versiones de Angular junto con el año de su lanzamiento:

AngularJS (Angular 1.x): Introducción de la arquitectura MVW (Model-View-Whatever) (2010)
Angular 2: Reescritura completa del framework con una arquitectura basada en componentes (2016)
Angular 4: Reducción del tamaño de los bundles y mejoras en la velocidad de carga (2017)
Angular 5: Soporte para Progressive Web Apps (PWAs) y mejoras en el rendimiento (2017)
Angular 6: Introducción de Angular Elements para la creación de componentes reutilizables (2018)
Angular 7: Mejoras en el rendimiento y nuevas características en Angular Material (2018)
Angular 8: Introducción de Angular Ivy, un nuevo motor de renderizado más rápido (2019)
Angular 9: Introducción de Angular CLI Builders y mejoras en las bibliotecas compartidas (2019)
Angular 10: Actualización de las dependencias y mejoras en la detección de cambios (2020)
Angular 11: Mejoras en la compatibilidad con TypeScript 4.0 y la eficiencia de la compilación (2020)
Angular 12: Soporte para actualizaciones incrementales y mejoras en Angular CLI (2021)
Angular 13: Mejoras en la compilación Ahead-of-Time (AOT) y en el rendimiento (2021)

Cada versión de Angular ha aportado características y mejoras significativas para facilitar el desarrollo de aplicaciones web, mejorar el rendimiento y mantener Angular como una opción sólida para la creación de aplicaciones modernas.

Características y ventajas de Angular Angular ofrece varias características clave, como una arquitectura basada en componentes, enlace de datos bidireccional (que permite una actualización automática de la vista cuando los datos cambian), inyección de dependencias (una forma de administrar las dependencias de un componente o servicio), facilidad para escribir pruebas unitarias y un sólido respaldo por parte de Google. Estas características hacen que Angular sea una elección sólida para desarrolladores que deseen construir aplicaciones web robustas.
Comparación con otros frameworks Angular se compara con otros frameworks populares como React y Vue.js. La elección entre estos frameworks dependerá de los requisitos del proyecto y de las preferencias del desarrollador. Angular es conocido por su estructura más completa y su conjunto de características incorporadas, mientras que React se centra en la creación de interfaces de usuario y Vue.js es apreciado por su simplicidad y facilidad de aprendizaje.

1.2. Configuración del entorno de desarrollo

Configurar el entorno de desarrollo es un paso crucial para trabajar con Angular:

Herramientas esenciales para el desarrollo de Angular Para comenzar a desarrollar aplicaciones Angular, necesitas ciertas herramientas esenciales:
- Node.js y npm (Node Package Manager): Node.js es un entorno de ejecución de JavaScript que te permite ejecutar JavaScript en el lado del servidor. npm es el gestor de paquetes de Node.js y se utiliza para instalar paquetes y dependencias de proyectos.
- Editor de código: Necesitarás un editor de código, como Visual Studio Code, para escribir y editar tu código de Angular.
Instalación de Node.js y npm Puedes descargar e instalar Node.js desde el sitio web oficial (https://nodejs.org/). Junto con Node.js, npm se instalará automáticamente. Para verificar que Node.js y npm se instalaron correctamente, puedes abrir una terminal y ejecutar los siguientes comandos:

node -vnpm -v

Configuración de un editor de código
Un buen editor de código es esencial. Visual Studio Code es una opción popular entre los desarrolladores de Angular. Puedes personalizarlo con extensiones para facilitar el desarrollo con Angular, como Angular Language Service.
Creación del primer proyecto Angular con Angular CLI (Command Line Interface) Angular CLI es una herramienta que simplifica la creación y gestión de proyectos Angular. Puedes crear tu primer proyecto Angular ejecutando el siguiente comando:

ng new nombre-del-proyecto

Angular CLI te hará una serie de preguntas para configurar el proyecto, como el estilo de hojas de estilo (CSS, SCSS, etc.), si deseas agregar enrutamiento y más.

1.3. Estructura de un proyecto Angular

Exploración de la estructura de directorios de un proyecto Angular generado Cuando creas un proyecto Angular con Angular CLI, se generan una serie de directorios y archivos. Estos incluyen «src» para el código fuente de tu aplicación, «node_modules» para las dependencias, «angular.json» para la configuración del proyecto, «package.json» para las dependencias y scripts, y otros directorios y archivos relacionados con el desarrollo.
Archivos esenciales y su propósito Algunos archivos clave que encontrarás en un proyecto Angular incluyen:
- main.ts: Este es el punto de entrada de la aplicación y se encarga de inicializar la aplicación.
- app.module.ts: Define el módulo principal de la aplicación y registra los componentes y servicios.
- app.component.ts: El primer componente de la aplicación, que define la vista y la lógica de la página principal.
- index.html: La página HTML principal de la aplicación, que incluye las etiquetas <app-root></app-root> donde se carga el contenido de la aplicación.
Inicio de un servidor de desarrollo local Puedes iniciar un servidor de desarrollo local ejecutando el siguiente comando:

ng serve

Esto compila la aplicación y la sirve en un servidor web local. La aplicación se actualiza automáticamente en tiempo real a medida que realizas cambios en el código.

1.4. Creación de un primer proyecto Angular

Creación de un componente básico Los componentes son los bloques de construcción fundamentales en Angular. Puedes crear un nuevo componente utilizando el siguiente comando:

ng generate component nombre-del-componente

Esto generará archivos para el componente, incluyendo su plantilla, archivo TypeScript y hoja de estilo. Luego, puedes editar el componente y su plantilla para personalizarlo según tus necesidades.

Plantillas y vistas en Angular Las plantillas en Angular son archivos HTML que definen la estructura de las vistas. Las vistas en Angular se componen de plantillas y lógica de componentes. Las plantillas se utilizan para representar la interfaz de usuario de la aplicación.
Inserción de contenido dinámico Angular permite mostrar contenido dinámico en las plantillas utilizando interpolación, que es la forma de mostrar valores de variables en la vista. Por ejemplo, puedes mostrar variables en la plantilla utilizando dobles llaves {{ variable }}.
Mostrar «Hola, Mundo» en tu navegador Después de crear un componente simple y definir una plantilla que muestra «Hola, Mundo», puedes ver tu primera aplicación Angular en un navegador utilizando el servidor de desarrollo. El contenido dinámico se actualizará en tiempo real a medida que realices cambios en el componente.

1.5. Componentes y Módulos

¿Qué son los componentes en Angular? Los componentes son elementos reutilizables en Angular que constan de una plantilla, lógica y estilos. Cada componente tiene una función específica en la interfaz de usuario de la aplicación.

Un ejemplo común de componentes en Angular podría ser un sistema de navegación para una aplicación web. Imagina que estás construyendo una aplicación con varias secciones, como «Inicio», «Productos», «Acerca de» y «Contacto». Cada una de estas secciones puede ser un componente independiente. Aquí hay un ejemplo de cómo se podrían definir estos componentes en Angular:

Componente de Inicio:
1. Este componente podría mostrar información de bienvenida y contenido relacionado con la página de inicio de la aplicación.
Componente de Productos:
1. El componente de Productos podría mostrar una lista de productos disponibles para comprar y permitir a los usuarios navegar a las páginas de detalles de los productos.
Componente de Acerca de:
1. En el componente de Acerca de, podrías mostrar información sobre la empresa o la aplicación, su historia y su misión.
Componente de Contacto:
1. El componente de Contacto podría incluir un formulario de contacto donde los usuarios puedan enviar consultas o comentarios.

Cada uno de estos componentes tendría su propia plantilla HTML, su archivo TypeScript para la lógica y, si es necesario, su hoja de estilo CSS o SCSS para el diseño. Luego, estos componentes se pueden usar en la aplicación principal para construir la estructura de navegación y mostrar el contenido correspondiente en función de la URL o las interacciones del usuario.

Los componentes en Angular se utilizan para dividir la interfaz de usuario en partes más pequeñas y reutilizables, lo que facilita el desarrollo y el mantenimiento de aplicaciones web complejas.

Creación de componentes personalizados Puedes crear componentes personalizados para dividir la interfaz de usuario en partes más pequeñas y reutilizables. Cada componente se compone de un archivo TypeScript, una plantilla HTML y una hoja de estilo CSS o SCSS.

Aquí tienes un ejemplo básico de cómo se vería un componente personalizado en Angular con su archivo TypeScript, una plantilla HTML y una hoja de estilo CSS. Supongamos que estamos creando un componente llamado ProductListComponent que muestra una lista de productos.

product-list.component.ts (archivo TypeScript):

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

@Component({
  selector: 'app-product-list', // Nombre del selector para usar el componente en la plantilla
  templateUrl: './product-list.component.html', // Ruta a la plantilla HTML
  styleUrls: ['./product-list.component.css'] // Ruta a la hoja de estilo CSS
})
export class ProductListComponent {
  // Aquí puedes definir propiedades y lógica relacionada con el componente
  products = [
    { id: 1, name: 'Producto 1', price: 19.99 },
    { id: 2, name: 'Producto 2', price: 29.99 },
    { id: 3, name: 'Producto 3', price: 39.99 }
  ];
}

product-list.component.html (plantilla HTML):

<!-- La plantilla HTML define la estructura visual del componente -->
<div>
  <h2>Lista de Productos</h2>
  <ul>
    <li *ngFor="let product of products">
      {{ product.name }} - Precio: {{ product.price | currency: 'USD' }}
    </li>
  </ul>
</div>

product-list.component.css (hoja de estilo CSS):

/* La hoja de estilo CSS define el aspecto visual del componente */
h2 {
  color: #333;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  margin: 10px 0;
  font-size: 18px;
}

/* Puedes agregar más estilos según tus necesidades */

Este es un ejemplo básico de un componente personalizado en Angular. El archivo TypeScript (product-list.component.ts) define la lógica del componente, la plantilla HTML (product-list.component.html) define la estructura visual y la hoja de estilo CSS (product-list.component.css) define los estilos para el componente. Puedes utilizar este componente en otras partes de tu aplicación usando el selector app-product-list.

Uso de módulos para organizar la aplicación Los módulos en Angular se utilizan para organizar la aplicación en unidades funcionales. El módulo principal es el AppModule, que importa y declara todos los componentes y servicios necesarios para la aplicación.

Aquí tienes un ejemplo básico del archivo AppModule en Angular. El AppModule es el módulo principal de tu aplicación, y se encarga de importar y declarar los componentes y servicios necesarios para que tu aplicación funcione. Aquí te muestro un ejemplo simple:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { HomeComponent } from './home.component';
import { ProductsComponent } from './products.component';
import { AboutComponent } from './about.component';
import { ContactComponent } from './contact.component';

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    ProductsComponent,
    AboutComponent,
    ContactComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

En este ejemplo:

Importamos módulos y componentes necesarios, como BrowserModule para aplicaciones web, el componente principal AppComponent y otros componentes que hemos creado, como HomeComponent, ProductsComponent, AboutComponent y ContactComponent.
En el array declarations, listamos todos los componentes que este módulo utilizará. Cada componente debe ser declarado aquí para que Angular los reconozca.
En el array imports, especificamos los módulos que se utilizan en este módulo. En este caso, estamos importando BrowserModule para las aplicaciones web. Puedes importar otros módulos según las necesidades de tu aplicación.
El array providers se utiliza para declarar los servicios que pueden ser inyectados en los componentes de este módulo. En este ejemplo, está vacío, pero normalmente se llenaría con servicios personalizados si los tuvieras.
Finalmente, en el array bootstrap, especificamos el componente raíz de la aplicación, que en este caso es AppComponent. El componente raíz se inyectará en el archivo HTML principal de la aplicación para que se muestre en la página.

Este es un ejemplo simple, pero muestra cómo se configura el AppModule en Angular para importar y declarar componentes, módulos y servicios necesarios para tu aplicación.

Declaración, exportación e importación de componentes en módulos Los componentes se declaran en un módulo específico y luego se exportan para que estén disponibles para otros módulos. Otros módulos pueden importar estos componentes si es necesario.

Aquí tienes un ejemplo de cómo declarar, exportar e importar componentes en módulos en Angular. Supongamos que tenemos dos componentes llamados ProductListComponent y ProductDetailComponent que queremos declarar en un módulo llamado ProductModule.

product-list.component.ts (archivo TypeScript):

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

@Component({
  selector: 'app-product-list',
  templateUrl: './product-list.component.html',
})
export class ProductListComponent {
  // Propiedades y lógica del componente
}

product-detail.component.ts (archivo TypeScript):

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

@Component({
  selector: 'app-product-detail',
  templateUrl: './product-detail.component.html',
})
export class ProductDetailComponent {
  // Propiedades y lógica del componente
}

product.module.ts (archivo TypeScript del módulo):

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ProductListComponent } from './product-list.component'; // Importamos el componente ProductListComponent
import { ProductDetailComponent } from './product-detail.component'; // Importamos el componente ProductDetailComponent

@NgModule({
  declarations: [
    ProductListComponent, // Declaramos el componente ProductListComponent en este módulo
    ProductDetailComponent, // Declaramos el componente ProductDetailComponent en este módulo
  ],
  imports: [CommonModule],
})
export class ProductModule {}

En este ejemplo:

Hemos creado dos componentes, ProductListComponent y ProductDetailComponent, cada uno con su archivo TypeScript y su plantilla HTML.
Luego, creamos un módulo llamado ProductModule utilizando el decorador NgModule. En el array declarations, importamos y declaramos los componentes que deseamos utilizar en este módulo, es decir, ProductListComponent y ProductDetailComponent.
Además, hemos importado el módulo CommonModule de Angular en el array imports. Este módulo proporciona funcionalidades comunes utilizadas en aplicaciones web.

Al declarar los componentes en el módulo, los hacemos disponibles para su uso en cualquier componente o módulo que importe ProductModule. Esto facilita la organización y modularidad de la aplicación, ya que puedes agrupar componentes relacionados en módulos específicos.

Este capítulo te proporciona una base sólida para comprender los conceptos básicos de Angular, configurar tu entorno de desarrollo y comenzar a trabajar en tu primera aplicación Angular. A medida que avances en el desarrollo de la aplicación de comercio electrónico, estos conceptos se irán expandiendo y aplicando en situaciones del mundo real.

Te puede interesar

Deja un comentario Cancelar respuesta