Saltear al contenido principal
Share the love
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  

 

Que es el sistema de routing de angular

 

 

En cualquier sitio web generalmente tienes varias direcciones que son servidas por un servidor, para mostrar diferentes contenidos del sitio o aplicacion web. Podemos tener una portada, una pagina de contacto o una pagina de productos, etc. Cada una de esas páginas se presenta en una ruta diferente del sitio web, que podrían ser como ejemplo

example.com/contacto/
example.com/productos/
example.com/servicios/

Cada una de esas rutas podría tener un archivo HTML o PHP, que se sirve  el contenido de esa sección.
Hasta aquí estamos seguros que los lectores no tendrán ningún problema, pues es así como funcionan, en líneas generales, prácticamente todos los sitios web.

Sin embargo, en las aplicaciones Angular sólo tenemos una página, el index.html y  toda la acción se desarrolla dentro de esa página.  En Angular lo común es que el index sólo tenga un componente en su BODY y realmente toda la acción se desarrollará en ese componente. Todas las «páginas» (pantallas , funciones o  vistas) del sitio web se mostrarán sobre ese índex , intercambiando el component que se esté visualizando en cada momento,
Si no sabes a un lo que es un componente no te preocupes en el siguiente enlance  te dejo un articulo donde hablamos sobre los componentes en angular

 

    Etiqueta  Router outlet

router-outlet es la etiqueta especial que utiliza Angular  para mostrar los (component) componentes hijos de un componente padre. Por defecto todos los componentes de una aplicacion en angular son hijos del componente AppComponent

si incluímos esta etiqueta dentro de la vista de AppComponent

se renderizarán cada uno de los componentes hijos del routing dentro del componente padre . Si nos encontramos en la ruta, por ejemplo /login se renderizará a la etiqueta router-outlet  dentro del componente padre

Ruta por defecto

para agregar una ruta por defecto agregaremos el siguiente codigo en nuestro archivo app-routing.module.ts

 

indicando que si el path esta vacio o en blanco nos redireccionara a dashboard, aqui podemos agregar la direccion que queramos.

El archivo quedara asi

 

 

Esto ha sido todo amigos, si tiene alguna duda o o sugerencia no olviden dejarnos sus comentarios, Gracias por visitarnos.

Maicol Romero Administrator

Desarrollador full stack, PHP, Codeigniter, Git, Ionic, Angular,Linux

Volver arriba