La base de una aplicación real

En la sección Introducción a Angular 5 hemos visto las herramientas que necesitamos para trabajar con Angular. El entorno de desarrollo que aprendimos a crear en los dos primeros artículos será siempre el mismo, para cualquier aplicación Angular y, como ya lo tenemos instalado, ya no tenemos que preocuparnos de ese punto.

Sin embargo, en el resto de los artículos hemos estado viendo la estructura de una aplicación creada con el flag --minimal true. Esto nos ha venido bien para obtener una visión general pero, a la hora de trabajar, nos limita mucho. En lo sucesivo no volveremos a usarlo. Recuerda que este flag nos impone algunas limitaciones que, de aquí en adelante, no nos vamos a permitir, como se menciona en este artículo.

A partir de aquí, empezaremos a crear la estructura base de una apicación real, y le iremos añadiendo elementos, para ir aprendiendo nuevos conceptos.

CREANDO LA BASE

Una vez más, nos situaremos en la raíz de nuestra carpeta localhost. En mi caso, como estoy usando xampp, es c:/xampp/htdocs. Si tu estás usando otra herramienta para tener tu entorno de desarrollo, la ruta podría ser diferente. Como ya tenemos instalado el Angular CLI, simplemente crearemos un proyecto nuevo, aunque, en esta ocasión, sin minimalismos:

ng new angular01 -p a01 --routing true

Tras un lapso de tiempo, que puede ir de unos segundos a un par de minutos, poco más o menos (dependiendo de tu conexión y la velocidad de tu equipo), se habrá creado un directorio llamado angular01 (que es el nombre que le hemos dado a esta aplicación) y, en su interior, la estructura de archivos. Abre tu VSC (si es el editor que estás usando) y selecciona el menú Archivo, opción Abrir carpeta. Abre el directorio de este proyecto, para ver la estructura jerárquica de los archivos en el interior.

Lo primero que vamos a hacer (y esto nos viene bien para repasar algún concepto), es una pequeña modificación en el fichero package.json. En concreto, vamos a la siguiente línea:

"start": "ng serve",

y la modificamos así:

"start": "ng serve --aot -o",

Como ya sabemos, con esto establecemos la compilación Ahead of Time a la hora de ejecutar la aplicación, y hacemos que, al poner en marcha el servidor, el webpack de Angular 5 ponga en marcha el navegadodr predeterminado y cargue la aplicación automáticamente.

EL WEBPACK. El webpack es una herramienta que forma parte del CLI de Angular 5. Es un «constructor de bundles», es decir, el encargado de colocar el JavaScript generado durante la transpilación en los archivos JavaScript correspondientes. Así, por ejemplo, el JavaScript, digámoslo así, propio de Angular, se colocará en los archivos inline.bundle.js, polyfills.bundle.js, styles.bundle.js y vendor.bundle.js, mientras que el JavaScript que provenga de nuestro desarrollo se colocará en main.bundle.js. Debes recordar que, durante el desarrollo, estos archivos no existen en la carpeta de tu proyecto, sino que son generados por el webpack y viven, únicamente, en el entorno del navegador. Cuando hablemos de despliegue para producción, las cosas cambiarán un poco, pero los fundamentos son los mismos.

LA ESTRUCTURA DE ARCHIVOS

La estructura de los archivos del proyecto es, en líneas generales, la misma que ya conocemos. Sin embargo, como ahora no hemos usado el flag que crea una aplicación minimalista, en algunos puntos hay ciertas novedades específicas, que debemos conocer. En concreto, vamos a desplegar, en la parte izquierda de VSC, el directorio src y, dentro de este, el directorio app. Como ya sabes, en este directorio tenemos el AppModule, que es el módulo principal de nuestra aplicación. Dentro de este directorio encontramos los siguientes archivos:

  • app-routing.module.ts. Este archivo ya existía en la vertsión minimalista. Se usará para programar los enrutamientos cuando creemos otros módulos y componentes y haya que usar enlaces.
  • app.component.css. Este archivo es nuevo. En los proyectos creados de forma minimalista los CSS se integran en las templates TypeScript que contienen el código HTML, lo que, desde cualquier punto de vista, no es una buena práctica. Este archivo nos permitirá colocar aquí nuestros CSS.
  • app.component.html. Aquí encontramos otro archivo que no teníamos en el proyecto minimalista de la introducción. En lugar de integrar el HTML como una plantilla de TypeScript, ahora va en un archivo propio.
  • app.component.spec.ts. Aquí tenemos otro archivo nuevo, que se usará, llegado el momento, para los test unitarios y de integración.
  • app.component.ts. Este archivo ya existía en los proyectos minimalistas. Sin embargo, ahora ha cambiado un poco. Como el HTML del componente ya lo tenemos en un archivo específico, en el decorador lo que aparece es una propiedad, llamada templateURL, que referencia a dicho archivo. Así mismo, tenemos una propiedad llamada styleUrls, que apunta a una matriz con los nombres de los archivos de estilo. Por defecto, sólo hay uno (app.component.css) que, además, de momento está sin contenido alguno.
  • app.module.ts. Define la envoltura del módulo AppModule. Este archivo ya existía en la versión minimalista, y su código es el mismo.

El resto del proyecto, por lo demás, se mantiene igual, por lo menos, en lo que a nosotros respecta por ahora. Es cierto (y vamos a comentarlo de pasada) que en la raíz del sitio hay una carpeta llamada e2e, que en el minimalista no existía, y algunas otras diferencias «menores». Sin embargo, por ahora, no nos preocuparemos de eso.

CONCLUYENDO

Ya tenemos la base de un proyecto Angular 5 completo, sobre el que podamos empezar a trabajar. En el próximo artículo empezaremos a hacer cosas interesantes para ir viendo la funcionalidad de este framework.

   

Deja un comentario