En este artículo vamos a analizar el código de la aplicación inicial que se instala al hacer un nuevo proyecto con Angular CLI. Ten en cuenta que en artículos anteriores del Manual de Angular 2 hemos abordado ya en una primera instancia la estructura de carpetas generada por Angular CLI, además de explicar cómo crearla a través de comandos de consola.

Por tanto, nos centraremos en entender cuál es el flujo de ejecución del código, junto con los archivos que se van incluyendo y recorriendo al ejecutar la aplicación. Obviamente, habrá cosas en las que no podamos entrar todavía en muchos detalles, pero no hay que preocuparse porque serán materia de estudio en sucesivos artículos.

Archivo package.json

Vamos a comenzar por analizar este archivo, ya que muchas cosas son declaradas inicialmente en él. Al analizar este archivo encontraremos el origen de muchas de las librerías que usa Angular 2.

Como debes saber, package.json es un archivo en el que se declaran las dependencias de una aplicación, gestionadas vía npm. Su código es un JSON en el que se declaran varias cosas.

Inicialmente hay que ver la propiedad "dependencies". En ella encontrarás la librería Angular separada en varios módulos. Esta es una de las características de la nueva plataforma de desarrollo promovida por Angular 2, la modularización del código. Encontrarás que una aplicación Angular 2 necesita ya de entrada diversos módulos como son "common", "compiler", "core", etc.

Luego hay una serie de librerías de terceros, no creadas directamente por el equipo de Angular, o bien creadas por ellos mismos pero con un enfoque universal (capaz de usarse en otros tipos de proyectos). Son "es6-shim", "rxjs", etc.

Todos estos módulos antes se incluían por medio de scripts (etiqueta SCRIPT) en el HTML de la página. Pero en esta versión y gracias a Angular CLI ya viene incorporada una mejor manera de incluir módulos Javascript, por medio de "SystemJS". Observarás que el propio SystemJS está incluido como dependencias "systemjs" y con él podríamos incluir todo tipo de código, no solo JS, sino otros ficheros necesarios como CSS.

Entendiendo lo básico de SystemJS

Para comenzar por nuestro análisis del código, vamos a abrir el archivo "src/index.html".

Como dijimos, la carpeta src es donde se encuentran las fuentes de tu proyecto. En ella encontramos un index.html que es la raíz de la aplicación. Todo empieza a ejecutarse a través de este archivo.

Te llamará la atención el código siguiente:

