Angular - Inicializando

Continuando con la entrada donde instalaba Angular, seguimos desarrollando la aplicación que detallo en esta página.

Una vez tenemos creado el esqueleto de nuestro programa, con el comando “**ng new” , ** entraremos al directorio **src. **En este directorio es donde realmente vamos a trabajar.

Los demás directorios son donde están las librerías y utilidades que nuestra aplicación usara pero que son propias de Angular y nosotros no las tocaremos (al menos en este ejemplo).

Primero vamos a explicar los pasos que sigue Angular para ejecutar nuestra recién creada aplicación.

Cuando ejecutamos el comando “ng serve –open” desde nuestro directorio yagesclient,Angular, una vez que ha compilado, comprobado dependencias y otra serie de tareas, en las que no voy a entrar, lee el fichero src/main.ts, el cual detallo a continuación.

src/main.ts

En este fichero se importan (import)  es decir, se cargan  una serie de ficheros para después arrancar nuestra aplicación. con la ultima linea:

Como se puede intuir este comando ejecuta una función, a la que se le pasa el parámetro AppModule. No voy a entrar a explicar los detalles , pues se escapa al ámbito de este curso, lo que voy a  explicar es donde definimos ese parámetro AppModule .

La clave esta en la linea:

Ahí importamos ese parámetro, especificando  que lo debe cargar del fichero “./app/app.module.ts”. La extensión ts  (TypeScript) la pone Angular pues busca un fichero de ese tipo, pero nosotros no debemos ponerlo.

En este  fichero están definidos los   módulos de nuestra aplicación.

El contenido del fichero es el siguiente:

src/app/app.module.ts

Este fichero define un modulo, porque así se lo especificamos a Angular  con la etiqueta @NgModule. El modulo se llamara AppModule, que no deja de ser una clase u objeto, que exportamos a la vez que creamos,  con la sentencia:

Esta clase **AppModule **es el objeto que importábamos en nuestro anterior fichero con la linea import { AppModule } from ‘./app/app.module’ 

El nombre de la clase podría haber sido perfectamente **miMaravillosaClase  **con lo cual habríamos puesto:

Y en el import seria **import { miMaravillosaClase  } from ‘./app/app.module’

**

Lo que quiero resaltar es que el nombre de la clase **no **debe coincidir con el del fichero ni tiene porque acabar en Module, sin embargo, por claridad en el código y buenas practicas los módulos siempre se terminan con Module y coincide el nombre del modulo con la del fichero.

Volviendo al fichero /app/app.module.ts, centrémonos en el siguiente  import.

Donde importamos el componente **AppComponent . **Este _componente esta definido en el fichero _‘./app.component.ts’

src/app/app.component.ts

Aquí definimos un componente (obsérvese la etiqueta **@Component) **que sera una clase llamada AppComponent anteriormente importada.

Con la etiqueta selector indicamos como llamaremos a este componente en nuestros fichero HTML (en la parte de la vista, vamos). Es decir, se llamara app-root.

Con templateUrl indicaremos el fichero html a cargar cuando pongamos la etiqueta  app-root en algun otro fichero html que Angular ya haya cargado (index.html en nuestro ejemplo). Con styleUrls indicaremos la hoja de estilo a cargar para el anterior fichero html.

Un componente en angular no es sino una objeto que nosotros definimos. Ese objeto tendrá un código HTML, su hoja de estilos (CSS) y por supuesto JavaScript.

Nuestra aplicación, como vemos,  ya tiene su primer _componente _creado, el objeto AppComponent, y este componente es usado por el fichero index.html, del cual enseñamos una versión simplificada a continuación.

/src/index.html

Como se puede ver es un fichero HTML casi normal. Lo único que nos debe llamar la atención es  la etiqueta:

. ¿ Os suenan ?. Exacto, son las que hemos definido con el parámetro selector: ‘app-root’.

Resumiendo, cuando Angular ejecute nuestra aplicación cargara el fichero index.html y cuando encuentre las etiqueta sabrá que debe incluir el componente definido en el fichero src/app/app.component.ts.

Lo que incrustara sera el contenido del fichero html definido en la anteriormente citada etiqueta templateUrl, ademas de instanciar (crear) el objeto AppComponent.

Sin entrar en detalles, para ver la relación entre la clase y el fichero HTML, o dicho de otra manera, la relación vista / controlador, obsérvese que dentro de la clase AppComponent se crea la variable  title asignándole  el valor ”Cliente de Aplicacion de prueba‘. Como en el fichero src/app.component.html tenemos solo la siguiente linea

El código  del fichero index.html sera sustituido por:

Y con esto termino esta entrada, en la próxima hablare de las rutas. Espero haberme explicado bien. En caso contrario no dudéis en realizar todas las preguntas necesarias.