Desarrollador framework Angular 6: Inicio

El desarrollo de aplicaciones utilizando JavaScript es un proceso que, a menudo, puede resultar complejo debido a la naturaleza intrincada de su código fuente. Esta complejidad se manifiesta en su uso para una amplia variedad de funciones críticas, que van desde la manipulación de la interfaz del usuario hasta la conexión con servidores y la validación de datos.

Con frecuencia, los desarrolladores se encuentran creando códigos tan complicados que resultan difíciles de entender para otros, lo que puede obstaculizar la colaboración y el mantenimiento de las aplicaciones a largo plazo.

En este contexto, la llegada de frameworks de JavaScript, como jQuery, marcó un avance importante en la simplificación del desarrollo. Estos frameworks permiten reducir la cantidad de código necesario para ejecutar tareas comunes, optimizando así el flujo de trabajo de los desarrolladores.

Sin embargo, a pesar de las ventajas que ofrecen, es común que aún generemos una cantidad significativa de código si deseamos aprovechar al máximo las capacidades interactivas de JavaScript. Esto es especialmente relevante cuando buscamos interactuar con elementos del navegador sin realizar constantes llamadas al servidor o recargar la página, lo que podría impactar negativamente en la experiencia del usuario.

Para gestionar la complejidad que puede surgir al desarrollar aplicaciones más sofisticadas, han aparecido frameworks como Angular, específicamente en su versión 6, que se basa en principios clásicos de diseño en el desarrollo web, tales como el modelo-vista-controlador (MVC).

Este enfoque no solo facilita la organización del código, sino que también promueve la reutilización de componentes, permitiendo a los desarrolladores crear aplicaciones más eficientes y mantenibles.

Es fundamental destacar que Angular no se limita únicamente a la creación de aplicaciones web. Su versatilidad permite desarrollar aplicaciones móviles para plataformas como Android e iPhone, así como aplicaciones de escritorio, ampliando así el alcance del desarrollo y permitiendo a los desarrolladores aplicar su experiencia en diversas plataformas y dispositivos.

Componentes de Angular 6

Un aspecto clave al utilizar Angular es la concepción de las aplicaciones web como un conjunto de componentes independientes. Cada componente puede considerarse como un pequeño fragmento de código que opera de manera autónoma dentro de la aplicación global.

Esta modularidad facilita la gestión y modificación de la aplicación, ya que se pueden realizar cambios en componentes específicos sin afectar al resto de la estructura.

En cuanto a los componentes en Angular, podemos identificar cuatro etapas fundamentales:

1. Componentes personalizados: Permiten crear etiquetas DOM personalizadas. Si bien las etiquetas base provienen de HTML, Angular permite definir etiquetas únicas como <imacresteHeader>, que se integran en la aplicación. Este es el primer paso para dividir la aplicación en componentes más pequeños y manejables.
2. Shadow DOM: Proporciona un espacio aislado para scripts y estilos, separando los componentes entre sí y del contexto global de la página. Esto significa que los estilos aplicados a un componente no afectarán a otros, asegurando una mayor cohesión y evitando conflictos de diseño.
3. Templates: Son las plantillas de HTML y CSS que pertenecen a cada componente. Estas plantillas permiten estructurar la presentación de los componentes de manera organizada y clara.
4. Importación de HTML: Angular permite cargar paquetes de scripts, CSS y HTML de forma sencilla, lo que facilita la integración de bibliotecas y recursos externos.

Como instalar Angular 6

Ahora bien, para instalar Angular en nuestro ordenador, comenzaremos por instalar Node.js, una plataforma fundamental para el desarrollo en JavaScript. Para ello, simplemente debemos acceder a su página oficial en https://nodejs.org/en/ y proceder a descargar e instalar el software.

Una vez que Node.js esté instalado, abrimos la consola de desarrollo, conocida como NODE.js COMMAND PROMPT, y ejecutamos el siguiente comando para instalar Angular CLI:

npm install -g @angular/cli

Una vez completada la instalación, estaremos listos para comenzar a crear nuestra primera aplicación o proyecto con Angular 6. Para ello, posicionamos la consola en la carpeta donde deseamos ubicar nuestro proyecto y lo creamos con el siguiente comando:

ng new my-primera-app

Este paso puede tomar un momento, pero una vez que se haya completado, ingresamos en la carpeta recién creada con:

cd my-primera-app

Finalmente, ejecutamos el siguiente comando para iniciar el servidor de desarrollo y abrir la aplicación en nuestro navegador:

ng serve --open

Si omitimos el parámetro –open, podemos acceder a la aplicación escribiendo en la URL http://localhost:4200/.

Instalando Bootstrap 5

A continuación, exploraremos cómo instalar Bootstrap 5, un framework de CSS que, aunque no forma parte de Angular, podemos integrar fácilmente para beneficiarnos de sus útiles componentes HTML.

Primero, debemos cerrar el servidor presionando CONTROL+C en la consola. Cuando se nos pregunte si deseamos cerrar el navegador, confirmamos presionando S y Enter.

Dentro de nuestro proyecto, instalamos Bootstrap con el siguiente comando:

npm install bootstrap --save

