Guía 14

DAWM / Proyecto05

Actividades previas

En las diferentes páginas HTML que conforman la plantilla de su sitio, identifique:
- El conjunto de etiquetas repetidas entre páginas, p.e.: barra de navegación, pie de página, Cabecera, etc.
- El conjunto de etiquetas HTML con contenido único, en comparación con el resto de páginas de la plantilla.

Actividades

Clona localmente tu repositorio mpa.
Abra el proyecto en VSCode y levante el servidor.

Componentes

Siga las instrucciones de ChatGPT que se encuentran en línea o en la imagen para crear:
Componentes compartidos, como: shared/navbar y shared/footer
Páginas, como: pages/index y pages/about.

por ejemplo:

 ng g c carpeta/nombre-componente

Componentes compartidos

En el componente principal app.component.ts importe el componente Navbar

...
import { NavbarComponent } from './shared/navbar/navbar.component'

@Component({
	...
	imports: [CommonModule, RouterOutlet, NavbarComponent],
	...
})
...

En el componente principal app.component.html
- Extraiga las etiquetas HTML que se encuentran entre  y 
```

<div class="container-fluid sticky-top">
  	...
</div>

```
- Reemplace por el selector del componente Navbar
```

<app-navbar></app-navbar>

```
En el componente Navbar navbar.component.html reemplace el contenido por las etiquetas HTML extraídas.
Reinicie el servidor y revise los cambios en el navegador.

NOTA: Repita el proceso con el componente Footer.

Componente/Página - Index

En el componente principal app.component.ts importe el componente Index

...
import { IndexComponent } from './pages/index/index.component';

@Component({
	...
	imports: [CommonModule, RouterOutlet, ... , IndexComponent],
	...
})
...

En el componente principal app.component.html

Extraiga todas las etiquetas HTML; excepto las etiquetas de los componentes previamente agregados.

Reemplace por el selector del componente Index

<!-- Navbar Start -->
<app-navbar></app-navbar>
<!-- Navbar End -->

<!-- Page Start -->
<app-index></app-index>
<!-- Page End -->

<!-- Footer Start -->
<app-footer></app-footer>
<!-- Footer End -->

En la componente/página Index index.component.html reemplace el contenido por las etiquetas HTML extraídas.
Reinicie el servidor y revise los cambios en el navegador.

HashLocationStrategy

En el archivo app.config.ts, importe el withHashLocation y agréguelo en el provider.

  ...
  import { provideRouter, withHashLocation } from '@angular/router';
  ...

  export const appConfig: ApplicationConfig = {
    providers: [provideRouter(routes,   withHashLocation()   )]
  };

Ruteo

En el archivo de rutas de la aplicación app.routes.ts, importe los componentes/páginas y registre las rutas

  import { Routes } from '@angular/router';
  import { IndexComponent } from './pages/index/index.component';
  import { AboutComponent } from './pages/about/about.component';

  export const routes: Routes = [
        { path: '', component: IndexComponent },
      { path: 'about', component: AboutComponent },
      { path: '**', redirectTo: '' }
  ];

En el componente principal app.component.html

Reemplace la etiqueta <app-index></app-index> por <router-outlet></router-outlet>

<!-- Navbar Start -->
    <app-navbar></app-navbar>
    <!-- Navbar End -->

    <!-- Page Start -->
    <router-outlet></router-outlet>
    <!-- Page End -->

    <!-- Footer Start -->
    <app-footer></app-footer>
    <!-- Footer End -->

En el componente compartido Navbar

En el navbar.component.ts importe los módulos RouterLinkActive y RouterLink.

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
    
import { RouterLinkActive, RouterLink } from '@angular/router';
    
@Component({
  ...
  imports: [CommonModule, RouterLinkActive, RouterLink],
  ...
})

En el navbar.component.html agregue el atributo routerLink con la ruta al componente/página correspondiente.

...
 <a routerLink="/" class="nav-item nav-link">Home</a>
 <a routerLink="/about" class="nav-item nav-link">About</a>
...

Reinicie el servidor y revise los cambios en el navegador.

De la plantilla a las Componente/Página

Identifique las etiquetas HTML con contenido único para cada página. No incluya las etiquetas en los componentes compartidos.
Coloque las etiquetas en el Componente/Página correspondiente.
Reinicie el servidor y revise los cambios en el navegador.

Versionamiento

Versiona local y remotamente el repositorio mpa.

Fundamental

Server-Side Rendering (SSR) y Static Site Generation (SSG/Prerendering) en X

A tiny demo with hybrid rendering in Angular Universal (SSR & SSG) https://t.co/mgLY9yeVN1

At build time:
- Universal prerenders routes without params

At runtime:
- Server tries to render prerendered page
- Server fallbacks to SSR

<5 lines of diff to enable from default setup pic.twitter.com/pvdIp0eYrB
— Minko Gechev (@mgechev) December 8, 2020

Documentación

Los componentes en Angular son los bloques principales en la arquitectura del framework. Los cuales están constituidos por una plantilla html, una clase en typescript, una hoja de estilo y una clase para las pruebas unitarias.

Términos

Componentes, ruteo

Referencias

Angular. (2021). Retrieved 1 December 2021, from https://angular.io/
Introduction to Angular Components and How to Implement It? (20202) https://www.simplilearn.com/tutorials/angular-tutorial/angular-components
Guía de iniciación al data binding en Angular Qué es y cómo se utiliza. (2019). Retrieved 13 July 2022, from https://www.acontracorrientech.com/guia-practica-del-databinding-en-angular/
Angular. (n.d.). Retrieved from https://angular.dev/guide/routing/common-router-tasks#lazy-loading
Hooda, P. (2023). Wildcard Routes in Angular. Retrieved from https://medium.com/@parikshithooda/wildcard-routes-in-angular-15947e0668e7
Moraites, A. (2019). Angular Location Strategies. Retrieved from https://medium.com/@achillesmoraites/angular-location-strategies-df20f3311101