Expandiendo los conocimientos de Angular+16

Sección 5 Expandir Angular
Centro público integrado de formación profesional
Nuevo (desglose IES Campanillas)
Angular 16+ Edición 2023 Sección 5
José García Angular 16+ Edición 2023

¿Qué veremos en esta sección?
Una vez sentadas las bases de Angular en la sección anterior, vamos a seguir
expandiéndolas aquí, con los siguientes temas: Crear proyectos de Angular
1. Profundizar un poco más en los módulos
2. FormsModule
3. ngModel
4. @Inputs
5. @outputs
6. Servicios
7. Métodos en servicios
8. Depuraciones
TS – Temas puntuales de la sección
Aunque todo lo que vamos a a tratar es opcional, la
mayor parte de aplicaciones de Angular usan en
cierto punto cada uno de los temas que están en
esta sección.
La idea es comprender bien los conceptos para que
siempre nos suenen y saber siempre, de donde
viene, que cosa.

Continuación del
proyecto
TS – Nuevo apartado

• ¿Qué necesitamos?
Lo primero es descargar nuestro proyecto desde GitHub.
Creamos un directorio de trabajo, entramos dentro y en la terminal ejecutamos:
# clonar https://github.com/jg...74/02...es.git/
Entramos dentro del directorio y abrimos VSC
# code .
En VSC deberíamos de ver algo tal que así ––––>
Nota: La idea es tener nuestro código en GitHub, bien ordenado, documentado y
listo para mostrar a quien tenga interés.
No olvidemos que GitHub y LindIn, son nuestro porfolio.
TS – Continuación del proyecto

A continuación, construimos nuestro proyecto gracias a los paquetes:
- package.json,
- Package.lock.json
# npm install
Por último, levantamos el servidor:
# ng serve
En resumen, estos son los pasos que hay que realizar para probar cualquier
proyecto Angular que encontremos en GitHub o en cualquier otro repositorio.:
- Clonar
- Reconstruir
- Servir

Módulo DBZ
(Dragon Ball Z)

Comenzamos creando el módulo ’dbz’ ç
¿Recuerdas como se crea un módulo?
Dentro de la carpeta del proyecto escribimos lo siguiente en la terminal:
# ng g m dbz
Consultar la hoja de Atajos: Comandos para generar componentes...

• ¿Qué observamos?
Tenemos:
- Definición de la clase módulo,
- Decorador de la clase módulo,
- Importaciones de los módulos que necesitamos; NgModule, CommonModule
Nota. En este caso CommonModule, no es necesario.
A continuación creamos los siguientes directorios dentro de ‘dbz’:
- components, vistos en la Sección 4, para guardar los pequeños componentes de ‘dbz’
- interfaces, que son muy parecidas a las de TS
- pages, no es más que un componente, que agrupa componentes (páginas de navegación)
- services, (todavía no sé que son… ya lo veremos)

Dentro de ‘pages’ creamos el archivo ‘main-page.component.ts’.
¿Recuerdas como se crea un componente?
Dentro del archivo comenzamos a escribir a-com… y pulsamos Tab o Enter.
En el código del esqueleto del componente modificamos lo siguiente:

• TAREA
Debemos aplicar los cambios necesarios para usar el componente, ‘main-page’
Pensemos lo que debemos tener en cuenta:
- ¿Hemos declarado y exportado el componente
‘MainPageComponent’ en ‘dbz.module.ts’?
- ¿Hemos importado el módulo
‘DbzModule’ en ‘app.module.ts’
- Por último, y no menos importante,
¿estamos usando el selector
‘app-dbz-main-page’ en ‘app.component.html’?
Digamos que hemos recorrido las dependencias desde dentro hacia fuera.

• TAREA
Visualmente sería algo así (desde dentro hacia fuera):
app.module.ts
import { … } from ‘./…’;
imports: […]
app.component.html
<…></…>
<hr>
<app-counter></app-counter>
<hr>
<app-heroes-hero></app-heroes-hero>
<hr>
<app-heroes-list></app-heroes-list>
dbz.module.ts
declarations: […],
exports: […]
main-page-component.ts
selector: ‘…’
templeUrl: ‘./…’