Una vez que la instalación se haya completado, abrimos la carpeta de nuestro proyecto y localizamos el archivo angular.json. Dentro de este archivo, navegamos a projects -> architect -> build -> styles y agregamos una línea justo encima de «src/styles.css» que apunte a Bootstrap:

"node_modules/bootstrap/dist/css/bootstrap.min.css"

De este modo, el bloque «styles» quedará de la siguiente manera:

"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.css"
],

Con esta simple modificación, podremos utilizar Bootstrap dentro de nuestro proyecto Angular.

Al revisar el código fuente de la carpeta de nuestro proyecto recién creado, notamos que se generan numerosas carpetas y archivos que forman parte de la estructura de la aplicación. Para entender mejor cómo se relaciona la interfaz visual con el código, examinaremos el archivo index.html ubicado en la carpeta src. Este archivo se verá similar a:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>AppPrueba</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>

Un aspecto interesante de este archivo es la presencia de la etiqueta personalizada <app-root>, que es la encargada de mostrar el contenido de nuestra aplicación. Esto significa que, en este ejemplo, estamos trabajando con un único componente que actúa como la raíz de la estructura de la aplicación.

Entendiendo Angular6

Pero, ¿dónde se encuentra realmente el contenido que vemos en pantalla? Para averiguarlo, navegamos a la carpeta src -> app y abrimos el archivo app.component.ts. Este archivo contendrá un código que podría parecerse a esto:

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

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

Aquí, podemos observar que se ha definido el selector app-root, que es nuestra etiqueta personalizada. Además, esta etiqueta carga el contenido del archivo templateUrl, que apunta a app.component.html, así como los estilos que se encuentran en styleUrls, que hace referencia a app.component.css.

El contenido de app.component.html podría ser algo como esto:

<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,
PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53
My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9
IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRo
IGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUg
MzBMMzEuOSA2My4ybDE0LjIgMTIzLjFM
MTI1IDIzMGw3OC45LTQzLjcgMTQuMi0x
MjMuMXoiIC8+CiAgICA8cGF0aCBmaWxs
PSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIy
LjItLjFWMjMwbDc4LjktNDMuNyAxNC4y
LTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8
cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0i
TTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEu
N2wxMS43LTI5LjJoNDkuNGwxMS43IDI5
LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4z
aC0zNGwxNy00MC45IDE3IDQwLjl6IiAv
PgogIDwvc3ZnPg==">
</div>
<h2>Here are some links to help you start: </h2>
<ul>
  <li>
    <h2><a target="_blank" rel="noopener" 
href="https://angular.io/
tutorial">Tour of Heroes</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" 
href="https://github.com/
angular/angular-cli/wiki">CLI Documentation</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" 
href="https://blog.angular.io/
">Angular blog</a></h2>
  </li>
</ul>

A pesar de ser un ejemplo simple, es revelador para comprender cómo se interconectan la aplicación y sus diversos componentes. Por ejemplo, la variable title está vinculada a la parte visual.

Si el servidor está en funcionamiento y decidimos modificar el valor de title en app.component.ts, cambiándolo a «HOLA MUNDO», podemos observar cómo el encabezado se actualiza en tiempo real, mostrando «Welcome to HOLA MUNDO!» en la interfaz. Esto demuestra la naturaleza reactiva de Angular y su capacidad para reflejar cambios en el estado de la aplicación de inmediato.

Preguntas frecuentes

¿Qué es Angular 6?

Angular 6 es una versión del popular framework de desarrollo web Angular, que permite a los desarrolladores crear aplicaciones web dinámicas y escalables utilizando TypeScript.

¿Cuáles son las principales características de Angular 6?

Angular 6 incluye características como el Angular CLI mejorado, soporte para lazy loading, herramientas de análisis de rendimiento y mejoras en la API de Angular Material.

¿Es necesario conocer TypeScript para trabajar con Angular 6?

Aunque no es estrictamente necesario, tener conocimientos de TypeScript es altamente recomendable, ya que Angular está basado en este lenguaje y ofrece ventajas como la tipificación estática.

¿Qué tipo de aplicaciones se pueden desarrollar con Angular 6?

Angular 6 es ideal para desarrollar aplicaciones web de una sola página (SPA), aplicaciones empresariales, plataformas de comercio electrónico, y más.

¿Dónde puedo encontrar recursos para aprender Angular 6?

Existen numerosos recursos en línea, incluyendo la documentación oficial de Angular, tutoriales en YouTube, y cursos en plataformas de aprendizaje como Udemy y Coursera.

¿Cómo se compara Angular 6 con otros frameworks como React o Vue?

Angular 6 es un framework completo que ofrece una solución integral para el desarrollo, mientras que React y Vue son bibliotecas más ligeras que se centran en la interfaz de usuario. La elección depende de las necesidades específicas del proyecto.

Conclusión

En resumen, Angular 6 es un potente framework que proporciona a los desarrolladores las herramientas necesarias para construir aplicaciones web modernas y escalables. Con su enfoque en el rendimiento, la modularidad y la facilidad de uso, Angular 6 se posiciona como una excelente opción para quienes buscan crear aplicaciones ricas en funcionalidades.

Aprender Angular 6 puede abrir muchas puertas en el desarrollo web, y con los recursos adecuados, cualquier persona puede comenzar su camino en este emocionante mundo. ¡No dudes en explorar más y poner en práctica tus conocimientos!