Primeros pasos en Angular 5 (II)

En el articulo anterior vimos como se crea un nuevo proyecto Angular desde cero. Vimos que se genera una estructura de archivos de los que, según comentamos, toda la aplicación se desarrolla en el directorio src.

En este artículo empezaremos a ver parcialmente la estructura de ese directorio, y de algunos de sus archivos más relevantes. Por supuesto, no vamos a verlo todo a fondo. Sólo lo más básico para empezar. Aprenderemos más según vayamos progresando en estos artículos.

También empezaremos a experimentar con Angular, poniendo en marcha el proyecto, y será cuando empecemos a tocar «aquí y allí» y ver «qué pasa».

Lo que pretendemos en este artículo es, solamente, empezar a distinguir algunos elementos importantes de cualquier aplicación Angular. Se trata de una base muy modesta, pero imprescindible para que luego podamos aprender a crear proyectos completos con este framework.

EL DIRECTORIO src

Este directorio contiene toda la aplicación Angular. Esto quiere decir todo el HTML, el TypeScript (que ya sabemos que luego se transpilará a JavaScript) y el CSS.

Lo primero en lo que debemos de fijarnos es en el archivo index.html. Un archivo con un nombre así es siempre el punto de entrada de la aplicacion. En el caso de nuestra aplicación Angular, su código es el siguiente:

Observa que, realmente, no parece tener código HTML, ni JavaScript, ni nada. Solo tiene una etiqueta que se abre y cierra en la misma línea, resaltada en el listado. Además, resulta que no es realmente una etiqueta HTML. No existe como tal, ni figura en ninguna especificación. Entonces ¿qué pinta ahí? ¿Qué hace? Bien. Si la miras con calma verás que el nombre de la etiqueta empieza por pr-. Este prefijo es, precisamente, el que establecimos en el artículo anterior cuando creamos el proyecto nuevo. Decíamos que el modificador --prefix (o -p, en su versión abreviada) serían las siglas para identificar elementos de la aplicación Angular, y aquí tenemos el primero.

Pero ¿como se usa esta etiqueta? ¿Cómo llama a los contenidos que deban ir en la página? Dentro del directorio src, abre el directorio app, y verás un archivo llamado app.component.ts. Aunque aún no tenemos muy claro qué es y qué hace, por la extensión ya sabemos que es un fichero TypeScript. Sin embargo, si lo abres verás que entre otras cosas, tiene un código HTML, con una imagen en base 64, y otras etiquetas y elementos HTML. Todo esto está dentro de un template TypeScript. Si no recuerdas lo que es un template (plantilla) TypeScript, revisa este artículo.

Así que ya sabemos que la etiqueta que contiene el HTML llama «de alguna manera» a lo que hay en app.component.ts. Por cierto. Dentro de este último archivo, al final del mismo, tienes una variable, llamada title, cuyo valor es, precisamente, el prefijo que pusimos al crear el proyecto (en este caso, pr). Luego volveremos sobre este tema.

ARRANCANDO LA APLICACIÓN

Antes de seguir, vamos a ver como arrancar la aplicación. Para ello, necesitamos una terminal de mandatos del sistema operativo. Abre una en el directorio donde está la aplicación, o bien, dentro de tu editor VSC, pulsa el menú Ver, y la opción Terminal integrado. En la parte inferior de tu IDE se abrirá una terminal que puedes usar para introducir comandos. Teclea lo siguiente:

npm start

Verás que se lanza el mandato ng serve y, tras unos segundos, se lleva a cabo una transpilación de TypeScripts a JavaScripts. Cuando termina, verás, entre otras cosas, la siguiente línea:

** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **

Esto nos avisa de que nuestra aplicación está lista para correr en el puerto 4200. Abre tu navegador y teclea, en la barra de direcciones, lo siguiente:

localhost:4200

Verás una página como la siguiente (he abierto la consola del navegador, porque a lo largo de estos artículos le daremos mucho uso, y nos conviene tenerla a mano):

Y, si te paras a mirarlo, el resultado crresponde con el HTML definido en app.component.ts. Veamos su listado completo:

