Primeros pasos en Angular 5 (I)

En este artículo vamos a empezar a trabajr con Angular 5. Lo que vamos a hacer es crear un proyecto nuevo, y analizar la estructura de archivos y el funcionamiento básico de Angular, así como algunas de sus prestaciones.

Un proyecto en Angular 5 se crea a partir de una estructura de archivos que son gestionados por el Angular CLI, que ya debemos tener instalado en nuestro ordenador. A partir esos archivos, iremos introduciendo nuestro código, y probando y depurando el proyecto en modo de desarrollo. Con Angular se trabaja en tres modos fundamentales:

  • Desarrollo. Es el modo de trabajo en el que creamos las páginas y contenidos de nuestro proyecto.
  • Test. Es un modo específico para realizar test unitarios y de integración. No lo usaremos en los primeros artículos, sino más adelante.
  • Producción. Es cuando le pedimos a Angular que, a partir de nuestro código creado en desarrollo, genere las páginas que subiremos al servidor, para poner a disposición de los usuarios del proyecto.

CREANDO NUESTRO PRIMER PROYECTO

Lo primero que vamos a hacer es situarnos en el directorio raíz de nustros desarrollos web, es decir, el que se corresponde con localhost. Si estás trabajando con Windows y has instalado xampp, como te comenté en el primer artículo de esta serie, será c:/xampp/htdocs. En otro caso, se llamará de otro modo. Sea como sea, nos situamos en la terminal del sistema operativo, en el directorio correspondiente a localhost, y tecleamos, en la consola, lo siguiente:

ng new prueba-angular --prefix pr --minimal true --routing true

o, abreviadamente,

ng new prueba-angular -p pr -m true --routing true

Analicemos el comando parte a parte:

  • ng es el mandato de terminal para muchas operaciones en el entorno de Angular 5.
  • new prueba-angular le indica a ng que vamos a crear un proyecto nuevo, al que llamaremos prueba. El CLI (invocado por ng) se ocupará de crear un directorio llamado prueba-angular, y colocar, dentro de este, la estructura básica de archivos.
  • --prefix pr o su abreviación -p pr indica un prefijo que llevarán, como ya veremos, los nombres de distintos elementos de nuestro proyecto. Aunque este parámetro sea, técnicamente, opcional, en la práctica resulta imprescindible para ayudarnos a organizar nuestras etiquetas y otros elementos de nuestro trabajo. El prefijo lo elegimos nosotros, en base a las iniciales del proyecto, o las del cliente para el que estemos trabajando, etc, pero deberá de ser algo coherente, para que nos resulte familiar durante el desarrollo.
  • -- minimal true o, abreviadamente, -m true le indica al CLI que vamos a desarrollar un proyecto con las funcionalidades básicas de Angular. Por ejemplo, creando un proyecto así no tendremos disponibles los test unitarios o de integración. Cuando estemos más familiarizados con Angular, precindiremos de esta opción. Además, en un proyecto medianamente aspiracional y debidamente estructurado, el código HTML, el JavaScript y el CSS deben estar en archivos separados. Con esta opción, veremos que todos se incluyen en el mismo archivo, lo que puede estar muy bien para las pruebas iniciales, pero que no es buena práctica cuando estemos desarrollando «en serio».
  • -- routing true. Con esta opción le indicamos al CLI que vamos a usar el sistema de enrutamiento de Angular 5. Ya veremos qué es y como funciona.

Cuando tecleamos este comando, se crea un nuevo directorio llamado prueba-angular y, dentro de él, la estructura básica de un proyecto en Angular 5. El proceso puede llevar varios minutos, dependiendo de la velocidad de nuestra conexión, y de la potencia de nuestro equipo. Tras este lapso, y varios mensajes en pantalla, veremos que la terminal finaliza diciéndonos Project 'prueba-angular' successfully created. Ya tenemos la base del proyecto.

ATENCIÓN. Este es un resumen muy breve de las opciones de creación de un nuevo proyecto en Angular. En posteriores artículos entraremos más en detalle, y conoceremos otras opciones del comando ng new. Si quieres ver una lista de estas opciones, a título meramente de curiosidad, puedes entrar en https://github.com/angular/angular-cli/wiki/new.

LA ESTRUCTURA DE ARCHIVOS

Abre VSC y pulsa el menú Archivo y la opción Abrir Carpeta. En la ventana de diálogo que aparece, busca el directorio que se acaba de crear, prueba-angular, entra dentro de él y pulsa Seleccionar carpeta. Verás que en VSC, a la izquierda del área de trabajo, te aparece el árbol de directorios y ficheros de tu recién creado proyecto.

La carpeta node_modules no la vamos a tocar. Es donde npm instala todas las dependencias de Angular, y son archivos que nosotros necesitaremos llamar desde distintos puntos, pero, desde luego, en ningún modo manipular.

En la carpeta src se colocan los archivos base de nuestro proyecto. En ese directorio es donde colocaremos todo nuestro código Angular (HTML, TypeScript, CSS, etc). De su estructura hablaremos en el próximo artículo.

El fichero .angular-cli.json contiene la configuración del CLI para este proyecto. En su momento, tocaremos algunas cosas en él, pero, por ahora, lo consideraremos tabú (no se toca).

El archivo package.json ha sido creado por npm, para establecer las dependencias y algunos detalles del comportamiento de nuestro proyecto. Lo vamos a ver en detalle en este artículo.

El archivo tsconfig.json es la configuración de TypeScript. Ya comentamos los puntos más interesantes en este artículo. Los detalles de este archivo que no conocemos aún, de momento los dejamos como están.

EL ARCHIVO package.json

Este archivo ha sido generado, como decíamos, por npm. Contiene la lista de dependencias que necesita nuestro proyecto (y contendrá otras dependencias que instalemos a posteriori). Su listado, por defecto, es el siguiente:

En el primer apartado encontramos algunos metadatos, como el nombre del proyecto, o su versión. Son datos a efectos meramenrte documentativos, que podemos modificar libremente.

Bajo el apartado scripts encontramos algunos comandos de ng, que invocaremos desde npm. No vamos a entrar ahora en detalle de lo que son o lo que hacen. Eso será tema para otro artículo, cuando arranquemos, por primera vez, nuestro proyecto en modo de desarrollo. Algunos de estos comandos que aparecen los comentaremos aún más tarde.

En el apartado dependencies encontramos una referencia a todas las dependencias que se instalan por defecto cuando se crea un nuevo proyecto, y que deben estar disponibles tanto en modo de desarrollo como en producción. Distinguimos dos grandes grupos. Las dependencias propias de angular, que son aquellas cuyo nombre empieza por @. Las demás (en este caso core.js, rxjs y zone.js) son librerías de terceros que, por su naturaleza, se han convertido en parte imprescindible de cualquier proyecto Angular.

Por último, en el apartado devDependencies encontramso aquellas dependencias de librerías, tanto propias de Angular como de terceros que sólo son necesarias durante el desarrollo, y que no deben de estar disponibles cuando pasemos nuestro proyecto a producción. Un ejemplo claro es el uso de TypeScript ya que, como sabemos, se usa durante el desarrollo, pero luego el código se transpila a JavaScript, que es lo que realmente entiende el navegador.

CONCLUYENDO

En este artículo hemos aprendido a crear un nuevo proyecto Angular totalmente vacío. En el próximo artículo haremos una breve introducción «a vista de pájaro» por el directorio src, que es el que contiene todo el código base de nuestra aplicación, y donde alojaremos los ficheros que vayamos creando.

   

Deja un comentario