Cómo comenzar a desarrollar en Angular 2 con Angular CLI


El nuevo y radiante framework de Google: Angular 2.0 llegó con muchas mejoras en cuanto a rendimiento y con un enfoque de desarrollo basado en componentes.

Como todo framework moderno, se usa tanto ES6 como TypeScript para el desarrollo, por lo cual se hace necesario el uso de transpiladores como Babel y bundlers como Webpack para gestionar nuestra app.

Creando la aplicación con angular-cli

Para comenzar con Angular 2, es imprescindible usar angular-cli: un paquete npm que permite gestionarlo todo por ti:

$ sudo npm i -g angular-cli

Si usas npm desde un nvm no te será necesario usar sudo. Luego de instalarla, tendrás disponible de forma global el comando ng, que te permitirá hacerlo todo:

$ ng new hello-world

El comando anterior creará la carpeta hello-world con una estructura lista para comenzar a desarrollar. El proceso demora un poco porque descarga varias dependencias importantes como TypeScript, Webpack y herramientas de pruebas como Jasmine, Karma y Protractor. Para ver todas las dependencias del proyecto, lee el fichero package.json.

Ejecuta la aplicación

Antes de pasar a ver código, es más importante conocer los comandos principales que utilizarás a diario:

$ ng serve         # sirve la app en localhost:4200
$ ng serve --prod  # sirve la app simulando un entorno de producción

$ ng build         # construye la app en la carpeta /dist
$ ng build --prod  # la construye optimizándolo todo para producción

Avanza y ejecuta el último comando, luego dirígete a /dist y observa el tamaño del fichero main.bf5d479aafd1487543a1.bundle.js. Sin escribir una línea de código tengo un bloque de 907 kb (not cool Google, not cool).

El equipo de Angular dice que usan una característica fenomenal de Webpack llamada Tree Shaking a la hora de construir la aplicación para producción, es por eso que el bundle anterior se redujo a ~900kb de un total de 2.25mb en modo desarrollo, o sea, que incluso aplicando Minimizado de código, Uglificación y Tree Shaking, 900kb es lo mínimo que tendrá tu app, al no ser que…

Apliques Ahead of Time Compilation (AoT)

Este es el último feature que puedes aplicarle al código antes de mandarlo para producción. Sin él no hubiera ni pensado en comenzar a desarrollar apps en Angular 2.

El compilador de Angular convierte las instrucciones como *ngIf y *ngFor en el propio navegador cuando desarrollas. O sea, que tu aplicación se divide básicamente en 3:

  1. Tu código
  2. El framework Angular
  3. El compilador del framework

Cuando llevas la app a producción, puedes aplicar AoT para hacer todo el proceso de compilación una vez y desplegar sin el tercer componente (el compilador del framework), el cual ocupa el 60% del espacio ocupado. Para lograrlo genera la app de la siguiente forma:

$ ng build --prod --aot

Observa ahora cómo el main.bundle.js se achicó hasta los 548 kb aproximadamente. Si ejecutas un servidor web python (python -m "SimpleHTTPServer") sobre la carpeta /dist, todo se ejecutará muy rápido (casi al nivel de React).

~500 kb, No Menos

Por ahora debemos conformarnos con eso. Aunque aún parece bastante grande, ten en cuenta que Angular es un framework que lo hace todo: el routing, el trabajo con formularios, animaciones, etc, por lo que en parte está justificado dicho tamaño.

Personalmente me gusta más el enfoque de ReactJS, cuyo único trabajo es renderizar vistas de una manera extraordinaria (y usar mobx para el state management y react-router para la navegación), pero según benchmarks, Angular 2 está muy cerca del rendimiento de React, así que no debes preocuparte mucho por el rendimiento.

Creando Rutas para la Navegación

En /src/app estarán los componentes de tu aplicación. Si observas el fichero /src/main.ts se importa el módulo principal que se encuentra en /src/app/app.module.ts, el cual a su vez importa el componente AppComponent.

Este setup no tiene un sistema de rutas definido, o sea, solo existe un componente principal del cual heredarán los demás. Para crear un sistema de rutas le diremos a la cli que lo genere por nosotros. Dentro de la raíz del proyecto ejecuta lo siguiente:

~/hello-world $ ng init --routing --skip-npm 