• SOLUCIÓN
Visualmente sería algo así (desde dentro hacia fuera):
app.module.ts
imports: [DbzModule]
app.component.html
<app-dbz-main-page></app-dbz-main-page>
<hr>
<app-counter></app-counter>
<hr>
<app-heroes-hero></app-heroes-hero>
<hr>
<app-heroes-list></app-heroes-list>
dbz.module.ts
declarations: [MainPageComponent],
exports: [MainPageComponent]
main-page-component.ts
selector: ‘…’
templeUrl: ‘./…’

El componente de DBZ no es un ‘stand-alone-component module’ así que
tenemos que declararlo y exportarlo para que pueda ser usado.
Se importa el módulo del cuál depende el componente DBZ, para poder hacer uso
de él en la aplicación.
Haciendo esto último simplificamos las dependencias de nuestra aplicación, porque
para los sucesivos componentes que declaremos en el módulo, estos ya quedaran
importados y listos para ser usados.
Por favor, pensad en Angular como la evolución que hubo desde la arquitectura
clásica (estilo romano) (dondé los muros soportaban la carga del techo), a la Gótica
(dónde la carga la soportaban los pilares)
En el primero las ventanas eran pequeñas, en el segundo se posibilitó la creación
de esas vidrieras tan grandes y coloridas.

Diseño de la
pantalla

• TAREA Diseñar la pantalla para nuestra aplicación: Dragon Ball Z
¿Serían capaces de crear algo así?
Escribimos el siguiente código en ‘main-page.component.html’:
siguiente diapositiva…
TS – Diseño de la pantalla

• SOLUCIÓN
TS – Diseño de la pantalla

Pensemos en
componentes
pequeños

Necesitamos empequeñecer el código anterior, debemos sintetizarlo de tal modo
que la función resultante del componente, podamos reutilizarla en otro lugar.
Ejemplo:
Mandar los datos necesarios a un componente ‘lista’.
Comencemos creando un componente de ‘lista de personajes’.
Recordemos las dos formas que hemos aprendido para crear un componente:
- Desde (CLI): # ng g c <…>
- Manualmente:
creamos el archivo ‘<…>component.ts’ y
dentro del archivo añadimos el código escribiendo ‘a-compone + Tab’
Aprendamos una tercera forma.
TS – Pensemos en componentes pequeños

1 2 Nombre del componente: ‘list’
3 Default component
4 Confirm
5 Debemos tener algo tal que así:

Pasos:
1.- Añadimos dbz… al nombre del selector, ‘dbz-list’
Esto hace que el componente tenga más sentido en nuestra aplicación.
2.- Comprobamos que el componente ‘ListComponent’ está declarado en
‘dbz.module.ts’ y podemos hacer uso de este en ‘main-page-component.ts’
3.- En ‘main-page-component.ts’ sustituimos el código del listado por:
<dbz-list></dbz-list>
4.- Pegamos el código del listado en ‘list-component.html’
Si todo está correcto, nada debió de cambiar en el navegador, pero…
ahora podemos hacer uso de esa lista de personajes en cualquier otro lugar.

• TAREA
Crear el componente ‘add-carácter’ para la parte del código del formulario.
Sigue los pasos realizados para el componente lista.
Recuerda añadir dbz… al nombre del selector una vez creado.

• SOLUCIÓN
1 2
3 4

@Input()

Un decorador de componentes que permite la comunicación entre padre e hijo.
Permite que un componente padre, ‘main-page.component.ts’ envie información a
sus componentes hijos: ‘list.component.ts’, ‘add-character.component.ts’, etc…
Definimos el decorador @Input() en el componente ‘list.component.ts’ para que
muestre los datos de personajes que le proporcionará ‘main-page.component.ts’
La idea es que la página principal envie los datos que quiera mostrar a los
diferentes componentes que la implementen.
Archivos involucrados:
main-page.component.ts/html =>(datos)=> list.componet.ts/html + interfaz(Character)
Escribimos el siguiente código en los archivos correspondientes:
TS – @Input()

