angular tutorial

Componente router en angular , como crearlo en angular cli.

Una de las cosas mas necesarias para nuestra web es la navegación, para esto debemos agregar el componente router, con angular cli es muy fácil, recordemos que generalmente debemos tener a la mano las instrucciones de angular cli .

Para esto hay que explicar, que router lo vamos a encontrar en la sección de módulos( module) ya que podemos hacer menú y sub menús y cada uno trabajar por separada, por ejemplo, si eres administrador o usuario podemos separar las funciones, pero nos centraremos en crear rutas de forma muy sencilla.

Que es un componente router

Un componente router en resumen y explicaciones simple es una sección donde vamos a poner nuestras deep link o secciones de nuestra pagina.

normalmente si hacemos una web tenemos:

  • index.html
  • contacto.html
  • nosotros.html

y hacemos referencias a cada uno de ellos, pero el problema es que nuestro servidor refrescara la página web, en angular no refresca nunca nuestra web, lo que hace es inyectar pedazos de html, pero para ello necesitamos saber las referencias de cada trozo de código.

Creando un componente router

Vamos a escribir en nuestra terminal lo siguiente:

ng g module nombre –routing

nos va a generar dos archivos en este caso mi archivos se llaman router así que los archivos son:

  • router-routing.module.ts
  • router.module.ts

vamos e centrarnos en el primer archivo (router-routing.module.ts), en este modulo vamos a importar nuestros componentes creados, en este caso yo voy a importar 5 componentes creado anteriormente, estos quedan de la siguiente manera. 

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
//componentes
import {HomeComponent} from '../home/home.component';
import {WorkComponent} from '../work/work.component';
import {ProjectComponent} from '../project/project.component';
import {ContactComponent} from '../contact/contact.component';
import {NotfoundComponent} from '../notfound/notfound.component';
ahora vamos a crear una constante en nuestra clase.

const routes: Routes = [
{path: '', component: HomeComponent},
{path: 'home', component: HomeComponent},
{path: 'work', component: WorkComponent},
{path: 'project', component: ProjectComponent},
{path: 'contact', component: ContactComponent},
{ path: '**', component: NotfoundComponent }
];
path nos va a  servir como nuestra “url corta” o el nombre de la página.
component es nuestra ruta de nuestro componente.
Si el path dejamos vacío (”) esto nos define como nuestra pantalla principal (index), para definir una página de error este se usa el comodín de la siguiente manera path ‘**’.
hay que agregar esta linea en la parte de ngmodule de nuestro componente router (en caso de que no lo tuviéramos automáticamente):

@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
forRoot es una función que hace una llamada a un enrutador configurado en la raíz de la aplicación y realiza la navegación inicial en función de la URL proporcionada.
Esta clase que creamos tenemos que hacer una referencia en nuestra clase principal, en este caso nuestro app.module, aquí importaremos por el nombre de la clase que lo encontraremos al final de la clase routing.
router-routing.module.ts:
export class RouterRoutingModule { }
entonces en nuestra clase app.module vamos a importar de la siguiente manera:
import {RouterRoutingModule} from ‘./router/router-routing.module’;
y en el @ngmodule vamos a poner el nombre de nuestra clase enrutador en el import de nuesto app.module

@NgModule({
declarations: [
AppComponent,
HomeComponent,
ContactComponent,
WorkComponent,
IamComponent,
ProjectComponent,
NotfoundComponent
],
imports: [
BrowserModule,
RouterRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})

Como utilizar el componente route

Bueno ya tenemos nuestras clases listas, nuestras rutas, entonces es momento de ponerlo a andar, aqui vamos a manipular el archivo app.component.html, vamos a agregar la siguiente linea

<router-outlet></router-outlet>
Router outlet nos sirve para “cambiar” nuestras páginas, pero sin refrescar nuestra ventana, todo el contenido es inyectado en el html en tiempo real, otro punto importante es :
<li routerLink=”home”>home</li>
en esta linea podemos ver routerLink, en routerLink se coloca el nombre del path de nuestra clase router-routing.module.ts y es así como el sistema de angular sabe cual es el componente/seccion de pagina que debe cambiar
componente router
el codigo de app.component.html queda de la siguiente manera

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
<h1>
{{title}}!
</h1>
<imgwidth="300"src="https://unprogramador.com/wp-content/uploads/2017/08/giphy-downsized.gif">
</div>
<h2>Primer componente </h2>
<ul>
<li routerLink="home">home</li>
<li routerLink="project">project</li>
<li routerLink="work">work</li>
<li routerLink="contact">contact</li>
</ul>
<router-outlet></router-outlet>
Con esto ya podemos comenzar a diseñar nuestras paginas y realizar el cambio, en el siguiente tutoría hablaremos sobre el diseño por componentes
nota: recuerden que para que vean los cambios deben posicionarse en su proyecto con la consola de comandos y escribir ng serve –open.

por Cesar Flores

Programador de tiempo completo, Gamer de medio tiempo y fotógrafo ocasionalmente, me gusta el front-end y mi framework favorito es angular aunque no por eso le hago el feo a un nuevo lenguaje.

Deja un comentario

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.