En la primera línea ves que lo primero que hace este archivo es importar el núcleo de Angular. Esto es imprescindible para que nuestra aplicación funcione. La sentencia import de TypeScript importa un elemento, cuyo nombre se especifica entre llaves (en este caso, el elemento importado es Component, que es una definición genérica de los componentes de Angular). El elemento se importa desde (cláusula from) una de las librerías nativas de Angular (en este caso, @angular/core), que se encuentran dentro del directorio node_modules.

Ahora observa la línea 4, donde se define la propiedad selector. ¿Te suena el contenido de esa propiedad? Pues sí. Coincide con la etiqueta esa que hay en el index.html, que no sabíamos que pintaba ahí. Es a través de la coincidencia de ese nombre como Angular le dice al navegador que, durante la ejecución, tiene que colocar este componente que estamos definiendo en TypeScript donde está la etiqueta cuyo nombre coincide con el selector.

También quiero que repares en la línea 9. Cómo ves, en la plantilla HTML aparece una cadena de texto con la variable title (que está definida en la línea 30) entre dobles llaves. Esto se conoce como interpolación de cadenas en el entorno Angular, y es una herramienta muy útil a la que recurriremos con muchísima frecuencia.

INTERPOLACIÓN DE CADENAS o INTERPOLACIÓN DE VARIABLES. Se conoce como interpolación de cadenas, o interpolación de variables, el hecho de declarar una variable en una parte del código y referenciarla en otra parte, con su nombre encerrado entre {{ y }}. De esta forma, donde se utilice la variable se verá su valor, y no el nombre de la misma. Entraremos en detalles sobre este tema más adelante, ya que nos resultará muy útil.

Observa, en la página que tienes cargada en el navegador, el títular en la parte superior central de la misma. Pone Welcome to pr!. Ahora vete a la línea 30 de app.component.ts y cambia el valor de la variable title. Por ejemplo, sustituye:

title = 'pr';

por

title = 'mi primer angular';

Lo primero que te llamará la atención, cuando grabes los cambios, es que en la terminal de mandatos abierta en la parte inferior de VSC está pasando «algo». Ese «algo» es que el CLI de Angular detecta que se ha cambiado el contenido de la aplicación, y recompila los typescripts. Inmediatamente después, la página se recarga en el navegador, y el rótulo de la parte superior aparece con el nuevo contenido.

SOBRE EL COMPONENTE

Los componentes, cómo app.component.ts, por ejemplo, son elementos que Angular incluye en el index.html, o en otras partes de la aplicación (esto ya lo iremos viendo según avancemos), y que generan el resultado que se renderiza en el navegador. Hemos visto que, en el caso de este componente, se identifica mediante el selector (línea 4 del código) que coincide con la etiqueta HTML.

Como norma general, un componente tiene tres bloques claramente distinguibles:

  • Lo que «entra» en el componente. Son las importaciones para cargar en el componente librerías que hacen falta para que el componente haga lo que tiene que hacer. En este caso, como es muy básico, sólo necesitamos que se cargue la estructura base de los componentes desde el núcleo de Angular, como vemos en la línea 1.
  • Lo que se crea o procesa en el componente. Es el bloque principal, que aparece entre @Component({ (en la línea 3) y }) (en la línea 28). Estos bloques se conocen, genéricamente, con el nombre de decoradores y contienen lo que el componente debe generar.
  • La salida del componente. El componente es, en realidad, una clase que se exporta mediante el comando export de TypeScript (de ES6, para ser exactos). Y ¿A dónde se exporta? Pues está claro. Al punto donde se llamó a la etiqueta que coincide con el selector mencionado anteriormente.

CONCLUYENDO

Por supuesto, esto es sólo una foto en blanco y negro de la estructura de la aplicación Angular. Sin embargo ya vemos la estructura básica de un componente, y la forma en que es invocado desde el index.html. También hemos empezado a ver como arrancar una aplicación en Angular, y como se actualiza cuando modificamos el código. En el próximo artículo seguiremos ahondando en algunos aspectos fundamentales de esta introducción a Angular 5.

   

Deja un comentario