Directivas, routing, sharing data y pipes
Enviado por Núñez Domínguez Jessica • 4 de Diciembre de 2022 • Tarea • 889 Palabras (4 Páginas) • 64 Visitas
Directivas, routing, sharing data y pipes
Directivas
- Ingrese a su carpeta de componentes.
[pic 1]
- Reemplace el código de su barra de navegación por el siguiente código
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<div class="container-fluid">
<a class="navbar-brand">Angular</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" routerLink="/home" routerLinkActive="active">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" [routerLink]="['directivas']" routerLinkActive="active" >Directivas</a>
</li>
<li class="nav-item">
<a class="nav-link">Mis Materias</a>
</li>
<li class="nav-item">
<a class="nav-link">Mis productos</a>
</li>
</ul>
<div class="d-flex" role="search">
<input class="form-control me-2" type="search" placeholder="Buscar" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Buscar</button>
</div>
</div>
</div>
</nav>
- Genere un nuevo componente llamado directivas, “ng g c --skip-tests=true directivas”
[pic 2]
- Copien y eliminen el código relacionado al laboratorio anterior.
[pic 3]
- En el componente body, cree una variable llamada “mensaje”
[pic 4]
- En el archivo “body.component.html” coloque el mensaje para que este sea visualizado en la aplicación.
[pic 5]
[pic 6]
Routing
- Ingrese a su carpeta de app.
[pic 7]
- Genere el componente routing el cual permitirá a su aplicación comportarse como una SPA, “ng generate module app-routing --flat --module=app”.
[pic 8]
- Reemplace el código del archivo “app-routing.module.ts” por el siguiente código.
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
const ROUTES : Routes = [];
@NgModule({
imports: [RouterModule.forRoot(ROUTES)],
exports: [RouterModule]
})
export class AppRoutingModule { }
- Mapeemos las rutas de nuestros componentes existentes.
[pic 9]
Nota: el valor del “path” corresponde al dato que será referenciado desde nuestra barra de navegación, respecto a “component” se utiliza mapea el componente que estará relacionado con el path.
- En el “header.component.html” se mapeará las referencias hacía nuestras rutas mediante las directivas “routerLink” y “routerLinkActive”.
- Utilice la directiva “routerLink” para colocar la referencia hacía su navegación.
- La directiva “routerLinkActive” permite marcar el elemento que se encuentra activa y permite resaltar este mediante CSS, ejemplo: “active”
[pic 10]
- Agregue la etiqueta “<router-outlet></router-outlet>” y comente la etiqueta “<app-body></app-body>” en el archivo “app.component.html”.
[pic 11]
Pipes y sharing data
- Posicionarse en la carpeta de componentes
[pic 12]
- Crear los siguientes componentes
- Materias: “ng g c --skip-tests=true materias”.
- Materia: “ng g c --skip-tests=true materia”
[pic 13]
- Crear dos nuevas carpetas al nivel de la carpeta compontes “services” y “interfaces”.
[pic 14]
- Posicionarse en la carpeta “services”.
[pic 15]
- Crear un nuevo servicio “ng generate service materias”.
[pic 16]
- Registren su servicio e importen la referencia en el módulo de su aplicación “app.module.ts”.
[pic 17]
Nota: Los servicios deben ser importados en la sección de providers.
- En su carpeta de interfaces, creen una nueva interfaz llamada “Materia.ts” con los siguientes atributos.
[pic 18]
export interface Materia {
...