{{#each scripts.polyfills}}<script src="{{.}}"></script>{{/each}}

Ese código hace un recorrido por una serie de librerías y las va colocando dentro de etiquetas SCRIPT para incluir su código en la aplicación. De momento lo que debes saber sobre este código es que por medio de él se cargan librerías externas que necesita Angular y que hemos visto declaradas en las "dependencies" del archivo package.json. Lo que nos interesa saber es que así se está cargando, entre otras, la librería SystemJS.

Ahora, en el final de index.html encontrarás allí un script. Cuando llegamos a este punto, SystemJS ya está cargado y en este Script se realiza una inicialización de esta librería para cargar los elementos necesarios para comenzar a trabajar:

<script>
      System.import('system-config.js').then(function () {
        System.import('main');
      }).catch(console.error.bind(console));
</script>

Encontramos el objeto "System", que es una variable global definida por la librería SystemJS. Por medio del método "import" consigue cargar módulos. Apreciarás que se está cargando inicialmente un archivo llamado "system-config.js".

Luego vemos el método then() y catch(). Estos métodos los deberías de reconocer, pues son pertenecientes a un patrón bien conocido por los desarrolladores Javascript, el de promesas. El método then() se ejecutará cuando se termine de cargar el módulo "system-config.js" y el método catch() se ejecutaría en caso que no se haya podido cargar ese archivo. Gracias a then(), después de haber cargado "system-config.js" entonces se cargará "main", que enseguida veremos qué es.

En este punto te preguntarás ¿Dónde está system-config.js?. Quizás no lo encuentres, pero veas en la misma carpeta "src" el archivo system-config.ts. Ese es un archivo TypeScript que contiene el código de system-config.js antes de transpilar con el TypeScript Compiler.

El archivo system-config.ts generalmente no lo vas a tener que tocar, porque Angular CLI te lo irá actualizando. Si lo abres sin duda irás reconociendo algunas líneas, cosas que necesitará SystemJS. No vamos a entrar ahora en el detalle, de momento quédate con que es código generado.

Por su parte la referencia a "main" que teníamos antes en los import del index.html System.import('main'), es un import. No le ponen ni siquiera la extensión del archivo "main.js" y esto es porque "main" es un alias declarado en el system-config.ts. Fíjate en el código del archivo, en estas líneas:

// Apply the CLI SystemJS configuration.
System.config({
  map: {
    '@angular': 'vendor/@angular',
    'rxjs': 'vendor/rxjs',
    'main': 'main.js'
  },
  packages: cliSystemConfigPackages
});

El objeto "map" tiene una lista de alias y archivos que se asocian. Siendo que "main" corresponde con "main.js". Nuevamente, no encontrarás un "main.js" entre los archivos del proyecto, en la carpeta "src", porque lo que tendremos es un main.ts que luego se convertirá en el main.js.

Ahora puedes abrir main.js. Verás que su código nuevamente hace uso de SystemJS, realizando diversos imports. Estos imports son como los que conoces en ECMAscript 6 y básicamente lo que te traen son objetos de diversas librerías.

Encontrarás este código en main.js, o algo similar:

import { bootstrap } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { TestAngular2AppComponent, environment } from './app/';

Por ejemplo, estás diciéndole que importe el objeto "bootstrap" de la librería "@angular/platform-browser-dynamic". Esa librería está declarada dentro de "system-config.ts"

Luego verás otras líneas, que es el bootstrap, o inicio de la aplicación Angular. No vamos a entrar en detalle, pero es lo equivalente al "ng-app" que colocabas antes en el código HTML de tu index. Esto, o algo parecido ya se podía hacer con Angular 1 y se conocía como el arranque manual de Angular.

Componente principal de una aplicación

Seguimos analizando index.html y encontramos en el código, en el cuerpo (BODY) una etiqueta que llamará la atención porque no es del HTML tradicional. Es el uso de un componente y su código será algo como:

<mi-nombre-proyecto-app>Loading...</mi-nombre-proyecto-app>

Ese es el componente raíz de nuestra aplicación Angular 2. Hablaremos de componentes con detalle más adelante. De momento para lo que te interesa a ti, que es reconocer el flujo de ejecución básico, hay que decir que su código está en la carpeta "src/app".

En esa carpeta encontrarás varios archivos del componente que analizaremos con calma más adelante. De momento verás un archivo ".html" que contiene la vista de este componente y un archivo ".css" que contiene el CSS. Si tu componente se llamaba "mi-nombre-proyecto-app", estos archivos se llamarán "mi-nombre-proyecto.component.html" y " mi-nombre-proyecto.component.css".

Para terminar esta primera zambullida al código te recomendamos editar esos archivos. Es código HTML y CSS plano, por lo que no tendrás ningún problema en colocar cualquier cosa, siempre que sea HTML y CSS correcto, claro está.

Para quien use Angular 1 ya reconocerá una estructura como esta:

{{title}}

Es una expresión que Angular 2 sustituirá por un dato que se declara en el archivo .ts del componente. De momento lo dejamos ahí.

Ejecutar el proyecto

Para comprobar si tus cambios en el HTML del componente han tenido efecto puedes probar el proyecto. La ejecución de esta aplicación ya la vimos en el artículo de Angular CLI, por lo que no necesitarás mayores explicaciones. De todos modos, como resumen, sigue los pasos:

Desde la raíz del proyecto, con el terminal, ejecutamos el comando:

ng serve

Luego nos dirigimos a la URL que nos indican como resultado de la ejecución del comando, que será algo como:

http://localhost:4200/

Entonces deberías ver la página funcionando en tu navegador, con el HTML editado tal como lo has dejado en el archivo .html del componente principal.

En futuros artículos profundizaremos sobre muchos de los puntos relatados aquí. De momento creemos que esta introducción al código debe aclararte muchas cosas, o plantearte muchas otras dudas.

Si es tu caso, no te preocupes por sentirte despistado por tantos archivos y tantas cosas nuevas, pues poco a poco iremos familiarizándonos perfectamente con toda esta infraestructura. Para tu tranquilidad, decir que esta es la parte más compleja y que, a partir de aquí, las cosas serán más agradecidas. Si además vienes de Angular 1, empezarás a reconocer mejor las piezas que antes existían en el framework.