{"id":1966,"date":"2023-11-23T12:31:56","date_gmt":"2023-11-23T15:31:56","guid":{"rendered":"https:\/\/stackcodelab.com\/blog\/?p=1966"},"modified":"2023-11-23T12:31:57","modified_gmt":"2023-11-23T15:31:57","slug":"capitulo-4-enrutamiento-y-navegacion","status":"publish","type":"post","link":"https:\/\/stackcodelab.com\/blog\/capitulo-4-enrutamiento-y-navegacion\/","title":{"rendered":"Cap\u00edtulo 4: Enrutamiento y Navegaci\u00f3n"},"content":{"rendered":"\n

4.1 Configuraci\u00f3n de Enrutamiento<\/h4>\n\n\n\n

En Angular, el enrutamiento permite navegar entre diferentes vistas o componentes de la aplicaci\u00f3n sin necesidad de recargar la p\u00e1gina completa. Para configurar el enrutamiento, sigue estos pasos:<\/p>\n\n\n\n

    \n
  1. Importa el m\u00f3dulo RouterModule <\/code>desde @angular\/router <\/code>en tu m\u00f3dulo principal (por lo general, app.module.ts<\/code>).<\/li>\n<\/ol>\n\n\n\n
    import { RouterModule } from '@angular\/router';<\/code><\/pre>\n\n\n\n
      \n
    • Configura las rutas en un array. Cada ruta se define con un objeto que especifica el path (ruta), el componente que se debe mostrar y otros datos relacionados.<\/li>\n<\/ul>\n\n\n\n
      const routes: Routes = [  { path: '', component: HomeComponent },  { path: 'about', component: AboutComponent },  { path: 'contact', component: ContactComponent }];<\/code><\/pre>\n\n\n\n
        \n
      • Utiliza el m\u00e9todo RouterModule.forRoot(routes) <\/code>para configurar las rutas en tu aplicaci\u00f3n.<\/li>\n<\/ul>\n\n\n\n
        @NgModule({  imports: [RouterModule.forRoot(routes)],  exports: [RouterModule]})export class AppRoutingModule {}<\/code><\/pre>\n\n\n\n
        4.2 Creaci\u00f3n de Rutas<\/h4>\n\n\n\n
        Para navegar entre p\u00e1ginas en Angular, puedes utilizar la directiva routerLink <\/code>en las plantillas HTML. Por ejemplo: <\/p>\n\n\n\n
        <ul>\u00a0 <li><a routerLink=\"\">Inicio<\/a><\/li>\u00a0 \n<li><a routerLink=\"\/about\">Acerca de<\/a><\/li>\u00a0 \n<li><a routerLink=\"\/contact\">Contacto<\/a><\/li><\/ul><\/code><\/pre>\n\n\n\n
        La propiedad routerLink <\/code>se establece en el path de la ruta que deseas navegar. Al hacer clic en un enlace, Angular gestionar\u00e1 la navegaci\u00f3n y mostrar\u00e1 el componente correspondiente.<\/p>\n\n\n\n
        4.4 Rutas Anidadas<\/h4>\n\n\n\n
        Las rutas anidadas permiten crear jerarqu\u00edas de rutas en tu aplicaci\u00f3n. Puedes anidar rutas dentro de otras rutas para representar una estructura de navegaci\u00f3n m\u00e1s compleja. Por ejemplo: <\/p>\n\n\n\n
        const routes: Routes = [\r\n  { path: '', component: HomeComponent },\r\n  {\r\n    path: 'products',\r\n    component: ProductsComponent,\r\n    children: [\r\n      { path: 'list', component: ProductListComponent },\r\n      { path: 'detail\/:id', component: ProductDetailComponent }\r\n    ]\r\n  }\r\n];\r<\/code><\/pre>\n\n\n\n
        En este ejemplo, tenemos una ruta anidada para la secci\u00f3n de productos que incluye una lista de productos y una vista detallada de productos. Las rutas anidadas se definen dentro del objeto children<\/code> de la ruta principal.<\/p>\n\n\n\n
        Para navegar por rutas anidadas, puedes utilizar enlaces con rutas relativas y la propiedad routerLink <\/code>de la misma manera que con las rutas principales.<\/p>\n\n\n\n
        En Angular, aparte de utilizar el enrutador incorporado y la configuraci\u00f3n de rutas en un archivo de configuraci\u00f3n de enrutamiento (como se explic\u00f3 anteriormente), tambi\u00e9n puedes crear rutas de otras maneras:<\/p>\n\n\n\n
          \n
        1. Rutas con el Uso de Directivas en la Plantilla: <\/strong>Puedes crear rutas utilizando directivas en la plantilla, como *ngIf<\/code>, para mostrar o ocultar componentes en funci\u00f3n de ciertas condiciones. Aunque esta no es la forma m\u00e1s recomendada de gestionar rutas en aplicaciones complejas, es \u00fatil en casos sencillos.<\/li>\n<\/ol>\n\n\n\n
          <app-home *ngIf=\"isHome\"><\/app-home>\r\n<app-about *ngIf=\"isAbout\"><\/app-about>\r<\/code><\/pre>\n\n\n\n
          Rutas Program\u00e1ticas: <\/strong>Puedes navegar program\u00e1ticamente a trav\u00e9s de rutas utilizando el servicio Router<\/code>. Esto es \u00fatil para navegaciones que no est\u00e1n vinculadas a elementos de interfaz de usuario, como despu\u00e9s de una operaci\u00f3n espec\u00edfica en un componente.<\/p>\n\n\n\n
          import { Router } from '@angular\/router';\r\n\r\n\/\/ Navegar a una ruta program\u00e1ticamente\r\nthis.router.navigate(['\/about']);\r<\/code><\/pre>\n\n\n\n
          Navegaci\u00f3n de Rutas con Enlaces de Hiperv\u00ednculo: <\/strong>Puedes utilizar enlaces de hiperv\u00ednculo HTML tradicionales para navegar entre p\u00e1ginas, pero es importante que estos enlaces coincidan con las rutas definidas en el enrutador.<\/p>\n\n\n\n
          <a href=\"\/about\">Acerca de<\/a><\/code><\/pre>\n\n\n\n
          Sin embargo, es fundamental recordar que, en aplicaciones Angular, se recomienda utilizar el enrutador incorporado para gestionar rutas y navegar entre p\u00e1ginas, ya que proporciona funcionalidades avanzadas como la carga perezosa, la gesti\u00f3n de rutas anidadas y la manipulaci\u00f3n de par\u00e1metros de ruta. La configuraci\u00f3n de rutas a trav\u00e9s del enrutador Angular es la forma m\u00e1s efectiva y flexible de manejar la navegaci\u00f3n en la mayor\u00eda de las aplicaciones. Este es un resumen de c\u00f3mo configurar el enrutamiento, crear rutas, navegar entre p\u00e1ginas y utilizar rutas anidadas en Angular. El enrutamiento es esencial para crear aplicaciones web con m\u00faltiples vistas y proporcionar una experiencia de navegaci\u00f3n fluida.<\/p>\n","protected":false},"excerpt":{"rendered":"
          4.1 Configuraci\u00f3n de Enrutamiento En Angular, el enrutamiento permite navegar entre diferentes vistas o componentes de la aplicaci\u00f3n sin necesidad de recargar la p\u00e1gina completa. Para configurar el enrutamiento, sigue estos pasos: 4.2 Creaci\u00f3n de Rutas Para navegar entre p\u00e1ginas en Angular, puedes utilizar la directiva routerLink en las plantillas HTML. Por ejemplo: La propiedad […]<\/p>\n","protected":false},"author":1,"featured_media":1967,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[38],"tags":[],"class_list":["post-1966","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular-y-otras-hierbas"],"uagb_featured_image_src":{"full":["https:\/\/stackcodelab.com\/blog\/wp-content\/uploads\/2023\/11\/Enrutamiento-y-Navegacion.jpg",1280,640,false],"thumbnail":["https:\/\/stackcodelab.com\/blog\/wp-content\/uploads\/2023\/11\/Enrutamiento-y-Navegacion-150x150.jpg",150,150,true],"medium":["https:\/\/stackcodelab.com\/blog\/wp-content\/uploads\/2023\/11\/Enrutamiento-y-Navegacion-300x150.jpg",300,150,true],"medium_large":["https:\/\/stackcodelab.com\/blog\/wp-content\/uploads\/2023\/11\/Enrutamiento-y-Navegacion-768x384.jpg",768,384,true],"large":["https:\/\/stackcodelab.com\/blog\/wp-content\/uploads\/2023\/11\/Enrutamiento-y-Navegacion-1024x512.jpg",1024,512,true],"1536x1536":["https:\/\/stackcodelab.com\/blog\/wp-content\/uploads\/2023\/11\/Enrutamiento-y-Navegacion.jpg",1280,640,false],"2048x2048":["https:\/\/stackcodelab.com\/blog\/wp-content\/uploads\/2023\/11\/Enrutamiento-y-Navegacion.jpg",1280,640,false]},"uagb_author_info":{"display_name":"arquitecto","author_link":"https:\/\/stackcodelab.com\/blog\/author\/arquitecto\/"},"uagb_comment_info":0,"uagb_excerpt":"4.1 Configuraci\u00f3n de Enrutamiento En Angular, el enrutamiento permite navegar entre diferentes vistas o componentes de la aplicaci\u00f3n sin necesidad de recargar la p\u00e1gina completa. Para configurar el enrutamiento, sigue estos pasos: 4.2 Creaci\u00f3n de Rutas Para navegar entre p\u00e1ginas en Angular, puedes utilizar la directiva routerLink en las plantillas HTML. Por ejemplo: La propiedad…","_links":{"self":[{"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/posts\/1966","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/comments?post=1966"}],"version-history":[{"count":1,"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/posts\/1966\/revisions"}],"predecessor-version":[{"id":1968,"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/posts\/1966\/revisions\/1968"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/media\/1967"}],"wp:attachment":[{"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/media?parent=1966"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/categories?post=1966"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/tags?post=1966"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}