Aplicación en Angular – Inicializando aplicación

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

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.log(err));

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:

platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.log(err));

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:

import { AppModule } from './app/app.module';

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

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

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:

export class AppModule { }

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:

export class miMaravillosaClase  { }

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.

import { AppComponent } from './app.component';

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

src/app/app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'Cliente de Aplicacion de prueba';
}

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.

¿ JavaScript ?. Sí, porque aunque en angular nosotros usamos TypeScript,  a  la hora de compilar el programa, ese código se  convertirá  en JavaScript, que es el lenguaje que entienden los navegadores (Chrome, Firefox, Opera, IE, etc).

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

<!doctype html>
<html lang="en">
<head>
   
  <meta charset="utf-8">
  <title>Yagesclient</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>

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

<app-root></app-root>. ¿ 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 <app-root> 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

Esto es el titulo {{ title }}

El código  <app-root></app-root> del fichero index.html sera sustituido por:

Esto es el titulo Cliente de Aplicacion de prueba

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.

 

1 comentario en “Aplicación en Angular – Inicializando aplicación”

Deja un comentario