Los componentes son como etiquetas html nuevas que podemos inventarnos para realizar las funciones necesarias. Pueden ser cosas diversas desde una sección de navegación a un formulario. Los componentes son pequeñas partes lógicas de la aplicación, que van a estar representando a un trozo de la pantalla. Un componente es un bloque, que contiene un template, contiene estilos , contiene lógica. Un componente esta compuesto por un archivo .ts , uno html y uno css, también debemos declararlo en mgModule. De cada componente exportamos una clase, que esta clase luego se podrá importar a otros componentes. Una aplicación de angular esta compuesta por componentes. Los componentes son pequeñas partes lógicas de la aplicación, que van a estar representando a un trozo de la pantalla. Y es así como funciona angular, todo lo que aparece en la aplicación son componentes, que son pequeños trozos de pantalla las cuales van a estar controladas por una clase, que esa clase va a ser la que va a dar soporte al componente. La clase tendrá una serie de funcionalidades y la clase también tendrá una plantilla asociada que sera la que mostrara la información correspondiente.
Algunos ejemplos
personasComponent.ts
1.6 KiB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
import { Component, OnInit } from '@angular/core';
import { Message, ConfirmationService } from 'primeng/api';
import { ActivatedRoute, Routes } from '@angular/router';
import { PersonasModel } from '../../models/personas.model';
import { PersonasService } from '../../services/personas.service';
@Component({
selector: 'app-personas',
templateUrl: './personas.component.html',
styleUrls: []
})
export class PersonasComponent implements OnInit {
personas: PersonasModel[];
msgs: Message[] = [];
constructor(private personasService: PersonasService,
private confirmationService: ConfirmationService,
private router: ActivatedRoute) {
}
ngOnInit() {
this.consultarElementos();
const mensaje = this.router.snapshot.paramMap.get('mensaje');
this.msgs = [];
if (mensaje) {
this.msgs.push({
severity: 'success',
summary: 'Informacion',
detail: mensaje
});
}
}
consultarElementos() {
this.personasService.consultarPersonas().subscribe(datos => {
this.personas = datos;
});
}
confirmarEliminar(idEliminar: string, idnombre: string) {
console.log(idEliminar);
this.confirmationService.confirm({
message: `Esta seguro de eliminar a ${idnombre}?`,
accept: () => {
this.personasService.eliminar(idEliminar).subscribe(data => {
this.msgs = [];
this.msgs.push({
severity: 'success',
summary: 'Informacion',
detail: 'Registro eliminado con exito.'
});
this.consultarElementos();
});
}
});
}
}
personasComponent.html
1.16 KiB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<p-messages [(value)]="msgs"></p-messages>
<p-confirmDialog header="Confirmation" icon="pi pi-exclamation-triangle"></p-confirmDialog>
<div class="text-center mt-3">
<h1>LISTA DE USUARIOS</h1>
</div>
<div class="text-right mr-5 mb-5">
<button pButton icon="pi pi-plus" label="Agregar" routerLink="/crear"></button>
</div>
<p-table [value]="personas" [paginator]="true" [rows]="10">
<ng-template pTemplate="header">
<tr class="w-100">
<th>ID</th>
<th>NOMBRE</th>
<th>APELLIDO</th>
<th class="w-25">EMAIL</th>
<th>IP</th>
<th>EDITAR</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-personas>
<tr class="w-100">
<td>{{personas.id}}</td>
<td>{{personas.nombre}}</td>
<td>{{personas.apellido}}</td>
<td class="w-25">{{personas.email}}</td>
<td>{{personas.ip}}</td>
<td>
<button pButton icon="pi pi-trash" class="btn btn-primary"
(click)="confirmarEliminar(personas.id, personas.nombre)"></button>
<button pButton icon="pi pi-pencil" class="btn btn-primary" [routerLink]="['/crear', personas.id]"></button>
</td>
</tr>
</ng-template>
</p-table>
crearPersonaComponent.ts
3.5 KiB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
import { Component, OnInit } from '@angular/core';
import { FormGroup, Validators, FormBuilder } from '@angular/forms';
import { Message } from 'primeng/components/common/message';
import { ActivatedRoute, Router } from '@angular/router';
import { PersonasModel } from '../../models/personas.model';
import { PersonasService } from '../../services/personas.service';
@Component({
selector: 'app-crear-personas',
templateUrl: './crear-personas.component.html',
styleUrls: []
})
export class CrearPersonasComponent implements OnInit {
form: FormGroup;
msgs: Message[] = [];
personas: PersonasModel;
idPersonas: string;
estado: boolean;
verActualizar = false;
constructor(private fb: FormBuilder,
private personasService: PersonasService,
private router: ActivatedRoute,
private routerNav: Router) {
this.form = this.fb.group({
id: [null],
nombre: ['',
[
Validators.required,
Validators.minLength(2),
Validators.maxLength(30),
Validators.pattern(/^[A-Za-z\s\xF1\xD1]+$/)// solo letras
]],
apellido: ['',
[
Validators.required,
Validators.minLength(2),
Validators.maxLength(30),
Validators.pattern(/^[A-Za-z\s\xF1\xD1]+$/)// solo letras
]],
empresa: ['',
[
Validators.required,
Validators.minLength(2),
Validators.maxLength(50),
Validators.pattern(/^[A-Za-z\s\xF1\xD1]+$/)// solo letras
]],
email: ['',
[
Validators.required,
Validators.pattern(/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/),//correo debe tner @ y .com
]],
edad: ['',
[
Validators.required,
Validators.minLength(1),
Validators.maxLength(3),
Validators.pattern(/^([0-9])*$/),//solo numeros
]],
ip: ['',
[
Validators.required,
Validators.pattern(/^(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])$/)
]]
});
}
ngOnInit() {
this.idPersonas = this.router.snapshot.paramMap.get('idPersonas');
this.personasService.consultar(this.idPersonas).subscribe(data => {
this.personas = data;
this.form.patchValue(this.personas);
});
}
guardar() {
let mensaje = '';
if (this.form.invalid) {
this.msgs = [];
this.msgs.push({ severity: 'error', summary: 'Error', detail: 'Debes completar la informacion del formulario.' });
} else {
if (!this.personas) {
this.personas = new PersonasModel();
}
this.personas.nombre = this.form.get('nombre').value;
this.personas.apellido = this.form.get('apellido').value;
this.personas.empresa = this.form.get('empresa').value;
this.personas.email = this.form.get('email').value;
this.personas.edad = this.form.get('edad').value;
this.personas.ip = this.form.get('ip').value;
if (this.idPersonas) {
this.personasService.actualizar(this.personas).subscribe(data => {
this.form.reset();
mensaje = 'Registro actualizado con éxito';
this.routerNav.navigate(['/crearPersonas', mensaje]);
});
} else {
this.personasService.guardar(this.personas).subscribe(data => {
this.form.reset();
mensaje = 'Registro almacenado con exito';
this.routerNav.navigate(['/listarPersonas', mensaje]);
});
}
}
}
}
crearPersonaComponent.html
2.67 KiB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<p-messages [(value)]="msgs"></p-messages>
<div class="container">
<button class="btn btn-primary m-5" routerLink="/listar">Volver</button>
<div class="text-center">
<h1 class="mb-5">INGRESO DE PERSONAS</h1>
</div>
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6">
<!-- FORMULARIO -->
<form [formGroup]="form">
<!-- NOMBRE -->
<div class="form-group">
<input formControlName="nombre" type="text" class="form-control" placeholder="Nombre">
<p-message *ngIf="form.get('nombre').hasError('required')" severity="warn" text="Este campo es requerido">
</p-message>
<p-message *ngIf="form.get('nombre').hasError('minlength') || form.get('nombre').hasError('maxlength')"
severity="warn" text="La cantidad de caracteres es inválido"></p-message>
<p-message *ngIf="form.get('nombre').hasError('pattern')" severity="warn" text="Ingresa solamente letras">
</p-message>
</div>
<!-- APELLIDO -->
<div class="form-group">
<input formControlName="apellido" type="text" class="form-control" placeholder="Apellido">
<p-message *ngIf="form.get('apellido').hasError('required')" severity="warn" text="Este campo es requerido">
</p-message>
<p-message *ngIf="form.get('apellido').hasError('minlength') || form.get('apellido').hasError('maxlength')"
severity="warn" text="La cantidad de caracteres es inválido"></p-message>
<p-message *ngIf="form.get('apellido').hasError('pattern')" severity="warn" text="Ingresa solamente letras">
</p-message>
</div>
<!-- EMAIL -->
<div class="form-group">
<input formControlName="email" type="text" class="form-control" placeholder="Email">
<p-message *ngIf="form.get('email').hasError('required')" severity="warn" text="Este campo es requerido">
</p-message>
<p-message *ngIf="form.get('email').hasError('pattern')" severity="warn" text="Formato de correo inválido">
</p-message>
</div>
<!-- IP -->
<div class="form-group">
<input formControlName="ip" type="text" class="form-control" placeholder="Ip 255.255.255.255">
<p-message *ngIf="form.get('ip').hasError('required')" severity="warn" text="Este campo es requerido">
</p-message>
<p-message *ngIf="form.get('ip').hasError('pattern')" severity="warn" text="Formato incorrecto de IP ">
</p-message>
</div>
<button (click)="guardar()" class="btn btn-primary">Guardar</button>
</form>
</div>
<div class="col-md-3"></div>
</div>
</div>
0 comentarios:
Publicar un comentario