Te pedirá sobre escribir algunos ficheros, verás que todo termina muy rápido porque le estamos diciendo además que no reinstale las dependencias. Observa que generó el fichero app-routing.module.ts.

Ese fichero no es ni una configuración, ni un componente Angular, es un Módulo. El mismo es utilizado por el módulo principal: AppModule. Esto significa que en Angular 2 también puedes crear tantos módulos desees e importarlos luego en el principal o en otros secundarios.

Observa en el fichero app.module.ts cómo se importó de forma automática dicho módulo dentro del arreglo imports, junto con los core modules.

Volviendo al módulo de rutas creado recientemente, hay un arreglo que debemos llenar con nuestras rutas. Dichas rutas aceptan dos valores principales: path y component. O sea, a qué ruta pertenece cada componente:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  {
    path: 'home',
    component: HomeComponent
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  providers: []
})
export class AppRoutingModule { }

El componente HomeComponent no existe, por lo que la app fallaría al tratar de entrar a la ruta /home. Para hacerlo funcionar, crea dicho componente a través de la CLI:

$ ng g component home

Se creará una carpeta del mismo nombre con los ficheros requeridos. Como el más importante de ellos es ./home/home.component.ts, lo importamos desde el módulo de rutas:

...
import { HomeComponent } from './home/home.component.ts'

const routes: Routes = [
  {
    path: 'home',
    component: HomeComponent
  }
];
...

Para crear más rutas solo sigue el mismo patrón:

  1. Crea un componente con ng g component nombre_componente
  2. Importalo desde el módulo de rutas
  3. Añade la configuración de la ruta al arreglo.

Estableciendo la ruta por defecto

Ahora mismo, el contenido del componente HomeComponent no se puede visualizar. Esto sucede porque aún se está renderizando el componente principal: AppComponent.

Como toda webapp tiene partes comunes, vamos a usar el componente AppComponent como el Layout. Para ello tenemos que definir la navegación, el footer y el lugar donde se renderizarán las páginas de las rutas.

Abre el fichero app/app.component.html y sustituye su contenido por este:

<ul>
  <li>
    <a routerLink="/home"> Home </a>
  </li>

  <li>
    <a routerLink="/dashboard"> Dashboard </a>
  </li>
</ul>

<router-outlet></router-outlet>

<footer>
  Copyright - MyCyberAcademy 2016
</footer>

Observa la etiqueta <router-outlet></router-outlet>. Es la Directiva que especifica que en ese lugar irá el contenido de cada página. Por ejemplo, al dar clic en el Link Home, el contenido del componente asociado aparecerá debajo de dicha directiva.

Para que el segundo link funcione, debes hacer los 3 pasos que te expliqué para crear una nueva ruta. Te invito a que la crees al final del tutorial, pues ahora, necesitamos decirle al router que cuando se acceda a la aplicación, se active una ruta por defecto.

Para que al acceder a http://localhost:4200 se active la ruta home, necesito hacer un redirectTo sobre la raíz de esta forma:

...
import { HomeComponent } from './home/home.component.ts'

const routes: Routes = [
  {
    path: '',
    redirectTo: '/home'
    pathMath: 'full'
  },
  {
    path: 'home',
    component: HomeComponent
  }
];
...

Igual, si sobre la raíz deseas renderizar otro componente, solo especifícalo como otra configuración de ruta estableciendo el path a vacío: { path: '', ... }.

Conclusiones

Hasta aquí llega la puesta en marcha de un proyecto Angular 2. Gracias a la CLI no hay que escribir el boilerplate que caracteriza a toda webapp moderna: crear los módulos básicos, importar las libs necesarias, crear la estructura de carpetas, etc.

Solo te queda probar lo explicado acá y seguir la documentación oficial donde te enseñan los demás conceptos de Angular: los servicios, las directivas, los pipes, etc.

Para familiarizarte mejor con la estructura, solo tienes que generar el proyecto con angular-cli como se especifica en el tutorial y examinarlo. Es bueno también estudies un poco TypeScript, pues es necesario en este tipo de apps especificar los tipos de datos de las variables y en la declaración de funciones, parecido a cualquier lenguaje compilado/interpretado como Java.

  • Daniel Ivan Santarriaga Espino

    En el ultimo trozo de código que pones, colocas:

    pathMath: ‘full’

    Deveria ser:

    pathMatch: ‘full’