Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Angular 2+

Cómo configurar el enrutamiento básico en Angular 2

by
Read Time:7 minsLanguages:

Spanish (Español) translation by Andrea Jiménez (you can also view the original English article)

Con el reciente lanzamiento oficial de Angular 2, es un buen momento para ponerse al día con algunos de los cambios más importantes.

Una cosa que cambió mucho es el router de Angular 2, que fue reemplazado por completo en el período previo a la versión final. Entonces, en estos dos tutoriales de video rápidos de mi curso sobre el enrutamiento en Angular 2, te mostraré cómo crear configuraciones de ruta y cómo usarlas en una aplicación. Aprenderás sobre rutas simples, redireccionamientos y rutas con comodines. Luego verás cómo usar una directiva para configurar el componente de tu aplicación para mostrar las rutas.

Los videos son una continuación de lecciones anteriores del curso, pero deberías ser capaz de seguir las técnicas que usamos. Puedes encontrar los archivos de origen de todo el proyecto en GitHub.

Cómo crear rutas en Angular 2

¿Por qué usar el enrutamiento?

Es posible crear una aplicación completa en Angular 2 sin enrutamiento. Entonces, si podemos hacer esto, ¿por qué necesitamos el enrutamiento?

La razón principal es que si no usamos el enrutamiento, nuestra aplicación dependerá únicamente de la navegación a través del control del programa. Tendremos que cambiar los componentes en función de la interacción del usuario, como cuando hacen clic en algo.

Con el enrutamiento, podremos navegar cambiando las URL. Todos los componentes se asignarán a una ruta, lo que nos permitirá movernos fácilmente por nuestra aplicación.

Cómo configurar el enrutamiento

Primero, para que el enrutamiento funcione, necesitamos agregar un href base en el encabezado de nuestro archivo index.html.

add a base href in the head of our indexhtml fileadd a base href in the head of our indexhtml fileadd a base href in the head of our indexhtml file

Previamente, configuraríamos nuestras rutas dentro del componente que las aloja. En este caso, esto significaría que agregamos nuestras configuraciones de ruta a nuestro archivo app.component. Con el nuevo router, se recomienda que creemos nuestra configuración de ruta en un archivo separado.

app.routes.ts

Así que crearemos un archivo llamado app.routes.ts en la raíz de la carpeta de la aplicación.

Lo primero que agregaremos a este archivo son las importaciones.

En primer lugar, toma provideRouter o RouterConfig del router Angular. Después, importa los componentes Acerca de, Error e Inicio desde la carpeta de páginas. Tenemos que importarlos para poder dirigirnos a estos componentes.

Add imports to approutestsAdd imports to approutestsAdd imports to approutests

Lo siguiente que haremos es agregar nuestra configuración de ruta para mantener nuestras rutas:

Aquí estamos usando una declaración const. Esta es una de las formas en que podemos declarar una variable en TypeScript y representa un valor que no se puede cambiar. En este caso, lo estamos usando para mantener nuestro RouterConfig.

Ahora, lo primero que agregaremos es una redirección. En un momento, agregaremos una ruta comodín para nuestra página de error. Esto por sí mismo hará que nuestra aplicación comience desde la página de error. La razón es que cuando se inicia nuestra aplicación, no tiene ruta. Por lo tanto, necesitamos especificar un componente como ruta predeterminada.

Podríamos agregar fácilmente el componente que queremos para iniciar nuestra aplicación a la ruta vacía, pero la forma recomendada de manejar esto es con una redirección. La redirección tiene que ser lo primero o no funcionará correctamente. Así es como se ve:

code for the redirectcode for the redirectcode for the redirect

Primero tenemos nuestro camino, que es una ruta vacía. Esta es la ruta con la que se iniciará nuestra aplicación. Luego tenemos nuestro redireccionamiento, que cambiará nuestro camino a inicio cuando encuentre una ruta vacía. Después, tenemos nuestro pathMatch. No entraré en muchos detalles, excepto para decir que esto hace que la ruta vacía coincida con la redirección.

Luego tenemos nuestra ruta que apunta al  AboutComponent. La ruta se configura en 'about', que es lo que veremos en la barra de direcciones cuando naveguemos hacia esta ruta. El componente al que se navegará es AboutComponent. Después, tenemos el HomeComponent. La ruta de acceso es 'home' y el componente que se va a iniciar es HomeComponent.

Esta es la ruta a la que navegaremos desde la redirección. Entonces, la última ruta que agregaremos es una ruta comodín. Esto coincidirá con las rutas que hayamos definido. Esta es también la razón por la que agregamos la redirección. Si no lo hiciéramos, nuestra aplicación comenzaría en esta ruta ya que partimos de una ruta que no está definida, una ruta vacía.

