Angular 2: Conceptos Core Router

En el artículo de esta semana quiero hablarte de otro de los conceptos Core de Angular 2: Router.

¿Qué es Router?

Para los desarrolladores acostumbrados a desarrollar con MVC 4 esto les puede sonar a la sintaxis en las que ASP.NET distribuye las llamadas a los controladores dentro de ese framework. En Angular este concepto no es exactamente lo mismo, pero podríamos decir que tiene un enfoque similar.

Dentro del Router indicaremos las diferentes rutas/opciones que tiene la aplicación y qué componente se encarga en dicha acción. La idea es que puedas poner tu página de acceso a la URL / login y una vez te autentiques en tu aplicación mostrar la página principal (home). En Angular 2, tendrías un componente para el login y un componente para la página home. Router te permite mapear estas URL a un componente.

Para poder configurar los Routes en Angular 2, dispones de tres componentes principales:

• RouteConfig. Describe las rutas de tu aplicación
• RouterOutlet. Es el «placeholder» que es a «placeholder» donde indica que se va a mostrar el contenido que hay en cada ruta
• RouterLink. Los utilizarás para navegar a los links dentro de la app.

¿Cómo funciona?

Piensa que partimos de una clase como la del ejemplo anterior. En primer lugar, tendrás que importar el modúlo RouteConfig y ROUTER_DIRECTIVES que está en tu componente principal el app.component.ts:

import {RouteConfig,ROUTER_DIRECTIVES} from 'angular2/router';

A continuación agrega el RouteConfig, en el que debes indicar las rutas que va a tener tu aplicación y el componente que se va a ejecutar en la misma:

@RouteConfig([
  { path: "/home",      
    name: "Home",      
    component: AppComponent, 
    useAsDefault: true },
  
  { path: "/Employed", 
    name: "Employed", 
    component: EmployedComponent }
])

Una vez definidas las Rutas que va a tener tu aplicación, debes modificar tanto el fichero html que tiene el componente, como la definición del mismo. El código del componente debe incluir las directivas de las rutas, por lo que quedaría de la siguiente forma:

@Component({
    selector: 'blog-desarrollando',
     templateUrl: 'app/app.component.html',
      directives: [ROUTER_DIRECTIVES] 
     })

Dentro del HTML, tienes que agregar enlaces a los otros componentes de la aplicación, quedando de la siguiente forma:

<h1>Desarrollando con SharePoint Example Route</h1>


<nav>
    <a [routerLink]="['Home']">Home</a>
    <a [routerLink]="['Employed']">Employed</a>
  </nav>

   <router-outlet></router-outlet>

Para finalizar tienes que modificar el fichero de arranque de la App boot.ts e indicar que tienes una dependencia sobre el Route Provider. Para ello, debes importar el módulo e inyectárselo al punto de arranque de la siguiente forma:

import {bootstrap}    from 'angular2/platform/browser'
import {AppComponent} from './app.component'
import {ROUTER_PROVIDERS} from 'angular2/router';

bootstrap(AppComponent,[
  ROUTER_PROVIDERS ]);

Antes de lanzar tu aplicación, debes verificar que has establecido el punto de entrada de la aplicación. ¿Cómo? En el fichero index.html de tu App debes establecer en el head la siguiente instrucción:

 <base href="/">

¡Ahora sí! Arranca el servidor con la siguiente instrucción npm start. Visualizarás la siguiente pantalla:

Conclusión

Como has podido observar, Angular 2 ha simplificado mucho el enrutamiento respecto a su anterior versión. El principal beneficiado es el desarrollador, que hace un código más sencillo y más claro.

La próxima semana te enseñaré una de las grandes mejoras que trae Angular 2: el paso de parámetros entre los componentes 😉