En el artículo anterior, de estructura de un proyecto de Angular ya vimos el esqueleto de un proyecto de Angular.

Pero cuando lleguemos al directorio SRC, lo vimos muy por encima y dijimos que por el momento no abríamos dicho melón ¡En la lección de hoy vamos a abrirlo!

Creando y arrancando un proyecto

Si creamos un proyecto con @angular/cli o utilizamos el que tenemos ya creado si habéis seguido los artículos anteriores:

Y lo abrimos y arrancamos con VSC:

Podemos ver la estructura que viene predefinida al creado un proyecto de Angular con @angular/cli:

El resto de los archivos a excepción de los que contiene la carpeta SRC como ya vimos son archivos de configuración.

Si desplegamos el directorio SRC, podremos ver su estructura:

Directorio src/assets

El directorio assets es el encargado de almacenar los elementos estáticos (que no cambian de la aplicación de Angular) como imágenes, pdfs, documentos de word, archivos mp3, etc.

Directorio src/enviroments

Nos pemite definir si estamos desplegando en entorno de producción o no.

Archivo test.js

Define la configuración que va a utilizar Karma (recordad que Angular por defecto trabaja con Jasmine para realizar los test). En este archivo se le define a Karma el entorno de prueba para Angular y cargar todos los archivos de especificaciones. y los resultados como ya vimos, serán mostrados por el navegador gracias a Karma.

Archivo polyfills.ts

Contiene algunos archivos para que nuestra aplicación sea compatible con algunos navegadores antiguos. El código que escribimos se transpila a ES6 y no a ES5 ya que ES6 que trae una serie de nuevas características que hacen que no sea compatible con algunas versiones de Internet Explorer o Firefox (con ES5 sí que serían compatibles).

Polyfills.ts por tanto, fue proporcionado por angular con la finalidad de evitar la necesidad de configurar todo específicamente. Y hacerlo una vez desde un solo fichero.

Archivos index.html, favicon.ico e style.css

Si vemos el archivo HTML index.html, podemos ver que nos encontramos solamente con la estructura inicial de documento HTML5. Y en la que, si nos fijamos, solamente nos puede extrañar ver una etiqueta llamada <app-root></app-root> dentro del body y una llamada a un fichero con extensión .ico el icono de la aplicación.

Si nos situamos en el icono, de hecho, podemos ver que es el de la aplicación:

Cuando anteriormente hemos arrancado y posteriormente cargado nuestra aplicación de Angular en nuestro navegador, hemos podido ver que por defecto viene una plantilla cargada.
De hecho, si nos metemos en el inspector del browser, podemos ver la etiqueta app-root (que acabamos de ver anteriormente en nuestro index.html) junto a un contenido en su interior:

Index.html, también tiene un CSS llamado style.css asociado al documento (aunque no está vinculado/llamado desde propio HTML). Además, podemos ver que se encuentra vacío:

Esto es debido a que lo asociamos al style.css desde el archivo angular.json. Vamos a verlo:

Si por ejemplo modificamos el color del background del body a red (rojo):

Podemos ver que se modifica el color de fondo de nuestra web:

Directorio src/app

Index.html es la página que contendrá los componentes que forman nuestra aplicación de Angular.

Pero en Angular una web está compuesta de componentes y si este documento no tenemos el componte que Angular trae por defecto donde lo tenemos ¿Dónde se encuentra este componente? la respuesta es dentro del directorio src/app

¿Qué es un componente de Angular?

Un componente es bloque de código re-utilizable, que consta principalmente de 3 archivos: una hoja de estilos (en nuestro caso CSS), un HTML que será la plantilla o también conocida como template del componente, y un TypeScript (que será transpilado a JavaScript).

En el proyecto que nos crea Angular, solo tenemos un componente, pero podríamos tener varios. Y por ejemplo realizar una página web con múltiples componentes, como pueden ser el componente Search y el list component y que ambos sean contenidos dentro del containet component.

Lo mejor de esto, es que cada uno de los componentes podría ser reutilizado en varios lugares sin problema.

Archivo src/app/app.component.html

Contiene el template en HTML del componente. Por defecto Angular nos mete dentro del template del componente HTML un contenido por defecto, una placeholder que podemos eliminar sin problema e introducir nuestro propio código.

Vamos a escribir Hola Mundo:

Archivo src/app/app.component.css

La hoja de estilos del componente (afectará solamente a nuestro componente). Puede estar en CSS, SCSS (Sass), etc. Dependiendo de la configuración que le hayamos dado a nuestro proyecto.

Como podemos observar, por defecto, este fichero está vacío, ya que era en el template inicial de nuestro proyecto Angular donde se encontraba todo código tanto del HTML como del CSS.

Lo recomendable es tenerlo separado y que cada capa haga su función el HTML contenga a la estructura y el CSS los estilos.