Después de agregar la redirección, cualquier ruta que ingresemos que no exista obtendrá nuestra página de error. Luego exportamos otro const usando el método provide router del router Angular. Utilizamos las rutas que configuramos con este método.

Una vez que hacemos eso, nuestras rutas están terminadas. Lo último que tenemos que hacer es agregar el enrutamiento a nuestra aplicación.

main.ts

Ve al archivo main.ts. Lo primero que haremos en este archivo es importar myRouterProviders desde el archivo de rutas de la aplicación que creamos. Luego tenemos que agregarlo a nuestra función bootstrap. Agregarlos aquí tiene la ventaja de hacer que las rutas estén disponibles para todos los componentes de nuestra aplicación.

Adding routing to the app in the maints fileAdding routing to the app in the maints fileAdding routing to the app in the maints file

Una vez que hagamos eso, habremos terminado de configurar nuestras rutas. En el siguiente video, terminaremos nuestra configuración de enrutamiento y obtendremos una vista previa de la aplicación.

Cómo alojar rutas en Angular 2

Configuración de la aplicación para hospedar rutas

Hasta ahora, configuramos nuestras rutas y las agregamos a nuestra función bootstrap. Ahora, solo necesitamos configurar el componente de tu aplicación para alojar nuestras rutas.

Así es como debería verse app.component.ts:

Code for the file appcomponenttsCode for the file appcomponenttsCode for the file appcomponentts

Primero, importamos nuestras directivas del enrutador. Vimos esto antes cuando un componente necesita usar el enlace del enrutador. Este componente utilizará el enlace del enrutador y otra directiva de la salida del enrutador Angular 2. Después, eliminamos la plantilla y agregamos una tilde para convertirla en una cadena de plantilla. Esto nos permitirá crear una plantilla multilínea.

Primero, agregamos un div para nuestra barra de navegación bootstrap. Esta barra de navegación aparecerá en todas las páginas, ya que es parte de la plantilla. Luego, dentro de la barra de navegación, agregamos nuestra marca. Puede ser texto o una imagen y representa la marca de tu aplicación.

Luego agregamos una lista desordenada. En el interior, agregaremos nuestros enlaces para una barra de navegación. En nuestros enlaces, en lugar de una URL para navegar, tenemos routerLink. Así es como navegamos a una ruta bajo la interacción del usuario. Aquí estamos configurados para navegar a la ruta de inicio cuando hacemos clic en este botón.

También podemos escribir el routerLink en otra forma dentro de una matriz. Normalmente hacemos esto cuando necesitamos proporcionarle más información a nuestra ruta. Luego también tenemos una directiva routerLinkActive, que aplicará la clase de menú al enlace cuando la ruta esté activa. Estamos usando esto para mostrar una pista visual de en qué página estamos.

Luego agregaremos otro enlace de enrutador que navega a la página Acerca de. Luego agregaremos la directiva router-outlet. Por eso los componentes no necesitan un selector. Cuando se cargan en el enrutamiento, esta directiva alojará los componentes. Si bien el resto de esta plantilla aparecerá estática en cada página, el router-outlet cambiará según la ruta a la que se navegue. Finalmente para este archivo, agregamos las directivas del enrutador.

Después, lo último que debemos hacer es agregar una regla CSS al archivo style.css:

Esta regla es para la clase que se aplicará cuando la ruta adjunta al enlace del enrutador esté activa. El fondo del enlace será de color blanco. Y ahora, el enrutamiento está configurado para nuestra aplicación.

Prueba el enrutamiento

Continúa, guarda el proyecto y ejecuta npm start en la carpeta del proyecto.

Si todo se hizo correctamente, la aplicación debería compilarse y luego iniciarse desde un navegador web.

Home pageHome pageHome page

Si notas, el fondo del enlace de inicio está sombreado en blanco. Esto se debe a que esta es la ruta activa. Luego, si hacemos clic en el botón Acerca de, deberíamos ir a la página Acerca de.

About pageAbout pageAbout page

Después, escribe una ruta inexistente en la barra de direcciones. Cuando lo hagamos, deberíamos obtener una página de error.

error pageerror pageerror page

Ahora tenemos el enrutamiento funcionando en nuestra aplicación, pero podemos hacer muchas cosas más con él. En el resto del curso, te sumergirás en el enrutamiento con mucha más profundidad.

Mira el curso completo

En el curso completo, Enrutamiento en Angular 2, te enseñaré a usar el nuevo router de Angular 2 en tus aplicaciones. Verás cómo configurar el enrutamiento básico a páginas estáticas, cómo extraer parámetros de la ruta y cómo hacer que tu enrutamiento sea modular. También verás cómo se puede implementar el control de acceso de los usuarios con el enrutador Angular 2.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.