TS – @Input()
Uso del Decorador @Input() para la comunicación de datos
desde el componente padre, al componente hijo
character.interface.ts
export interface Character {
name: String;
power: number;
}
main-page.component.ts
import { Character } from '../interfaces/character.interface’;
…
export class MainPageComponent {
public characters: Character [] =[{
name: 'Krillin’,
power: 1000
},{
name: 'Goku’,
power: 9500
},{
name: 'Vegeta’,
power: 7500
}];
}
list.component.ts
import { Component, Input } from '@angular/core’;
import { Character } from '../../interfaces/character.interface';
…
export class ListComponent {
@Input() // No olvidar importar el decorador Input
public characterList: Character[] = [{
name: 'Trunks’,
power: 10
}]
}
main-page.component.html
<dbz-list [characterList]="characters"></dbz-list>
list.component.html
…
<li *ngFor="let character of characterList"
class="list-group-item">
<strong>name: </strong> <span>{{character.name}}</span> -
<strong>Power: </strong> <span>{{character.power}}</span>
</li>
…
1
2
3
El tipo
Character está
definido por
esta interfaz
[characterList]="characters” e @Input() hacen posible la comunicación

Veamos una representación gráfica de lo que ocurre.
TS – @Input()
main-page.component.html/ts
list.component.html/ts
.html
…
<li *ngFor="let character of characterList"
class="list-group-item">
.ts
import { …, Input } from '@angular/core';
import { Character } from '../../interfaces/character.interface';
…
@Input() // No olvidar importar el decorador Input
public characterList: Character[] = [{
…
.html
<dbz-list [characterList]="characters"></dbz-list>
.ts
import { Character } from '../interfaces/character.interface’;
…
public characters: Character [] =[{
…

De la misma forma que la interpolación, permiten la comunicación entre los
archivos :
- list.component.ts
- *ngFor="let character of characterList"
- <strong>name: </strong> <span>{{character.name}}</span>
- list.component.html
- public characterList: Character[] = [{ name: 'Trunks’,
El Decorador, permite la comunicación entre los archivos.
- list.component.ts
- @Input()
- public characterList: Character[] = [{
- main-page.component.html
- <dbz-list [characterList]="characters"></dbz-list>
TS – @Input()

Expandiendo
*ngFor

La directiva ‘ngFor()’ nos ayuda a crear esos elementos HTML que se repiten en
tiempo de ejecución, pero…
¿Tiene ‘ngFor()’ algún índice que podemos usar para referenciar dichos
elementos?
Estos son los principales: index, first, last, eve, odd…
El siguiente Recurso muestra las variantes de diseño de listas en Bootstrap.
TS – Expandiendo *ngFor()

list.component.html
<li *ngFor="let character of characterList; let i=index; let isFirst = first; let isLast = last;
let isEven = even; let isOdd = odd;
"class="list-group-item">
<span class="text-primary">{{i}}. </span>
<strong>Name: </strong> <span>{{character.name}}</span> -
<strong>Power: </strong> <span>{{character.power}}</span><br />
<span>Es el primero: {{isFirst}}</span><br />
<span>Es par: {{isEven}}</span><br />
<span>Es impar:{{isOdd}}</span><br />
<span>Es el último: {{isLast}}</span>
</li>
TS – Expandiendo *ngFor()

ngClass – Clases
basado en
condiciones

Es normal que en tiempo de ejecución queramos que los objetos se presenten de
un modo u otro, e incluso que los datos del mismo objeto, tengan
representaciones diferentes.
A continuación dos técnicas para cambiar la visualización de los datos:
Escribimos el siguiente código en el archivo ‘list.component.html’:
TS – ngClass – Clases (basado en condiciones)

TÉCNICA 1 Hacemos uso de las clases
<h4>Listado</h4>
<ul class="list-group">
<li *ngFor="let character of characterList;
let i=index; let isFirst = first; let isLast = last; let isEven = even; let isOdd = odd;"
class="list-group-item {{ isFirst?'list-group-item-success’:
isEven?'list-group-item-primary’:
isLast?'list-group-item-dark’:’’ }}">
<span class="text-primary">{{i+1}}. </span>
</li>
</ul>

TÉCNICA 2 Hacemos uso de la directiva ‘ngClass’
<h4>Listado</h4>
<ul class="list-group">
<li *ngFor="let character of characterList;
let i=index; let isFirst = first; let isLast = last; let isEven = even; let isOdd = odd;"
class="list-group-item"
[ngClass]="{ 'list-group-item-success': isFirst, 'list-group-item-primary': isEven, 'list-group-item-dark': isLast }">
<span class="text-primary">{{i+1}}. </span>
</li>
</ul>

Angular nos ayuda a simplificar la lógica de programación.
La estructuración del código clarifica el código.
Es verdad que tenemos que adaptarnos a un nivel de abstracción:
- aprender dónde está cada cosa,
- como son las relaciones entre los diferentes objetos,
- herramientas del lenguaje, etc…
pero todo es para un propósito mayor:
- el código es más escalable,
- la programación en equipo se simplifica,
- hay un mayor control sobre lo que se programa (todo se verifica al momento)

FormsModule y
ngModel

Comencemos a trabajar con formularios.
Sintaxis (one-way data-binding):
- (click), esperamos el suceso de eventos
Ejemplo: (click)="increaseBy(1)"
- [value], hacemos uso de los atributos
Ejemplo: [value]="character.name"
Consultar la hoja de Atajos: FormsModule de @angular/forms
TS – FormsModule y ngModel

Sintaxis (two-way data-binding):
- [(ngModel)], con esta directiva conseguimos:
- escuchar el evento de cambio/acción sobre el objeto que se aplica.
- cambiar los valores del código que programa el objeto que mostramos.
Ejemplo: [(ngModel)]="character.name"
Escribimos el siguiente código en los archivos:
- ‘add-cha.component.html/ts’,
- ‘dbz.module.ts’

Muy importante, no olvidar importar el módulo para la gestión de formularios.

Muy importante, usar el intellisense para que automáticamente haga el ‘import’

Error. Dos formas de resolverlo:
- Este error nos indica que hemos olvidado el atributo que los inputs suelen llevar
a la hora de formar parte de un formulario.
- De no querer hacerlo así tendremos que definir el formulario como un
stand-alone.component.
Este se debe a que Angular intenta por todos los medios controlar todos y cada
uno de los objetos con los que tratamos, ya sea bien en el .ts (con el control de
tipos) o bien en el .html (gestionando las referencias de los mismos, así como los
valores que poseen)
- Añadimos el atributo ’name’ a las etiquetas ‘input’
- Ahora sí vemos como el formulario muestra el contenido del atributo ‘character’
El error desaparece.

add-character.component.html add-character.component.ts

La directiva ‘ngModel’ muestra los valores del atributo ‘character’ gracias a los
atributos que hemos añadido en las etiqueta input (one-way binding)
Cuando modificamos los valores estos se modifican automáticamente en el atributo
‘character’ (two-way binding), tal y como se puede comprobar con el método
‘emitCharacter()’ que hemos implementado.
Cuando pulsamos en el botón ‘Agregar’ ya no se produce el refresco propio de los
formularios con ‘submit’
El evento ‘click’ hace que el botón cumpla su función pero no es ese el lugar
correcto para colocarlo, dado que estamos trabajando con un formulario.
Lo correcto es capturar el evento en el propio formulario.
(En el próximo apartado lo modificaremos)

@Output()
Emitir eventos al
padre

Un decorador de componentes que permite la comunicación entre hijo y padre.
Permite que un componente hijo, ‘add-character.component.ts’ envie información
a su componente padre: ‘main-page.component.ts’
Definimos el decorador @Output() en el componente
‘add-character.component.ts’ para que emita un evento, producto de haber
agregado un nuevo personaje, que enviará a ‘main-page.component.ts’
La idea es que la página principal reciba el nuevo dato que hemos introducido en el
componente.
Archivos involucrados:
add-character.component.ts/html =>(evento+datos)=> main-page.componet.ts/html
TS – @Output() Emitir eventos al padre

Comencemos cambiando el evento del botón.
Podríamos poner en el ‘form’ algo tal que así:
<form class="row" (click)="emitCharacter()">
Pero… aprendamos una nueva directiva: ‘ngSubmit’
<form class="row" (ngSubmit)="emitCharacter()">
También, evita que se recargue la página.
Por último, limpiamos el formulario en el método ‘emitCharacter()’
emitCharacter():void {
console.log(this.character);
this.character.name=’’;
this.character.power=0;
}

Trabajemos ahora con el decorador @Output()
Básicamente se trata de una función que le permitirá al padre atender los eventos
del hijo.
En nuestro ejemplo:
- Si agregamos un personaje (add-character.component.html/ts) [hijo],
- Se actualiza la página principal (main-page.component.html/ts) [padre]
Una vez se actualiza la página principal Angular propagará los cambios
automáticamente para que el ‘list.component.html/ts’ muestre correctamente los
datos.
Consultar la hoja de Atajos: @Output y RxJS (subscripciones)

Creamos un objeto que va a
- emitir el personaje nuevo que hemos añadido en el componente
‘add-character.component.ts’ [hijo],
- enviándolo al componente
‘main-page.component.ts’ [padre]
Para eso hacemos uso de la clase ‘EventEmitter’, su método ‘.emit’ y del
decorador ‘@Output()’
Escribimos el siguiente código en los archivos:
- ‘add-character.component.html/ts’,
- ‘main-page.component.html/ts’

add-character.component.ts
import { Component, EventEmitter, Output } from '@angular/core’;
…
export class AddCharacterComponent {
@Output()
public onNewCharacter:EventEmitter<Character> = new EventEmitter();
…
…
this.onNewCharacter.emit(this.character);
Por favor, no olvidéis de hacer uso del intellisense, este añadirá automáticamente
la clase al ‘import’

Ahora necesitamos recibir dicho personaje en nuestra página principal
Creamos un método que va a
- recibir el personaje nuevo que hemos añadido en el componente
‘add-character.component.ts’ [hijo],
- usandolo en el componente
‘main-page.component.ts’ [padre]
Y… ¿cómo recibo el valor de ‘character’ en el método que uso en el .html?
Para eso hacemos uso de ‘$event’
$event, al igual que en JavaScript, es un evento global, propio de los eventos,
que que forma parte del lenguaje TS y del que siempre podemos disponer, aún sin
haberlo creado. Contiene absolutamente toda la información referente al evento,
quien lo originó, cuando, dónde, circunstancias…

<dbz-add-character (onNewCharacter)="onNewCharacter($event)"></dbz-add-character>
onNewCharacter(character: Character): void {
console.log("MainPage");
console.log("character");
}

Uso del Decorador @Output() para la emisión eventos y datos
desde el componente hijo, al componente padre
import { …, EventEmitter, Output } from '@angular/core’;
…
@Output()
public onNewCharacter:EventEmitter<Character> = new
EventEmitter();
…
…
…
…
}
add-character.component.html
…
…
<dbz-add-character
(onNewCharacter)="onNewCharacter($event)"></dbz-add-
character>

add-character.component.html/ts
.ts
…
@Output()
…
…
…
.html
…
<dbz-add-character
character>
.ts
…
}

Formas de depurar
la app

1.- Devtools de Angular
Las herramientas de desarrollo de React y Vue están más logradas pero Angular
tiene un Framework mucho más elaborado.
Es cuestión de tiempo que Angular mejore ese aspecto.
TS – Formas de depurar la app

2.- debugger; Con esta instrucción paramos la ejecución/interpretación del código
y posicionándonos encima de los objetos podremos ver los valores.

3.- breakpoints En la misma interfaz, podemos establecer puntos de interrupción
para ir paso a paso y ver el estado de los objetos.

Añadir personaje al
listado

Tan simple como esto:
this.characters.push(character);
}
Como se comentó, Angular propagará dicho valor entre los diferentes componentes
que hagan uso del mismo.
TS – Añadir personaje al listado

…
@Output()
public onNewCharacter:EventEmitter<Character> = new
EventEmitter();
…
…
…
…
}
add-character.component.html
…
…
<dbz-add-character
character>

add-character.component.html/ts
.html
(ngSubmit)="emitCharacter()”
.ts
…
@Output()
…
…
…
.html
…
<dbz-list [characterList]="characters"
(onDeleteIndex)="onDeleteIndex($event)"></dbz-list>
.ts
…
}

Hemos añadido elementos a la lista.
¿Qué tal si los borramos?
Añadimos el botón de eliminar a cada componente:
El siguiente Recurso muestra el uso del método ‘.splice()’ de arrays.
Eliminar elementos de una lista.
TS – Eliminar personaje del listado

• TAREA
Emitir el índice del personaje sobre el cual se ha pulsado el botón eliminar en el
componente, ‘list.component.html/ts’
Recordemos lo que hicimos al emitir el ‘character’ que queríamos insertar:
- capturar el evento, ‘list.component.html’ y
<button
(click)="emitIndex(i)"
- manejarlo con el método ‘emitIndex(i)’, ‘list.component.ts’
@Output()
public onDeleteIndex:EventEmitter<number> = new EventEmitter();
emitIndex(index: number): void {
this.onDeleteIndex.emit(index);
}

• SOLUCIÓN
list.component.html
…
<button
(click)=”emitIndex(i)"
class="btn btn-danger">X</button>
</li>
list.component.ts
…
console.log({index});
}

• TAREA
Ahora que tenemos el índice del elemento que queremos borrar debemos emitirlo a
través de un evento de Emisión, para que:
- el componente ‘main-page.component.ts’ lo capture, y
- a través de un método ‘onDeleteIndex(index)’ borre el personaje.

list.component.ts
…
@Output()
this.onDeleteIndex.emit(index);
}
…
…
onDeleteIndex(index: number): void {
this.characters.splice(index, 1);
}
list.component.html
…
<button
(click)="emitIndex(i)"
…
<dbz-list [characterList]="characters”
(onDeleteIndex)="onDeleteIndex($event)></dbz-list>

• SOLUCIÓN (ELIMINAR)
Veamos una representación gráfica de lo que tenemos que hacer al borrar.
list.component.html/ts
.html
(ngSubmit)="emitIndex()”
.ts import {… EventEmitter, Output }
@Output()
emitIndex(index: number):void {
this.onDeleteCharacter.emit(this.character);
}
.html
<dbz-list [characterList]="characters”
(onDeleteIndex)="onDeleteIndex($event)></dbz-list>
.ts
onDeleteIndex(index: number): void {
this.characters.splice(index, 1);
}

Servicios

Hasta ahora hemos definido nuestros datos de personajes:
en ‘main-page.component.ts’, pero este no es el mejor sitio para hacerlo,
tampoco es correcto que tengamos nuestra lógica para editarlos, ya que puede que
en otro componente (otras páginas, del mismo nivel, ‘hermanos’) necesiten dicha
información, y compartir dicha información a ese nivel, es complicado.
TS – Servicios
Personajes
public
characters:
Character[] =
[{
name: 'Krillin',
power:
75_000
},
{
name:
'Gohan',
power:
1_950_000
},
{
name:
'Piccolo',
power:
1_200_000
},
{
name: 'Goku',
power:
150_000_000
},
{
name:
'Vegeta',
power:
3_000_000
},
{
name: 'Frieza',
power:
120_000_000
},];

Para garantizar que los datos con los que trabajamos están encapsulados, son de
única instanciación y disponibles a todos los niveles usaremos los servicios
Singleton.
Los servicios Singleton en Angular se maneja mediante Inyección de dependencias
(DI, en inglés)
Y, ¿que es esto de la (DI)?
Pues, un patrón de diseño en el que se garantiza que los constructores de las
clases reciben los objetos ya instanciados, con lo que se garantiza la
composición en vez de la herencia.
El siguiente Recurso muestra el uso de los servicios Singleton.
Es decir, que una clase solo tengan una única instancia.
TS – Servicios

• ¿Qué necesitamos? Ejemplo:
TS – Servicios
Sin Inyección de dependencias Con Inyección de dependencias
class Article{
constructor(){
this.user = new User(); // instancia
this.image = new Image(); // instancia
}
}
/* No es correcto que el constructor de la clase Article se
tenga que encargar de instanciar los elementos que la
constituyen: User e Image
Podemos hablar entonces de acoplamiento, si queremos
usar la Image en otros objetos no podríamos hacerlo */
class Article{
constructor(private user : User, private image: Image){}
}
/* Recuerda: esta es la definición corta de clase */
/* La definición tradicional sería esta: */
class Article{
private user : User;
private image : Image
constructor(user : User, image : Image){
this.image = image;
this.user = user;
}
}
new Article(new User(), new Image()); // instancias
Fuente: https://codigofacilito.com/articulos/angular-di

TS – Servicios
Con Inyección de dependencias
@NgModule({
providers: [User]
})
@Component({})
class Ejemplo{
// En este ejemp. User es el injector token
constructor(private user : User){}
}

Creamos el servicio:
- CLI, en línea de comando
- Angular schematic, botón derecho en carpeta ‘service’, pulsar: ‘Angular: Generate service’
- A mano, creando los archivos: .html, .ts, etc…
Hagámoslo a mano:
Creamos el archivo: ‘dbz.services’
TS – Servicios

dbz.service.ts
Escribimos: a-ser… y vemos como aparecen todos los componentes disponibles.
Elejimos: a-service y automáticamente nos escribe:
import { Injectable } from '@angular/core';
@Injectable({providedIn: 'root’})
export class ServiceNameService {
constructor() { }
}
TS – Servicios

Como hasta ahora, con cualquier componente, un servicio es una clase.
@Inyectable, le dirá a angular que trate a la clase como un servicio.
Todos los servicios en Angular, desde la versión 6, implementan ‘providedIn: ‘root’
Sin o lo tuviera tendríamos que definirlo en la parte de los ‘providers’ en el archivo
‘app.module.ts’
Con esto, Angular define al servicio con un ‘Singleton’ en todo el proyecto.
Es decir, no importa dónde yo use ese servicio que, siempre que solicite el valor de
la instancia, mediante Inyección de dependencias, obtendré los mismos datos, el
mismo contenido, los mismos valores.
TS – Servicios

Modificamos el siguiente fichero:
dbz.service.ts
import { Injectable } from '@angular/core';
import { Character } from '../interfaces/character.interface';
@Injectable({
providedIn: 'root'
})
export class DbzService {
public characters: Character[] = [{
name: 'Krillin’,
power: 75_000
}…
TS – Servicios
Sí, nos hemos traído todo el contenido de la clase en:
‘main-page.component.ts’
y lo hemos pegado en la clase del servicio ‘dbz.service.ts’

import { Component } from '@angular/core';
import { DbzService } from '../services/dbz.sevice’;
@Component({
selector: 'app-dbz-main-page',
templateUrl: './main-page.component.html'
})
constructor(public dbzService: DbzService) { }
}
TS – Servicios

<dbz-list [characterList]="dbzService.characters"
(onDeleteIndex)="dbzService.onDeleteIndex($event)"></dbz-list>
</div>
<div class="col">
<dbz-add-character (onNewCharacter)="dbzService.onNewCharacter($event)"></dbz-add-character>
</div>
…
TS – Servicios

Paquetes externos
uuID

Recordemos que seguimos con el problema de borrar los elementos de la lista en
base al índice que ocupan en el array (o índice de cualquier objeto que lo
implemente)
Los id’s deben de ser únicos para cada personaje.
Si la implementación es correcta, los id’s únicos deben ser algo que quede a cargo
de algún paquete de instalación del proyecto, así nos eximimos de la
responsabilidad de tener colisiones a la hora de identificar a los elementos.
El siguiente Recurso es un paquete para Angular que nos ayuda a generar id’s
únicos con cierto formato.
TS – Paquetes externos uuID

Para Angular existe un paquete que nos ayuda a crear id únicos: ‘uuid’
Instalémoslo:
# npm i uuid
Usémoslo importándolo en el servicio ‘dbz.service.ts’:
import { } from 'uuid’;
Vemos que se produce un error por dependencias
Resolvámoslo instalando la dependencia que se nos indica en el error:
# npm i --save-dev @types/uuid
Ahora sí podemos usarlo correctamente en la importación:
import { v4 as uuid } from 'uuid’;
v4 as uuid, utiliza el generador ‘v4’ de id’s únicos con el álias ‘uuid’

Agreguemos un id único al objeto ‘Character’.
¿Recordáis dónde está implementado el tipo de dicho objeto ‘Character’?
Sí, en la interfaz ‘character.interface.ts’:
export interface Character {
id?: string;
name: String;
power: number;
}
Ya que no vamos a proceder a refactorizar toda la aplicación, lo dejamos como
opcional para no tener que cambiar todo el código… por ahora 

‘dbz.service.ts’
import { v4 as uuid } from 'uuid';
@Injectable({
providedIn: 'root'
})
export class DbzService {
public characters: Character[] = [{
id: uuid(),
name: 'Krillin’,
…

• TAREA
En el servicio ‘dbz.service.ts’ implementamos el método ‘onDeleteId(id: string)’
con el siguiente código:
onDeleteId(id: string): void {
this.characters = this.characters.filter(character => character.id != id);
}
Vemos que nuestra aplicación ha dejado de funcionar.
Las tareas son:
1.- Arreglar los errores producto del la implementación del nuevo método.
2.- Hacer que el id sea obligatorio y no opcional.

• SOLUCIÓN
1.- Arreglar los errores producto del la implementación del nuevo método.
’main-page.component.html’
<dbz-list [characterList]="dbzService.characters"
(onDeleteId)="dbzService.onDeleteId($event)"></dbz-list>
</div>
…
’main-page.component.ts’
Eliminamos el ‘import { Character }…’ El objeto ya no se usa en este componente.

• SOLUCIÓN
// const newCharacter: Character = { id: uuid(), ...character } // operador 'spread’
}
// const newCharacter…
Se usó cuándo no teníamos implementado el ‘id’ en ‘add-character.component.ts’
public character: Character = {
id: uuid(),
name: 'Videl’,
power: 14_000
}

• SOLUCIÓN
‘list.component.html’
…
<button
(click)="emitId(character.id)"
class="btn btn-danger">X</button>
</li>
‘list.component.ts’
@Output()
public onDeleteId:EventEmitter<string> = new
EventEmitter();
emitId(id: string): void {
this.onDeleteId.emit(id);
}

Servicio Privado

Malas prácticas.
Recordemos que al implementar nuestro servicio, toda la lógica de control sobre el
listado de personajes, ‘main-page.component.ts’, migró a la clase de dicho
servicio, ‘dbz.service.ts’
En nuestro ‘main-page.component.ts’ solo quedó el constructor que instancia
dicho servicio mediante Inyección de dependencias.
constructor(public dbzService: DbzService) { }
…
Este servicio se construyo como público y las buenas prácticas aconsejan que sea
privado, lo cuál implica que ya no tengo acceso al mismo desde
’main-page.componente.html’ o cualquier otro componente que lo importe.

Buenas prácticas.
constructor(private dbzService: DbzService) { }
…
Para hacer esto posible debemos crear métodos en la clase que sirvan de puente
para comunicarme con el servicio.

‘main-page.component.html’
…
(onDeleteId)="onDeleteId($event)"></dbz-list>
</div>
<div class="col">
<dbz-add-character (onNewCharacter)="onNewCharacter($event)"></dbz-add-character>
</div>

‘main-page.component.ts’
onNewCharacter(character: Character) {
this.dbzService.addCharacter(character); // refactorizo
}
onDeleteId(id: string): void {
this.dbzService.deleteCharacter(id); // refactorizo
}

addCharacter(character: Character): void {
}
deleteCharacter(id: string): void {
this.characters = this.characters.filter(character => character.id != id);
}

• TAREA (extra)
En esta aplicación de Dragón Ball Z hemos implementado:
- El mostrar los personajes (Listado),
- La creación de personajes (botón ‘Agregar’), y
- La eliminación de personajes (botón ‘X’)
La tarea consiste en implementar el botón ‘U’ (update), para modificar a un
personaje.

Respaldo en
Github

Guardamos nuestro proyecto en GitHub.
1.- ¿Tenemos cuenta en github.com?
- Si la tienes, recuerda el usuario y contraseña de tu cuenta.
- Si no la tienes, crea una cuenta en github.com, recuerda tu usuario y contraseña.
2.- En la terminal (dentro del directorio del proyecto) ’03-expandir-angular-DBZ’):
- # git init
- # git add .
- # git commit –m ‘Fin de la sección 4’
3.- Accedemos a github.com
4.- Creamos el repositorio: ’03-expandir-angular’
TS – Respaldo en Github

5.- Copiamos las instrucciones para:
‘push an existing repository from the command line’
6.- Volvemos a la terminal y aplicamos las instrucciones anteriores:
- # git remote add origin https://github.com/jgarmay674/03-expandir-angular.git
- # git branch -M main
- # git push -u origin main
Error: remote: Support for password authentication was removed on August 13, 2021. remote:
Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-
repositories#cloning-with-https-urls for information on currently recommended modes of
authentication. fatal: Authentication failed for ‘https://github.com/jgarmay674/02-angular-bases.git’

7.- Creamos un token, Personal Access Token (PAT)
1 2 3
- Genera un nuevo token (classic)
- Indica el uso del token y ‘No expiration’
- Pulsa el botón ‘Generar token’

8.- Ahora sí podemos ejecutar:
# git push -u origin main
Solicitará la siguiente información:
- Username (de github.com)
- Password (pegamos el token)
Guardar las credenciales:
Creamos el archivo ‘.netrc’ en el raíz. Contenido:
machine https://github.com/jg...74/02...es.git/
login jg…74
password ghp_NL…7c

Expandiendo los conocimientos de Angular+16

Más contenido relacionado

Similar a Expandiendo los conocimientos de Angular+16 (20)

Último (20)

Expandiendo los conocimientos de Angular+16