Vamos a añadirle un color al texto del H1 desde nuestro app.component.css:

Por lo que hemos comprobado que tenemos dos niveles de hojas de estilos, los del propio componente albergados dentro de la carpeta src/nombre del componente (en este caso app) y el del index.html que carga a dicho componente.

Archivo src/app/app.component.ts

  • Contiene la lógica del componente (el TypeScript) del componente

Si analizamos en detalle su estructura podemos ver que:

Como podemos ver el decorador donde definimos el selector nos permite bautizar a nuestro componente con un nombre. Este es el nombre que hemos añadido a nuestro index.html para que se cargue dentro de él.

Por tanto, el selector es el mecanismo con el que cargaremos nuestro componente dentro de nuestro index.html. La etiqueta <app-root></app-root> solamente es una etiqueta entendida por Angular y que inyectará el componente o los componentes necesarios de dentro de la carpeta src/app.

Archivo src/app/app.component.spec.ts

Hasta el momento ya hemos visto los archivos de configuración de Karma y de Jasmine. El archivo app.component.spec.ts contiene las pruebas unitarias escritas en Jasmine.

En el artículo que vimos la estructura de un proyecto de Angular si os acordáis, lancemos unos test de Jasmine que mostraban sus resultados en una pestaña gracias a Karma. Los test que ejecutábamos están escritos dentro de este fichero de app.component.spec.ts.

En el caso del artículo anterior, nos funcionaban los test debido a que teníamos los test realizados para la template que nos venía por defecto en Angular. Si los lanzamos ahora, podemos ver que nos falla uno:


Podemos hacer varias cosas o bien modificar el contenido para que se adapte al test y lo pase:

Si vamos a la ventana de los test, podemos ver que los 3 test de Jasmine ahora sí que son ejecutados correctamente:

O incluso eliminarlo, aunque en mi caso, solamente voy comentarlo:

También podriamos reescribir el test:

Archivos main.ts y src/app/app.module.ts:

Hasta ahora, hemos visto el cómo se cargan los componentes en index.html a través del nombre de su selector, en este caso la etiqueta <app-root></app-root> una etiqueta que solo es entendida por Angular y que despliega el componente de la carpeta src/app. Pero no hemos visto quienes son los encargados de arrancar nuestra aplicación cuando hacemos ng serve.

Si nos metemos en main.ts podemos ver:

platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.error(err));
Esto es nada más y nada menos que una promesa que arracará nuestra aplicación cuando realicemos un ng serve y llamará al componente AppModule que importa en la línea 4 (y, por tanto, acabará apuntando hacía src/app/app.module.ts)
platformBrowserDynamic es una función/promesa que se utiliza para iniciar una aplicación Angular. Y además de la llamada a la función, le tenemos que asignar un módulo principal (AppModule en nuestro caso) mediante al método bootstrapModule.

¿Qué es un modulo? Me ha gustado mucho esta imágen, un modulo es un conjunto de elementos (entre los que se incluyen los componentes) y que nos permite organizar el código de las aplicaciones en Angular.

Si nos fijamos en app.module.ts podemos ver que tenemos un decorador llamado @NgModule que carga nuestro único componente AppComponent. Si tuviéramos más componentes también serían cargados aquí.

Este módulo tiene dos imports:

BrowserModule: proporciona algunos servicios específicos de la plataforma del navegador. Solo debe importarse en AppModule.

NgModules: nos permite cargar el decorador @NgModule mediante al cual vamos a poder indicarle dentro de nuestro archivo app.module.ts una serie de metadatos que le proporcionaran a Angular información referente a como compilar y ejecutar el código de nuestro módulo.

El decorador @NgModule tiene varios apartados:

  1. declaraciones: esta propiedad informa sobre los componentes, directivas y pipes (funciones separadas) que pertenecen a este módulo.
  2. exportaciones: el subconjunto de declaraciones que deberían ser visibles y utilizables en las plantillas de componentes de otros NgModules. En este caso no tenemos ninguna.
  3. importaciones: Otros módulos cuyas clases exportadas son necesarias para las plantillas de componentes declaradas en este NgModule.
  4. proveedores: Creadores de servicios que este NgModule aporta a la colección global de servicios; se vuelven accesibles en todas las partes de la aplicación. (También puede especificar proveedores a nivel de componente, que a menudo se prefiere).
  5. bootstrap: indica cual es la vista principal de la aplicación, denominada componente raíz, que aloja todas las demás vistas de la aplicación. Solo el NgModule raíz debe establecer la propiedad bootstrap.

Bueno, este artículo acaba aquí, espero que os haya gustado y espero que ahora que ya hemos acabado de ver la estructura completa de un proyecto de Angular os haya quedado mucho más clara. ¡Un saludo y hasta la próxima!