Webipedia HD Iniciamos con este artículo un apasionante recorrido por los entresijos de Angular, uno de los frameworks de desarrollo web más populares hoy en día. Empezaremos por el principio, describiendo qué es Angular y para qué sirve, aunque sin meternos en demasiado detalle, dado que el objetivo de este curso es más bien práctico. ¡Vamos a ello!
Tabla de contenidos
Qué es Angular y para qué sirve
Angular es un Framework de JavaScript de código abierto para desarrollo web y móvil completo, escrito en TypeScript (superconjunto de JavaScript, con algunas sintaxis exclusivas de Angular) y cuyo objetivo principal es desarrollar aplicaciones de una sola página (SPA’s).
Su arquitectura está basada en componentes reutilizables, con soporte incorporado para Ajax y HTTP, siendo muy eficaz en el desarrollo de aplicaciones multiplataforma. Además, cuenta con el soporte de Google, con grandes y prósperas comunidades de desarrolladores con muchos usuarios activos.
Tu primera Aplicación con Angular
A la hora de crear tu primera aplicación con Angular, lo primero que debes tener disponible es tu entorno de desarrollo, con el software necesario para editar el código y arrancar/parar tu aplicación. A partir de ahí, veremos cómo crear la típica aplicación «HolaMundo», que simplemente mostrará un mensaje por pantalla. Veámoslo paso a paso.
Paso 1: Descargar e instalar IDE
Si aún no tienes instalado tu IDE favorito, el primer paso consistiría obviamente en descargarlo e instalarlo. Si no lo tienes claro, recomendamos Visual Studio Code, descargando la última versión disponible de «https://code.visualstudio.com/« (en nuestro caso, descargaremos la versión 1.79.2 para Windows x64).
Paso 2: Instalar entorno de ejecución Javascript
Para poder «rular» aplicaciones Angular, es necesario tener disponible un entorno de ejecución de Javascript. Para ello, instalaremos la última versión estable de Node JS disponible en «https://nodejs.org/», que a día de escribir estas líneas es la 18.16.1 LTS.
Como vemos, aparece también (a la derecha de la pantalla) la última versión disponible, que incluye las últimas características, pero nuestra recomendación sería utilizar la versión más estable para evitar problemas no identificados todavía con la última (pero tú mismo/a).
Paso 3: Instalar Angular
¡Ya queda menos! Nos vamos al directorio de nuestro ordenador donde vayamos a trabajar y utilizamos NPM (Node Package Manager) para instalar Angular.
| npm install -g @angular/cli |
En este punto, puede que te salte un error «No se puede cargar el archivo XXX porque la ejecución de scripts está deshabilitada en este sistema». De ser así, no te preocupes, porque la solución es bastante sencilla. En primer lugar ábrete el PowerShell de Windows como administrador.
Si ejecutas el comando «Get-ExecutionPolicy -List» verás que aparece todo como «Undefined». Es decir, el sistema nos muestra que la política de ejecución no está definida.
Para corregir esto, ejecutaremos el siguiente comando:
| Set-ExecutionPolicy RemoteSigned -Scope CurrentUser |
Tecleamos «S» para confirmar la acción y pulsamos Intro. Si ahora ejecutamos de nuevo «Get-ExecutionPolicy -List» veremos que los permisos han cambiado, y que para el usuario actual la política de ejecución tiene ahora el valor «RemoteSigned».
Si ahora volvemos a ejecutar el «npm install» anterior, veremos que ya no hay problemas.
Paso 4: Crear el proyecto
Ya tenemos instalado y configurado todo el software necesario para crear nuestra primera aplicación en Angular. Nos situamos entonces en el directorio donde vayamos a trabajar y crear nuestro proyectos, y ejecutamos el siguiente comando (también lo podemos hacer desde la opción «Terminal > New Terminal» de Visual Studio Code).
| ng new HolaMundo |
Indicamos las siguientes opciones:
- Would you like to add Angular routing? (y/N) y
- Which stylesheet format would you like to use? (Use arrow keys) > CSS
El sistema tardará un rato en crear todos los recursos necesarios e instalar todo los paquetes a través de npm, pero al final debería aparecer en pantalla algo parecido a lo que mostramos en la siguiente imagen.
Tal y como vemos, mi ejecución ha dado un error por no tener instalado Git en mi máquina, aunque ello no ha evitado que se haya creado correctamente la aplicación Angular. De hecho, si desde Visual Studio Code abrimos la carpeta «HolaMundo» generada, veremos todo lo que se ha creado automáticamente.
Aunque iremos familiarizándonos con ellos conforme vayamos avanzando en el curso, por ahora me gustaría destacar los siguientes elementos generados:
- Carpeta «node_modules»: es la carpeta que contiene todas las dependencias de nuestro proyecto.
- Carpeta «src»: es el directorio donde trabajaremos nuestros módulos, siendo además el más importante (ya que contiene todo el código). Dentro, podemos encontrar las carpetas «app» (permite ubicar toda la implementación de los componentes principales, junto a su template HTML y archivos de estilos CSS) y «assets» (contendrá todos los assets y archivos adicionales para hacer que el proyecto funcione). También encontramos los archivos «favicon.ico» (archivo del icono del proyecto), «index.html» (archivo de la página principal del proyecto) y «main.ts» (archivo Type Script inicial del proyecto, donde podrás configurar todas las configuraciones globales del proyecto).
- Archivo «.editorconfig»: configuración de nuestro editor de código.
- Archivo «.gitignore»: carpetas o archivos que debe ignorar el git cuando lo añadamos al repositorio (en nuestro caso, recordemos que todavía no tenemos instalado git).
- Archivo «angular.json»: contiene la configuración de Angular, incluyendo rutas, versiones, etc.
- Archivo «package.json»: configuración de nuestra aplicación, con su nombre y las dependencias necesarias para su correcta ejecución (entre otras muchas cosas).
- Archivo «README.md»: aquí podemos añadir información sobre la aplicación. Este archivo es leído por GIT y lo muestra en el repositorio.
- Archivo «tsconfig.json»: contiene la configuración TypeScript.
Paso 5: Ejecutar la aplicación
¡Y llegamos al momento que, seguramente, más estabas esperando! ¿Te gustaría ver la aplicación funcionando? Para ello, simplemente debes situarte dentro del directorio «HolaMundo» creado (es decir, donde se encontraban todos los elementos indicados en el apartado anterior) y ejecutar el siguiente comando:
| ng serve –open |
Aunque en realidad no es necesario, si especificas la opción «–open» se abrirá automáticamente la app en tu navegador en la dirección «http://localhost:4200». Por defecto, Angular crea una serie de contenidos que se muestran de inicio, y que tienen el aspecto mostrado en la siguiente imagen.
Paso 6: Editar la aplicación
Vamos a simplificar el contenido creado por Angular para ir poquito a poquito añadiendo cosas por nosotros mismos y, de esta forma, aprender mejor cómo funciona. En primer lugar, vaciaremos completamente el archivo «src > app > app.component.html», que corresponde a lo que se muestra por defecto al arrancar la aplicación. Hecho lo cual, pondremos simplemente una línea con el texto «Texto de prueba» (o el que consideremos), y veremos que la página de nuestro navegador se actualizará automáticamente para mostrar únicamente dicho texto (no olvides darle a «guardar»).
Ten en cuenta que se trata de un archivo HTML y que, por tanto, podríamos meter cabeceras (h1, h2, etc.), párrafos, textos en negrita y, en general, cualquier código HTML, pero de momento (más adelante en este curso profundizaremos más) el objetivo es que veas que la aplicación está funcionando correctamente y que se actualiza de forma automática al editar el archivo indicado desde nuestro IDE.
Si analizamos otros ficheros que se encuentran en el directorio «app», vemos que, entre otros, se encuentran el archivo «app.component.css» (relativo a la hoja de estilos, y que veremos más adelante) y el archivo «app.component.ts» (código TypeScript del componente principal de la aplicación). Al entrar en este último, vemos que contiene lo siguiente:
|
import { Component } from ‘@angular/core’;
@Component({
selector: ‘app-root’,
templateUrl: ‘./app.component.html’,
styleUrls: [‘./app.component.css’]
})
export class AppComponent {
title = ‘HolaMundo’;
}
|
Dentro de la clase «AppComponent» hay definida una variable «title» con el valor «HolaMundo», pero en realidad no se está utilizando dentro de nuestra aplicación, ya que estamos poniendo un texto fijo en nuestro archivo «app.component.html». Aunque podríamos utilizar la misma, para que quede más claro a efectos didácticos, vamos a crear otra variable diferente llamada «text», que va a contener el mismo valor (es decir, «HolaMundo»).
|
import { Component } from ‘@angular/core’;
@Component({
selector: ‘app-root’,
templateUrl: ‘./app.component.html’,
styleUrls: [‘./app.component.css’]
})
export class AppComponent {
title = ‘HolaMundo’;
text = ‘HolaMundo’;
}
|
Ahora, editaremos nuestro archivo «app.component.html» para que coja el valor indicado en la variable anterior (en lugar del texto fijo «Texto de prueba»). Para ello, simplemente pondríamos lo siguiente en «app.component.html»:
|
{{text}}
|
¡Y ya estaría! Si vamos ahora a nuestro navegador, veremos que el texto que aparece es, efectivamente, «HolaMundo». Además, cualquier cambio que realicemos en el archivo «app.component.ts» respecto al valor de dicha variable, veremos que automáticamente aparecería reflejado en el navegador.
Importante saber que Angular nos irá avisando sobre cualquier error de compilación que cometamos en el código. Por ejemplo, si en nuestro archivo HTML tuviéramos indicada una variable inexistente «text2» (en lugar de la variable «text», que es la que creamos anteriormente en el archivo TS), nuestro navegador mostraría el siguiente error:
Paso 7: Compilar la aplicación
Hasta ahora, hemos conseguido arrancar nuestra aplicación en nuestra máquina local, pero el objetivo final debería ser «exportarla» a un servidor web, donde poder ponerla online a disposición de otras personas. Para ello, hemos de proceder a su compilación con el siguiente comando:
| ng build –configuration production |
Esto generará en el directorio «dist» los archivos HTML, CSS y JS necesarios para exportar la aplicación, mostrando por pantalla una salida similar a la siguiente:
Como decíamos, los archivos generados serán volcados a una carpeta «dist» situado dentro de nuestro proyecto Angular. En nuestro caso, dentro de «dist» se ha generado una subcarpeta «hola-mundo» con el siguiente contenido:
Estos archivos serían los que tendrías que «volcar» en el directorio «public_html» de tu dominio para poder hacer tu aplicación Angular visible online. Aquí hay que tener en cuenta que, si no la publicas en el raíz de tu dominio, entonces deberás indicar explícitamente el subdirectorio cuando compiles el proyecto, ya que de lo contrario es muy posible que encuentres con errores del tipo «Failed to load module script». Por ejemplo, si nuestro dominio es «www.midominio.com», y queremos ver nuestra aplicación en «www.midominio.com/test», en vez del comando anterior tendríamos que ejecutar:
| ng build –configuration production –base-href /test/ |
En mi caso, ejecuté «ng build –configuration production –base-href /aplicaciones/angular/hola-mundo/» para poner disponible la aplicación en «https://webipedia.es/aplicaciones/angular/hola-mundo/».
Por otro lado, hemos de tener en cuenta las siguientes apreciaciones:
- Poner «/» al principio y al final de la ruta.
- Si intentamos abrir el «index.html» generado en un navegador en local, no va a funcionar porque es necesario poner la aplicación en un apache o similar.
- La ruta debe colgar del directorio «public_html» de nuestro servidor, pero mucho cuidado con crear directorios que coincidan con páginas de nuestra página web, ya que si coinciden dejarán de funcionar las páginas. Por ejemplo, inicialmente puse mi aplicación en «https://webipedia.es/tecnologia/cursos/angular/hola-mundo». Pues bien, el efecto de esto es que dejaron de funcionar las páginas «https://webipedia.es/tecnologia» y «https://webipedia.es/tecnologia/cursos», y es por ello que decidí crearlo todo a partir de una carpeta «aplicaciones».
Paso 8: Ver la aplicación funcionando
Tal y como ya indiqué en el apartado anterior, puedes ver la aplicación funcionando y mostrando un mensaje «Hola mundo.» en la siguiente URL:
