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';
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 }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class RouterRoutingModule { }
import {RouterRoutingModule} from ‘./router/router-routing.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>
<li routerLink=”home”>home</li>
<!--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>