Documentos de Académico
Documentos de Profesional
Documentos de Cultura
Angular 4 Desde Cero - Pedro Jiménez Castela PDF
Angular 4 Desde Cero - Pedro Jiménez Castela PDF
net
4 desde Cero
La guía práctica y completa para convertirte en
desarrollador Angular full stack
SAPiens IT
Pedro Jiménez Castela
Angular 4 desde Cero
La guía práctica y completa para convertirte en
desarrollador Angular full stack
Escrito por Pedro Jiménez Castela
© 2.017 Sapiens IT
Todos los derechos reservados. Queda prohibida la reproducción parcial o total de este libro,
transmisión o envío de copias.
El código utilizado en el libro puede ser empleado libremente por los compradores del libro
bajo su responsabilidad.
www.fullengineeringbook.net
www.sapienslearning.com
SAPiens IT
www.fullengineeringbook.net
Índice
www.fullengineeringbook.net
2.8 El Archivo favicon.png
2.9 El Directorio Assets
26
27
3 Módulos y Componentes. 27
3.1 Módulos en Angular. 27
3.2 Componentes en Angular. 30
3.3 Creación de un nuevo componente 36
3.4 Creación de componente con Angular CLI. 40
3.5 Anidado de Componentes 42
4 Data Binding 45
4.1 Interpolación. 46
4.2 Property Binding. 50
4.3 Event Binding. 53
4.4 Two Way Binding 54
5 Directivas. 57
5.1 Directiva ngIf 58
5.2 Directiva ngStyle 62
5.3 Directiva ngClass. 64
5.4 Directiva ngFor 67
5.5 Directiva NgSwitch 71
5.6 Creación de directivas propias. 75
Página 1
www.fullengineeringbook.net
5.7 Utilización de @Input entre componentes 79
5.8 Utilización de @Output entre componentes 84
6 Pipes 89
6.1 Pipe Date 89
6.2 Pipe Uppercase y Lowercase 91
6.3 Pipe Decimal 92
6.4 Pipe Currency 93
6.5 Pipe i18nSelect 94
6.6 Creación de pipes 95
7 Servicios e Inyección de dependencias. 98
7.1 Creación de servicios e inyección en componentes 99
8 Routing 106
8.1 Configuración del routing de una aplicación. 106
8.2 Navegación mediante links 109
9 Formularios 112
9.1 Creación de formularios Template-driven. 112
9.2 Carga de datos en campos select. 120
9.3 Validación de campos mediante HTML 122
9.4 Creación de formularios Reactive. 128
www.fullengineeringbook.net
9.5 Validación de campos programática.
9.6 valueChanges.
136
138
10 Conexión con el servidor. 142
10.1. Servicio HTTP: Post. 144
10.2. Servicio HTTP: Get 148
10.3. Servicio HTTP: Delete 164
10.4. Servicio HTTP: Put 153
11 Gestión de Autorizaciones 168
11.1 Registro 168
11.2 Inicio de sesión 179
11.3 Protección de rutas 189
11.4 Link a registro e inicio de sesión. 191
12 Módulos adicionales. 192
12.1 Creación de módulos 192
12.2 Componentes de módulos adicionales. 193
12.3 Componentes CRUD para el módulo adicional. 197
13 Angular Tips & Tricks 198
13.2 Spinner en carga de elementos HTML. 201
13.3 Elementos de respuesta de atenticación. 203
13.4 Consultas a la base de datos y buscador. 205
Página 2
www.fullengineeringbook.net
13.5 Upload de archivos 212
13.5.1 Configuración de Firebase 212
13.5.2 Componente Upload 214
13.5.3 Componente para Archivos 221
13.5.4 Borrado de Archivos. 225
13.6 Menú en pantalla de inicio 227
14 Despliegue a producción 232
14.1 Build 232
14.2 Despligue a Amazon Web Services S3 Bucket. 233
Anexo Extra I Instalación de Node y NPM 237
Anexo Extra II de Visual Studio Code 237
Anexo Extra III Ciclo de Vida Angular 237
www.fullengineeringbook.net
Página 3
www.fullengineeringbook.net
Introducción
¡Hola! Mi nombre es Pedro y he escrito este libro para que aprendas de manera
práctica el increíble framework Angular, que nos permite crear aplicaciones
modernas en la nube, con todos los requisitos que demandan las empresas más
exigentes.
A lo largo de todo el libro aprenderemos las técnicas Angular para crear los
diferentes componentes de un proyecto y para ponerlo en práctica, vamos a
crear una aplicación partiendo desde cero para llegar a su despliegue en la
nube.
www.fullengineeringbook.net
¡Mil gracias y bienvenido!
Página 4
www.fullengineeringbook.net
1 TypeScript y Web Components
1.1 TypeScript
Página 5
www.fullengineeringbook.net
1.2 Instalación de TypeScript
tsc -v
Que nos devolverá la versión instalada y así tendremos nuestro equipo listo para
trabajar.
www.fullengineeringbook.net
Página 6
www.fullengineeringbook.net
1.3 Tipos de datos en TypeScript
• Strings
• Números
www.fullengineeringbook.net
let decimal: number = 6;
let hexadecimal: number = 0xf00d;
let binario: number = 0b1010;
let octal: number = 0o744;
• Arrays.
Página 7
www.fullengineeringbook.net
• Any
• Booleanos.
https://www.typescriptlang.org/docs/handbook/basic-types.html.
www.fullengineeringbook.net
Si quieres utilizar Visual Studio Code, mi editor favorito, al final del libro
aprendemos a instalarlo y configurarlo.
index.html
<!DOCTYPE html>
<html lang="es">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1"
</head>
Página 8
www.fullengineeringbook.net
<body>
<h1 id="encabezado"></h1> ①
<script type="text/javascript" src="test.js"></script> ②
</body>
</html>
En el cual:
test.ts
En el cual:
Página 9
www.fullengineeringbook.net
Para ello, en la consola de nuestro equipo, dentro de la carpeta typetest
tecleamos:
tsc test.ts
tsc –w test.ts
www.fullengineeringbook.net
Podemos cambiar el valor de la variable nombre para comprobar como
‘transpila’ automáticamente.
test.ts
function imprPantalla(a,b){
return a+b;
}
let b: number = 5;
document.getElementById("encabezado").innerHTML = imprPantalla(a,b);
Página 10
www.fullengineeringbook.net
Lógicamente este código imprimirá por pantalla el número 15. Pero si ahora
modificamos:
Página 11
www.fullengineeringbook.net
1.4 Variables en TypeScript
Pero además, TypeScript permite también emplear la palabra reserva var como
en JavaScript, entonces… ¿cuándo emplear una u otra forma?
test.ts
www.fullengineeringbook.net
let a = 10; ①
if (true){
let a = 15 ②
console.log("Dentro del if a tiene un valor de "+a);
} else {
//
}
En el cual:
Página 12
www.fullengineeringbook.net
Comprobaremos en la consola del navegador, como arroja dos valores
diferentes de acuerdo al código que hemos programado:
test.ts
var a = 10;
if (true){
var a = 15
www.fullengineeringbook.net
console.log("Dentro del if a tiene un valor de "+a);
} else {
//
}
Como la variable pasa a ser global, su valor dentro del if también se utiliza fuera
de esta y por tanto ambos logs muestran el mismo valor en la consola.
Página 13
www.fullengineeringbook.net
1.5 Clases en TypeScript
class NombreClase {
public/private nombrepropiedad: tipo de dato;
….
public/private nombremetodo() {
//código del método
}
…
}
Por ejemplo, en nuestro archivo test.ts sustituimos todo el código para añadir:
www.fullengineeringbook.net
test.ts
class Curso {
public titulo: string; ①
public descripcion: string;
public horas: number;
public inscritos: number;
public getInscritos() { ②
return this.inscritos;
}
public addInscrito(){
this.inscritos++;
}
Página 14
www.fullengineeringbook.net
public remInscrito() {
this.inscritos--;
}
cursoAngular.setInscritos(9);
cursoAngular.addInscrito();
console.log(cursoAngular.getInscritos()); ④
En el cual:
www.fullengineeringbook.net
método addInscrito.
Página 15
www.fullengineeringbook.net
1.6 Constructor en TypeScript
La sintaxis es la siguiente:
class NombreClase {
public/private nombrepropiedad: tipo de dato;
….
constructor () {
this.nombrepropiedad = valor;
…
}
public/private nombremetodo() {
//código del método
}
…
}
www.fullengineeringbook.net
Por ejemplo, podemos sustituir la clase anterior Curso por el siguiente código:
test.ts
class Curso {
public titulo: string;
public descripcion: string;
public horas: number;
public inscritos: number;
}
constructor() {
this.titulo = "Nombre del curso";
this.descripcion = "Lorem ipsum";
this.horas = 20;
this.inscritos = 0;
}
Página 16
www.fullengineeringbook.net
public getInscritos() {
return this.inscritos;
}
public addInscrito(){
this.inscritos++;
}
public remInscrito() {
this.inscritos--;
}
console.log(cursoAngular);
www.fullengineeringbook.net
Comprobaremos en la consola del navegador como se ha creado este objeto
de la clase curso y sus variables han sido inicializadas con los valores por defecto
del constructor.
Página 17
www.fullengineeringbook.net
También podemos emplear parámetros en el constructor. Para ello modificamos
por ejemplo el constructor de la siguiente forma.
…
constructor( titulo, descripcion, horas ) {
this.titulo = titulo;
this.descripcion = descripcion;
this.horas = horas;
this.inscritos = 0; //en este caso se establecerán con el método
}
…
…
var cursoAngular = new Curso("Curso Angular","Lorem...",100);
…
www.fullengineeringbook.net
De esta forma, el objeto se crea con los parámetros introducidos para cada
propiedad.
Página 18
www.fullengineeringbook.net
1.7 Interfaces en TypeScript
Las interfaces, nos permitirán obligar a definir clases con unas determinadas
propiedades o métodos.
Su sintaxis es:
interface NombreInterfaz {
nombrepropiedad: tipodedato;
nombreMetodo(): tipodedato;
Y se implementan en la clase:
test.ts
interface DatosMaestros {
titulo: string;
addInscrito();
}
…
…
class Curso implements DatosMaestros {
…
}
Página 19
www.fullengineeringbook.net
Y eliminamos la propiedad titulo en el constructor:
…
constructor( descripcion, horas ) {
this.descripcion = descripcion;
this.horas = horas;
this.inscritos = 0; //en este caso se establecerán con el método
}
…
https://www.typescriptlang.org/docs/home.html
Página 20
www.fullengineeringbook.net
1.8 Web Components
Los web components son un estándar del W3C, que permiten componer el
desarrollo de aplicaciones web a partir de contenedores dedicados a una cierta
funcionalidad. Estarán compuestos por archivos con el lenguaje de marcado
HTML5, con código JavaScript para la lógica de negocio y con hojas de estilo
CSS para la presentación.
<nombre-del-componente></nombre-del-componente>
www.fullengineeringbook.net
• Shadow DOM. Podría definirse como un elemento DOM ajeno al DOM
de la página web el cual encapsula el componente.
Angular, desde su primera versión a la actual, utiliza los web components como
tecnología para el desarrollo de aplicaciones web, como veremos a lo largo de
todo el libro.
https://developer.mozilla.org/es/docs/Web/Web_Components
Página 21
www.fullengineeringbook.net
2. Configuración de proyectos: Angular-Cli
2.1 Instalación
www.fullengineeringbook.net
línea de comandos, Angular CLI, que realizará ese trabajo por nosotros así como
otras funcionalidades más que conoceremos posteriormente.
Página 22
www.fullengineeringbook.net
2.2 Requisitos Previos
node –v
npm –v
Página 23
www.fullengineeringbook.net
2.4 Creación de un Proyecto en Angular
Una vez instalado Angular CLI, para crear un nuevo proyecto, nos situamos en
el directorio en el que queremos crear el proyecto en la consola y tecleamos:
ng new appCurso
cd appCurso
También podemos comprobar la estructura del proyecto creada por Angular CLI
en el editor que empleemos para el desarrollo de nuestra aplicación.
www.fullengineeringbook.net
Página 24
www.fullengineeringbook.net
También nos podemos fijar como a partir de este package.json, se ha creado
una carpeta de módulos Node JS denominada node_modules, que contiene
todo el código del framework Angular en forma de paquetes, que emplearemos
en nuestra aplicación.
www.fullengineeringbook.net
Angular que vaya a utilizar y por tanto, solo cargue el código necesario para la
funcionalidad que necesite.
Por último, disponemos de un directorio src (por source) donde estará el código
de nuestra aplicación. El resto de archivos y directorios serán tratados más
adelante.
Página 25
www.fullengineeringbook.net
2.5 Arranque de la Aplicación
ng serve
localhost:4200
www.fullengineeringbook.net
Página 26
www.fullengineeringbook.net
2.6 El Archivo index.html
Además del código habitual de un archivo html, este archivo se caracteriza por
incluir la etiqueta <app-root></app-root>, que será la etiqueta del web
component donde se ‘renderice’ todo el código de la aplicación.
Dentro de la etiqueta raíz anterior, podemos añadir un texto que indique que la
aplicación está cargando o bien un spinner, que se mostrará durante la carga de
la aplicación si esta se demora.
Por ejemplo:
src/index.html
…
<app-root><p>Cargando aplicación…</p></app-root>
…
www.fullengineeringbook.net
Si la aplicación es muy ligera, cargará tan rápido el componente raíz, que ese
texto de carga, directamente no se mostrará.
Por ejemplo, nosotros vamos a emplear las fuentes Google y Bootstrap 4, para
lo cual añadimos, dentro del <head></head>:
…
<link href="https://fonts.googleapis.com/css?family=Open+Sans"
rel="stylesheet">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-
alpha.6/css/bootstrap.min.css" integrity="sha384-
Página 27
www.fullengineeringbook.net
rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNU
wEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"
integrity="sha384-
A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed95
0n" crossorigin="anonymous"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"
integrity="sha384-
DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51
bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-
alpha.6/js/bootstrap.min.js" integrity="sha384-
vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn
" crossorigin="anonymous"></script>
…
www.fullengineeringbook.net
Para en nos situamos en la consola del equipo, en el directorio raíz de la
aplicación y pulsamos:
.angular-cli.json
…
styles: [
“../node_modules/bootstrap/dist/css/bootstrap.min.css”,
“styles.css”
]
…
Página 28
www.fullengineeringbook.net
2.7 El Archivo styles.css
http://www.genfavicon.com/es/
Página 29
www.fullengineeringbook.net
3 Módulos y Componentes
www.fullengineeringbook.net
3.1 Módulos en Angular
Página 30
www.fullengineeringbook.net
1. En primer lugar una serie de instrucciones de importación de las librerías
o paquetes Angular, asi como otros elementos externos que
emplearemos en el módulo.
Página 31
www.fullengineeringbook.net
Si nos fijamos en el código del archivo app.module.ts está compuesto de los
tres bloques de código detallados en el párrafo anterior.
src/app/app.module.ts
@NgModule({
declarations: [
AppComponent
], ②
imports: [
BrowserModule,
FormsModule
],
providers: [],
www.fullengineeringbook.net
})
bootstrap: [AppComponent]
Página 32
www.fullengineeringbook.net
• Y bootstrap, recordamos exclusivo de este módulo raíz, que define el
componente AppComponent para inicializar la aplicación.
Podemos definir un componente como una clase Angular que controla una parte
de la aplicación, de ahí que sean englobados como un tipo de vista.
www.fullengineeringbook.net
Selector. Que define la etiqueta html donde se renderiza el componente.
Página 33
www.fullengineeringbook.net
src/app/app.component.ts
@Component({
selector: 'app-root',
templateUrl: './app.component.html', ②
styleUrls: ['./app.component.css']
})
En el cual:
www.fullengineeringbook.net
② El Decorador @Component, con un objeto de metadatos, que en este caso
contiene:
Página 34
www.fullengineeringbook.net
Veamos a continuación el funcionamiento del componente incluido en el
módulo raíz.
src/app/app.component.html
<div style="text-align:center">
<h1>
Welcome to {{title}}!!
</h1>
<img width="300" src="…” />
</div>
<h2>Here are some links to help you start: </h2>
<ul>
<li>
<h2><a target="_blank"
www.fullengineeringbook.net
href="https://angular.io/docs/ts/latest/tutorial/">Tour of Heroes</a></h2>
</li>
<li>
…
</li>
</ul>
Vemos como se trata de un archivo html pero sin la estructura de página web,
ya que se inyectará en en el archivo index.html. Además de las etiquetas html y
los textos, el código incorpora la variable title mediante la sintaxis moustache {{
title }}, de tal forma que esta sintaxis lo enlaza componente y mostrará en
pantalla el valor definido en la clase de este.
Página 35
www.fullengineeringbook.net
Repetimos que el componente se exporta mediante la clase AppComponent,
que es importada en el módulo app.module.ts e incluida dentro de su decorador
en las declaraciones:
src/app/app.module.ts
…
import { AppComponent } from './app.component';
…
…
declarations: [
AppComponent
],
…
Por otra parte, este archivo de módulo app.module.ts es el módulo raíz e incluye
en el decorador la propiedad Bootstrap igualada al componente, para
www.fullengineeringbook.net
finalmente exportar todo el módulo con la clase AppModule:
bootstrap: [AppComponent]
})
export class AppModule { }
¿Dónde empleamos esta clase del módulo que se exporta? En otro archivo
situado en la raíz de la aplicación, denominado main.ts.
src/main.ts
Página 36
www.fullengineeringbook.net
if (environment.production) {
enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule); ②
src/index.html
…
<body>
<app-root></app-root>
www.fullengineeringbook.net
</body>
…
Página 37
www.fullengineeringbook.net
Otra forma práctica de comprobarlo, es sustituir totalmente el contenido del
archivo app.component.html por un mítico ‘¡Hola Mundo!’:
src/app/app.component.html
<div style="text-align:center">
<h1>¡Hola Mundo!</h1>
</div>
www.fullengineeringbook.net
src/app/app.component.ts
…
export class AppComponent {
destino: string = 'Universo';
}
…
src/app/app.component.html
<div style="text-align:center">
<h1>¡Hola {{ destino }}!</h1>
</div>
Página 38
www.fullengineeringbook.net
Volvemos al navegador y comprobamos:
También podemos hacer uso del archivo de estilos CSS del componente,
app.component.ts, en el que por ejemplo escribir la siguiente clase:
src/app/app.component.css
.encabezado {
text-align: center;
color: blueviolet;
}
www.fullengineeringbook.net
De nuevo modificamos el archivo de la plantilla, app.component.html,
sustituyendo todo el código por el siguiente:
src/app/app.component.html
<div class="encabezado">
<h1>¡Hola {{ destino }}!</h1>
</div>
Página 39
www.fullengineeringbook.net
3.3 Creación de un nuevo componente
Aunque se pueden crear con Angular CLI, para crear un nuevo componente de
manera manual, en primer lugar creamos un directorio con el nombre
identificativo del componente, por ejemplo, fechaactual, en el directorio src/app
de la aplicación.
www.fullengineeringbook.net
Dentro del componente creamos de momento dos archivos, el template con el
nombre fechaactual.component.html y el archivo TypeScript
fechaactual.component.ts.
src/app/fechaactual/fechaactual.component.ts
@Component({
selector: 'app-fechaactual', ①
templateUrl: './fechaactual.component.html' ②
Página 40
www.fullengineeringbook.net
})
src/app/fechaactual/fechaactual.component.html
www.fullengineeringbook.net
<p> Sevilla, {{ hoy | date:'d/M/y H:m' }} </p>
src/app/app.module.ts
…
import { FechaactualComponent } from './fechaactual/fechaactual.component'; ①
…
Página 41
www.fullengineeringbook.net
…
declarations: [
AppComponent,
FechaactualComponent ②
],
…
Con esto, nuestro componente queda listo para ser utilizado, y por tanto
tenemos que añadir la etiqueta <app-fechaactual> donde queramos que se
renderice.
www.fullengineeringbook.net
debemos situarlo en la plantilla de este módulo, para organizar correctamente
los componentes.
src/app/app.component.html
<div class="encabezado">
<h1>¡Hola {{ destino }}!</h1>
<app-fechaactual></app-fechaactual>
</div>
Página 42
www.fullengineeringbook.net
Si el código html de la vista del componente es pequeño, como es nuestro caso,
podemos simplificar la aplicación, eliminando el archivo
fechactual.component.html, añadiendo el código de este en el componente
mediante el metadado template.
src/app/fechaactual/fechaactual.component.ts
@Component({
selector: 'app-fechaactual',
template: `
<p> Sevilla, {{ hoy | date:'d/M/y H:m'}}</p>
`
})
Página 43
www.fullengineeringbook.net
3.4 Creación de componente con Angular CLI
Una de las funcionalidades de Angular CLI es la de generar los archivos de, entre
otros, un componente, evitándonos tener que escribir el código común como
hicimos en el apartado anterior.
o su versión abreviada:
ng g c <nombredelcomponente>
Página 44
www.fullengineeringbook.net
src/app/copyright/copyright.component.ts
constructor() { }
ngOnInit() {
}
Más adelante hablaremos del método ngOnInit y del uso del constructor
JavaScript en Angular.
www.fullengineeringbook.net
src/app/copyright/copyright.component.html
src/app/app.component.html
Página 45
www.fullengineeringbook.net
Podemos comprobar en el navegador la correcta implementación del
componente.
www.fullengineeringbook.net
Página 46
www.fullengineeringbook.net
3.5 Anidado de Componentes
Por ejemplo dentro del template del componente copyright, podemos sustituir
el código para incluir la etiqueta del componente fechaactual:
src/app/copyright/copyright.component.html
<app-fechaactual></app-fechaactual>
<p> {{ copyright }} {{ hoy | date:'y'}} </p>
www.fullengineeringbook.net
src/app/app.component.html
Página 47
www.fullengineeringbook.net
src/app/copyright/copyright.component.html
src/app/fechaactual/ fechaactual.component.ts
…
@Component({
selector: 'app-fechaactual',
template: `
<p> Sevilla, {{ hoy | date:'d/M/y H:m'}}</p>
<app-copyright></app-copyright>
`
www.fullengineeringbook.net
})
…
src/app/app.component.html
Página 48
www.fullengineeringbook.net
El resultado en el navegador vuelve a ser de nuevo el mismo, por lo que
comprobamos que disponemos en Angular de la máxima flexibilidad a la hora
de estructurar los diferentes componentes de la aplicación.
www.fullengineeringbook.net
Página 49
www.fullengineeringbook.net
4 Data Binding
En primer lugar tenemos los data binding de tipo One Way de la fuente de datos
(archivo TypeScript) a la vista (archivo HTML). Dentro de este tipo se incluyen:
• Interpolación.
• Property Binding.
• Event Binding.
• Two-way Binding.
Página 50
www.fullengineeringbook.net
4.1 Interpolación
{{ propiedad/objeto/expresión }}
Vamos a crear una clase que se pueda utilizar en toda la aplicación. En primer
lugar creamos un directorio llamado modelos en el directorio app de la
aplicación.
Página 51
www.fullengineeringbook.net
src/app/modelos/alumno.modelo.ts
}
}
En el cual:
www.fullengineeringbook.net
① Definimos las propiedades de la clase Alumno que se genera y exporta.
Página 52
www.fullengineeringbook.net
Dentro de la clase de este nuevo componente en el archivo
viewmodelo.component.ts, importamos la clase Alumno y creamos un objeto
de esta clase llamado alumno1, de la siguiente manera:
src/app/viewmodelo/viewmodelo.component.ts
…
import { Alumno } from '../modelos/alumno.model';
…
…
export class ViewmodeloComponent {
alumno1 = new Alumno (1, 'Juan', 'Gutiérrez', 'Madrid'); } …
<div class="container">
<h4>Información del Alumno</h4>
<hr>
<h5>id: {{ alumno1.id }}</h5>
<hr>
<h5>Nombre: {{ alumno1.nombre }}</h5>
<hr>
<h5>Apellidos: {{ alumno1.apellidos }}</h5>
<hr>
<h5>Ciudad: {{ alumno1.ciudad }}</h5>
<hr>
</div>
Página 53
www.fullengineeringbook.net
En el que empleamos, dentro de la interpolación, la sintaxis de la notación del
punto JavaScript para mostrar el valor de la propiedad de un objeto:
nombredelobjeto.propiedaddelobjeto
src/app/app.component.html
www.fullengineeringbook.net
Página 54
www.fullengineeringbook.net
Y una vez creado, añadimos a la clase del componente en
ejmetodo.component.ts el siguiente código:
src/app/ejmetodo/ejmetodo.component.ts
…
puntuacion = 9;
getPuntuacion() {
return this.puntuacion;
}
…
src/app/ejmetodo/ejmetodo.component.html
www.fullengineeringbook.net
<p> La puntuación obtenida por la mayoría
de desarrolladores de Angular es de {{ getPuntuacion() }} sobre 10</p>
src/app/app.component.html
Página 55
www.fullengineeringbook.net
Comprobamos en el navegador como se carga correctamente:
www.fullengineeringbook.net
Página 56
www.fullengineeringbook.net
4.2 Property Binding
En este caso, se trata de un enlace que relaciona un atributo con una expresión,
con la siguiente sintaxis:
[ atributodelelementoHTML ] = “ expresión “
src/app/ejpropertybinding/ejpropertybinding.component.html
www.fullengineeringbook.net
<input type="text" placeholder="Escribe algo...">
src/app/app.component.html
Página 57
www.fullengineeringbook.net
Hasta ahora nada de particular, pero vamos a ver cómo modificar el
comportamiento del atributo placeholder de manera dinámica mediante
property binding.
src/app/ejpropertybinding/ejpropertybinding.component.ts
…
texto = 'Escribe algo'; ①
constructor() {
setTimeout(() => {
this.texto = 'por favor'; ②
}, 3000);
}
src/app/ejpropertybinding/ejpropertybinding.component.html
Página 58
www.fullengineeringbook.net
Y comprobaremos como, al iniciar el navegador, el input tendrá el texto “Escribe
algo” en su placeholder, y cuando transcurran 3 segundos, pasará a ser “por
favor”.
www.fullengineeringbook.net
Página 59
www.fullengineeringbook.net
4.3 Event Binding
Los enlaces event binding son enlaces de un solo sentido, one way, pero en este
caso desde la vista a la fuente de datos, ya que como su nombre indica, los
desencadena un evento en el cliente web.
evento=”nombreMetodo()”;
src/app/ejeventbinding/ejeventbinding.component.html
En el cual:
Página 60
www.fullengineeringbook.net
Ahora, en el componente, archivo ejeventbinding.component.ts, añadimos el
siguiente código dentro de la clase:
src/app/ejeventbinding/ejeventbinding.component.ts
…
texto = 'Originalmente el texto se carga así';
modTexto() {
this.texto = 'Al pulsar el botón el texto se muestra así';
}
ngOnInit() {
}
…
www.fullengineeringbook.net
src/app/app.component.html
Página 61
www.fullengineeringbook.net
4.4 Two Way Binding
Para finalizar, disponemos de los enlaces two way binding, que enlazan en
ambos sentidos y simultáneamente, los datos de la vista a la fuente de datos y
viceversa.
[( directiva )] = “nombredelapropiedad”
Vamos a crear el último ejemplo de esta serie. Para ello, tecleamos desde la
consola del equipo en el directorio raíz de la aplicación:
www.fullengineeringbook.net
src/app/ej2waybinding/ej2waybinding.component.html
<label>Introduce un valor</label>
<input type="text" class="form-control" [(ngModel)]="texto">
<h3>{{texto}}</h3>
FormsModule
Página 62
www.fullengineeringbook.net
A continuación, en la clase del archivo ej2waybinding.component.ts añadimos
simplemente la declaración de la variable, con un valor de ejemplo.
src/app/ej2waybinding/ej2waybinding.component.ts
…
texto = 'Texto original al cargar';
constructor() { }
ngOnInit() {
}
…
src/app/app.component.html
www.fullengineeringbook.net
<div class="container" >
<h3>Ejemplo de Two Way Binding</h3>
<hr>
<app-ej2waybinding></app- ej2waybinding>
</div>
Página 63
www.fullengineeringbook.net
5 Directivas
Las directivas son clases Angular con instrucciones para crear, formatear e
interaccionar con los elementos HTML en el DOM, y son una de las principales
características de este framework.
Página 64
www.fullengineeringbook.net
5.1 Directiva ngIf
*ngIf=”expresión/propiedad/metodo”
src/app/ejdirecivangif/ejdirecivangif.component.html
www.fullengineeringbook.net
<div class="container">
<label>Nombre y Apellidos</label>
<input type="text"
class="form-control" ①
[(ngModel)]="nombre"
placeholder="Complete su nombre y apellidos">
<button type="submit" class="btn btn-primary" ②
*ngIf="nombre">Enviar</button>
</div>
En el cual:
Página 65
www.fullengineeringbook.net
En la clase del componente en el archivo ejdirectivangif.component.ts
simplemente declaramos la propiedad nombre:
src/app/ejdirecivangif/ejdirecivangif.component.ts
nombre: string;
src/app/app.component.html
La directiva *ngIf se completa con el uso de else para resolver qué ocurre cuando
no se cumpla la condición. Para ello se añade la etiqueta ng-template, con el
contenido que necesitemos y se asocia una id de esa etiqueta a la palabra
reservada else en la misma expresión de *ngIf.
Página 66
www.fullengineeringbook.net
Vamos a comprobarlo con nuestro ejemplo. Sustituimos todo el código de
nuestro archivo ejdirecivangif.component.html por el siguiente:
src/app/ejdirecivangif/ejdirecivangif.component.html
<label>Nombre y Apellidos</label>
<input type="text" class="form-control" [(ngModel)]="nombre"
placeholder="Complete su nombre y apellidos">
<button type="submit" class="btn btn-primary" *ngIf="nombre; else
desactivado">Enviar</button> ①
<ng-template #desactivado> ②
<button type="submit"
class="btn btn-primary"
disabled>Enviar</button>
</ng-template>
En el cual:
www.fullengineeringbook.net
① Añadimos a la directiva *ngIf la palabra else en la expresión y la id de la
etiqueta ng-template.
Página 67
www.fullengineeringbook.net
La directiva *ngIf también permite el empleo de métodos para realizar
funcionalidades con una lógica definida en el componente.
src/app/ejdirecivangif/ejdirecivangif.component.html
www.fullengineeringbook.net
En en el cual:
Página 68
www.fullengineeringbook.net
src/app/ejdirecivangif/ejdirecivangif.component.ts
capital: string; ①
constructor() {
}
ngOnInit() {
}
setResultado(){
return this.capital === "Madrid" ? true : false; ②
}
En el cual:
Página 69
www.fullengineeringbook.net
5.2 Directiva ngStyle
Su sintaxis es básicamente:
[ngStyle]=”{ expresión/propiedad/método }”
src/app/ejdirectivangstyle/ejdirectivangstyle.component.html
www.fullengineeringbook.net
<h4>Introduzca la puntuación del Alumno</h4>
<input type="number" class="form-control" [(ngModel)]="puntuacion">①
<hr>
<h4 style="display: inline-block;">Puntuación obtenida: </h4>
<h4 style="display: inline-block;" ②
[ngStyle]="{color:setColor()}">{{puntuacion}}</h4>
En el cual:
Página 70
www.fullengineeringbook.net
Ahora en la clase del componente en el archivo ejdirectivangstyle.component.ts
añadimos:
src/app/ejdirectivangstyle/ejdirectivangstyle.component.ts
puntuacion: number;
constructor() {
}
ngOnInit() {
}
setColor() {
return this.puntuacion >= 5 ? 'green' : 'red'; ①
}
En el cual además de declarar la propiedad puntuación de tipo número,
añadimos ① el método setColor().
www.fullengineeringbook.net
Este método, devolverá ‘green’ si el valor de puntuación es mayor o igual a 5 o
‘red’ en caso contrario. Ambos valores son válidos para la propiedad color de
CSS, que es la definida en la expresión de [ngStyle].
src/app/app.component.html
Página 71
www.fullengineeringbook.net
De esta manera, ahora se mostrará en el navegador:
www.fullengineeringbook.net
Página 72
www.fullengineeringbook.net
5.3 Directiva ngClass
src/app/ejdirectivangclass/ejdirectivangclass.component.html
www.fullengineeringbook.net
<h4 *ngIf="puntuacion >= 0 && puntuacion <= 10; else aviso" ②
[ngClass]="{ aprobado: puntuacion >= 5,
suspenso: puntuacion <5 }">
Puntuación obtenida: {{ puntuacion }}</h4>
<ng-template #aviso> ③
<h4 *ngIf="puntuacion > 10" class="advertencia">
Introduzca una puntuación menor a 10</h4>
<h4 *ngIf="puntuacion < 0" class="advertencia">
Introduzca una puntuación mayor o igual a 0</h4>
</ng-template>
① Se crea un div con la directiva ngIf para que se muestre en el momento que
se introduzca una puntuación.
Página 73
www.fullengineeringbook.net
③ En caso de que la puntuación no estuviera en el rango anterior, el ng-
template proporciona dos opciones, si estuviera por encima de diez, avisa para
introducir un valor menor y si estuviera por debajo de cero, avisa para introducir
un valor mayor, siendo la clase CSS en ambos casos, advertencia.
Como hemos añadido clases CSS en la plantilla, las añadimos en nuestro archivo
ejdirectivangclass.component.css de la siguiente manera:
src/app/ejdirectivangclass/ejdirectivangclass.component.css
.advertencia {
color: white;
background-color: orange;
padding: 10px;
}
.aprobado {
color: white;
background-color: green;
padding: 10px;
www.fullengineeringbook.net
}
.suspenso {
color: white;
background-color: red;
padding: 10px;
}
src/app/ejdirectivangclass/ejdirectivangclass.component.ts
puntuacion: number;
Página 74
www.fullengineeringbook.net
Y la etiqueta del componente en app.component.html:
src/app/app.component.html
www.fullengineeringbook.net
Página 75
www.fullengineeringbook.net
5.4 Directiva ngFor
En esta sintaxis, se crea dentro del elemento html una variable local con let que
recorrerá el array definido por of y proveniente del componente. Como buena
práctica, el nombre de la variable local será singular y el del array plural.
ng g c ejdirectivangfor -spec
www.fullengineeringbook.net
src/app/ejdirectivangfor/ejdirectivangfor.component.ts
cursos: string[];
constructor() {
this.cursos = ['Angular', 'HTML', 'CSS'];
}
ngOnInit() {
}
Página 76
www.fullengineeringbook.net
Y en la plantilla, ejdirectivangfor.component.html, implementamos la directiva
de la siguiente manera.
src/app/ejdirectivangfor/ejdirectivangfor.component.html
<h3>Cursos Disponibles</h3>
<ul>
① <li *ngFor="let curso of cursos"> ②<h4>{{curso}}</h4></li>
</ul>
En la cual:
src/app/app.component.html
Página 77
www.fullengineeringbook.net
Otra de las formas habituales de empleo de la directiva ngFor es iterar un array
de objetos JSON, la forma estandarizada de objetos JavaScript que utilizan las
bases de datos NoSQL basadas en JavaScript.
nombredelarray: Array<nombredelaclase>;
ng g c arrayobjetos
src/app/arrayobjetos/arrayobjetos.component.ts
…
www.fullengineeringbook.net
import { Alumno } from 'app/modelos/alumno.model';
…
…
public alumnos: Array<Alumno> = [
{id: 1 , nombre: 'Juan', apellidos: 'Gutierrez', ciudad: 'Madrid'},
{id: 2 , nombre: 'Pedro', apellidos: 'Lopez', ciudad: 'Sevilla'}
];
…
Página 78
www.fullengineeringbook.net
Ahora, en la plantilla del componente, en el archivo
arrayobjetos.component.html añadimos el código html de una tabla en la que
iteramos en sus filas el array alumnos con la directiva ngFor:
src/app/arrayobjetos/arrayobjetos.component.html
src/app/app.component.html
Página 79
www.fullengineeringbook.net
Y comprobamos en el navegador:
www.fullengineeringbook.net
Página 80
www.fullengineeringbook.net
5.5 Directiva NgSwitch
Vamos a ver un ejemplo, para lo cual como venimos haciendo, vamos a crear un
nuevo componente en la consola del equipo en la raíz del proyecto:
ng g c ejdirectivangswitch
En primer lugar vamos a crear un array de objetos simples (sin modelo) con
formato de documentos JSON en la clase del componente. Para ello, en el
archivo ejdirectivangswitch.component.ts incoporamos en la clase:
src/app/ejdirectivangswitch/ejdirectivangswitch.component.ts
jugadores: any[] = [
{ nombre: 'Earvin Jhonson', equipo: 'L.A. Lakers'},
{ nombre: 'Larry Bird', equipo: 'Boston Celtics'},
www.fullengineeringbook.net
]
{ nombre: 'Michael Jordan', equipo: 'Chicago Bulls'}
src/app/ejdirectivangswitch/ejdirectivangswitch.component.html
Página 81
www.fullengineeringbook.net
Y sustituimos la etiqueta en el archivo app.component.html por la de este
componente:
src/app/app.component.html
src/app/ejdirectivangswitch/ejdirectivangswitch.component.ts
<div class="text-center">
<ul *ngFor="let jugador of jugadores" [ngSwitch]="jugador.equipo"> ①
<li *ngSwitchCase="'L.A. Lakers'"
class="lakers"><h3>{{jugador.nombre}}</h3><h3 class="equipo"> {{ ②
jugador.equipo}} </h3></li>
<li *ngSwitchCase="'Boston Celtics'"
class="celtics"><h3>{{jugador.nombre}}</h3><h3 class="equipo"> {{
jugador.equipo}} </h3></li>
<li *ngSwitchCase="'Chicago Bulls'"
class="bulls"><h3>{{jugador.nombre}}</h3><h3 class="equipo"> {{
jugador.equipo}} </h3></li>
</ul>
</div>
Página 82
www.fullengineeringbook.net
En el cual:
② Creamos tres etiquetas li, una por cada valor individual de la propiedad
equipo, y en cada una de ellas igualamos ngSwitchCase con cada uno de los
valores, para finalmente y también en cada li incorporar una clase css que se
activará en función del valor de la propiedad equipo.
Nos queda añadir las clases CSS, para lo cual incorporamos al archivo
ejdirectivangswitch.component.css el siguiente código CSS:
src/app/ejdirectivangswitch/ejdirectivangswitch.component.css
ul {
text-align: center;
list-style: none;
}
www.fullengineeringbook.net
.lakers {
max-width: 600px;
height: 120px;
background-image: url("../../assets/LALakers.png");
background-position-x: 10px;
background-position-y: 10px;
background-repeat: no-repeat;
border-style: solid;
border-width: 5px;
border-color: #552582;
margin-top: 30px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
.celtics {
max-width: 600px;
height: 120px;
background-image: url("../../assets/BostonCeltics.png");
background-position-x: 10px;
background-position-y: 10px;
Página 83
www.fullengineeringbook.net
background-repeat: no-repeat;
border-style: solid;
border-width: 5px;
border-color: #008348;
margin-top: 30px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.bulls {
max-width: 600px;
height: 120px;
background-image: url("../../assets/ChicagoBulls.png");
background-position-x: 10px;
background-position-y: 10px;
background-repeat: no-repeat;
border-style: solid;
border-width: 5px;
border-color: #CE1141;
margin-top: 30px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
www.fullengineeringbook.net
.equipo {
color: #707070;
}
Como hemos añadido unas imágenes de logo a las clases CSS, las tenemos que
ubicar en el directorio assets:
Puedes copiar las imágenes de los archivos de este apartado o bien crear el
ejemplo con tus equipos y deporte favorito.
Página 84
www.fullengineeringbook.net
Ahora nos vamos al navegador y comprobamos como cada jugador tiene los
colores de su equipo y que ngSwitch establece la clase CSS en función de valor
de la propiedad equipo de cada objeto.
Página 85
www.fullengineeringbook.net
5.6 Creación de directivas propias
src/app/ejdirectivangswitch/ejdirectivangswitch.component.ts
Página 86
www.fullengineeringbook.net
En nuestro ejemplo, vamos a usar los decoradores HostListener, HostBinding
con lo cual en primer lugar sustituimos la importación por la siguiente:
src/app/ejdirectivangswitch/ejdirectivangswitch.component.ts
@HostListener('mouseover') onOver() { ②
this.mostrar = true;
}
@HostListener('mouseout') onOut() { ③
this.mostrar = false;
}
www.fullengineeringbook.net
En el cual :
En resumen, estamos realizando una directiva que permitirá aplicar una clase
CSS cuando se aproxime el ratón al elemento HTML donde se implemente.
Nuestra nueva directiva estará lista para usar, ya que además de crearla, Angular
CLI modifica el archivo app.module.ts para que esté disponible en toda la
aplicación.
Página 87
www.fullengineeringbook.net
Lo comprobamos accediendo al archivo:
src/app/app.module.ts
…
import { MenuitemDirective } from './menuitem.directive';
…
MenuitemDirective
]
…
src/app/styles.css
.item-orange {
www.fullengineeringbook.net
border-left-style: solid;
border-width: 5px;
border-left-color: orange;
padding-left: 10px;
}
Página 88
www.fullengineeringbook.net
src/app/ejmidirectiva/ejmidirectiva.component.html
<div class="container">
<h1 appMenuitem>Título</h1>
<h1 appMenuitem>Descripción</h1>
<h1 appMenuitem>Precio</h1>
</div>
src/app/app.component.html
Página 89
www.fullengineeringbook.net
5.7 Utilización de @Input entre componentes
Vamos a ver con un ejemplo como se incorpora este decorador. En primer lugar
creamos un componente padre desde la consola en el directorio raíz del
proyecto con:
src/app/padre/padre.component.html
www.fullengineeringbook.net
<h2>Componente Padre</h2>
<div style=" border-style: solid; border-width: 2px; border-color: orange;
padding: 10px">
</div>
src/app/app.component.html
Página 90
www.fullengineeringbook.net
Comprobamos en el navegador su correcto funcionamiento:
src/app/hijo/hijo.component.ts
src/app/hijo/hijo.component.html
www.fullengineeringbook.net
<h4>{{aviso}}</h4>
src/app/padre/padre.component.html
<h2>Componente Padre</h2>
<div style=" border-style: solid; border-width: 2px; border-color: orange;
padding: 10px">
<app-hijo></app-hijo>
</div>
Página 91
www.fullengineeringbook.net
Comprobamos finalmente en el navegador:
Hasta ahora hemos empleado las técnicas de Angular sin mayor novedad, pero
podemos incluir valores en las propiedades del hijo a través del padre, es decir
compartir las propiedades entre dos componentes.
src/app/hijo/hijo.component.ts
www.fullengineeringbook.net
@Component({
selector: 'app-hijo',
templateUrl: './hijo.component.html',
styleUrls: ['./hijo.component.css']
})
export class HijoComponent implements OnInit {
constructor() { }
ngOnInit() {
}
Página 92
www.fullengineeringbook.net
En el cual:
src/app/padre/padre.component.ts
Y podemos usar la propiedad del hijo para usarla en su plantilla con un valor
proveniente del padre. Para ello en el archivo padre.component.html
modificamos la etiqueta del hijo para añadir esta sintaxis:
www.fullengineeringbook.net
src/app/padre/padre.component.html
<app-hijo [aviso]="valorPadre"></app-hijo>
Página 93
www.fullengineeringbook.net
Incluso podemos hacerlo más complejo introduciendo un array de valores desde
el padre a la plantilla del hijo. Por ejemplo, en el archivo del componente
padre.component.ts, cambiamos la propiedad por este array:
src/app/padre/padre.component.ts
src/app/padre/padre.component.html
Página 94
www.fullengineeringbook.net
5.8 Utilización de @Output entre componentes
src/app/hijo/hijo.component.html
En el cual:
① Añadimos al aviso una directiva ngClass para que aplique la clase tachado si
el valor de leído es true.
Página 95
www.fullengineeringbook.net
A continuación vamos a crear la propiedad leido y el método marcar en el
archivo hijo.component.ts:
src/app/hijo/hijo.component.ts
…
@Input() aviso: string;
marcar(event) {
this.leido = !this.leido;
}
…
src/app/hijo/hijo.component.css
www.fullengineeringbook.net
.tachado {
text-decoration:line-through;
}
Página 96
www.fullengineeringbook.net
Pues bien, la funcionalidad Output permite desencadenar un método del
componente padre a partir de un método del componente hijo y pasar datos
como parámetros.
src/app/hijo/hijo.component.ts
…
import { Component, OnInit, Input, Output, EventEmitter } from
'@angular/core';
…
…
@Output() mensajeMarcado = new EventEmitter();
…
www.fullengineeringbook.net
Para finalizar en este archivo, creamos en la clase un nuevo método detectar:
…
detectar(event) {
this.mensaje = this.aviso;
this.mensajeMarcado.emit(this.mensaje);
}
…
Que detectará qué aviso se ha marcado y los emite como parámetro mensaje
del método mensajeMarcado.
Página 97
www.fullengineeringbook.net
A continuación en la template del componente hijo, hijo.component.html,
añadimos al botón de marcado de aviso y el método detectar, sustituyendo el
código del botón por el siguiente:
src/app/hijo/hijo.component.html
…
<button *ngIf="leido == false" class="btn btn-success pull-right"
(click)="marcar() ; detectar($event)">Marcar como Leído</button>
…
src/app/padre/padre.component.html
www.fullengineeringbook.net
…
<app-hijo *ngFor="let avisop of avisos" [aviso]="avisop"
(mensajeMarcado)="mostrarMensaje($event)"></app-hijo>
…
…
<h3 style="text-align:center"> {{ texto }}</h3>
</div>
Página 98
www.fullengineeringbook.net
Por último nos queda modificar el componente padre en el archivo
padre.component.ts. En primer lugar creamos la propiedad texto que se
mostrará en el mensaje añadiendo:
src/app/padre/padre.component.html
…
texto: string;
…
mostrarMensaje(event) {
this.texto = event + ' marcado como leido';
}
www.fullengineeringbook.net
Finalizado el código, podemos comprobar en el navegador como al marcar
cualquier aviso, se muestra el mensaje con el aviso ‘marcado como leído’ gracias
al enlace de métodos mediante Output entre diferentes componentes.
Página 99
www.fullengineeringbook.net
6 Pipes
Los pipes son elementos de código de Angular que permiten modificar la salida
por pantalla o vista de los datos que empleamos en la aplicación.
{{ dato | nombredelpipe:’opciones’ }}
www.fullengineeringbook.net
Página 100
www.fullengineeringbook.net
6.1 Pipe Date
src/app/fechaactual/fechaactual.component.ts
…
hoy: number = new Date();
…
src/app/fechaactual/fechaactual.component.html
…
www.fullengineeringbook.net
<p> Sevilla, {{ hoy | date:'d/M/y H:m'}}</p>
…
Símbolo Componente
y año
M mes
d día
h hora en formato 12 horas
H hora en formato 24 horas
m minutos
s segundos
Página 101
www.fullengineeringbook.net
Si, por ejemplo modificamos en la plantilla nuestro código, por este:
src/app/fechaactual/fechaactual.component.html
…
<p> Sevilla, {{ hoy | date:'d-M-y'}} a las {{ hoy | date:'H:m Z'}}</p>…
src/app/fechaactual/fechaactual.component.html
…
<p> {{ ciudad | uppercase}}, {{ hoy | date:'d-M-y' | uppercase}} a las {{ hoy |
date:'H:m Z'}}</p>
…
Página 102
www.fullengineeringbook.net
Y en la clase añadimos:
src/app/fechaactual/fechaactual.component.ts
…
ciudad: string = “Sevilla”;
…
www.fullengineeringbook.net
Página 103
www.fullengineeringbook.net
6.3 Pipe Decimal
src/app/fechaactual/fechaactual.component.html
…
<p> El resultado es {{ resultado | number:’2.2-2’}}</p>
…
…
resultado: number = 1.148;
…
Y comprobamos en el navegador:
Página 104
www.fullengineeringbook.net
6.4 Pipe Currency
src/app/fechaactual/fechaactual.component.html
…
<p>La cotización actual del dólar es de {{ dolareuro | currency:'EUR':true}}</p>
…
Donde al pipe currency se añade el código ISO de la moneda y true para que
muestre su símbolo.
…
dolareuro: number = 0.94;
…
Página 105
www.fullengineeringbook.net
6.5 Pipe i18nSelect
src/app/fechaactual/fechaactual.component.ts
…
nombre: string = 'Laura';
sexo: string = 'mujer';
encabezamiento: any = { 'hombre':'Estimado', 'mujer':'Estimada' }
…
www.fullengineeringbook.net
src/app/fechaactual/fechaactual.component.html
…
<p> {{ sexo | i18nSelect: encabezamiento }} {{ nombre }} </p>
…
Página 106
www.fullengineeringbook.net
6.6 Creación de pipes
Angular permite también crear pipes propios para resolver cualquier necesidad
de nuestra aplicación.
Vamos a ver como se crean con un ejemplo para resolver el símbolo euro en
nuestros valores de moneda.
Podemos crear un pipe de nombre euro con Angular CLI, para lo cual en la
consola del equipo y en el directorio del proyecto, tecleamos:
src/app/euro.pipe.ts
www.fullengineeringbook.net
…
transform(value: any, args?: any): any {
const euro = value + ' €'; ①
return euro; ②
}
…
Página 107
www.fullengineeringbook.net
Comprobamos como nuestro pipe está importado y añadido al array
correspondiente en el archivo app.module.ts, labor que ha realizado
automáticamente Angular CLI:
src/app/app.module.ts
…
import { EuroPipe } from './euro.pipe';
…
…
EuroPipe
],
…
Por tanto, nuestro pipe ya está creado y listo para poder usar en toda la
aplicación Angular.
src/app/fechaactual/fechaactual.component.html
…
<p>La cotización actual del dólar es de {{ dolareuro | euro }}</p>
…
src/app/fechaactual/fechaactual.component.ts
…
dolareuro: number = 0.94;
…
Página 108
www.fullengineeringbook.net
Y ahora comprobamos en el navegador como se aplica el filtro con el formato
que buscamos:
www.fullengineeringbook.net
Página 109
www.fullengineeringbook.net
7 Servicios e Inyección de dependencias
Una vez que hemos visto las principales características de Angular, llega el
momento de crear un nuevo proyecto de aplicación en el que afianzar lo
aprendido e implementar de manera práctica el resto de funcionalidades del
framework.
www.fullengineeringbook.net
Por ello, antes de continuar con los servicios en Angular, vamos a crear una
nueva aplicación.
Para ello, creamos en nuestro equipo un nuevo directorio para este nuevo
proyecto denominado appcompras y accedemos a el desde la consola del
equipo, en la que tecleamos:
ng new appCompras
Página 110
www.fullengineeringbook.net
7.1 Creación de servicios e inyección en componentes
Para ello, desde el directorio raíz del proyecto tecleamos en la consola del
equipo:
src/app/servicios/proveedores.service.ts
www.fullengineeringbook.net
import { Injectable } from '@angular/core';
@Injectable()
export class ProveedoresService {
constructor() { }
Página 111
www.fullengineeringbook.net
src/app/app.module.ts
…
import { ProveedoresService } from 'app/servicios/proveedores.service';
…
…
providers: [ProveedoresService],
…
src/app/servicios/proveedores.service.ts
www.fullengineeringbook.net
getProveedores(){
return 'Mensaje desde el servicio';
}
Página 112
www.fullengineeringbook.net
Vamos a crear un primer grupo de componentes en nuestra aplicación
empresarial de compras para tener el código de la aplicación bien organizado.
src/app/proveedores/proveedores.component.ts
…
import { ProveedoresService } from '../servicios/proveedores.service';
…
mensaje: string; ①
Página 113
www.fullengineeringbook.net
ngOnInit() {
this.mensaje = this.proveedoresService.getProveedores( );③
}
En el cual:
www.fullengineeringbook.net
src/app/proveedores/proveedores.component.html
src/app/app.module.html
<div class="container">
<app-proveedores></app-proveedores>
</div>
Página 114
www.fullengineeringbook.net
Como estamos en un nuevo proyecto, añadimos en el head del archivo
index.html los CDN de Google Fonts, Bootstrap y JQuery ( los puedes copiar
de los archivos de este apartado):
src/index.html
<link href="https://fonts.googleapis.com/css?family=Open+Sans"
rel="stylesheet">
<link … resto de CDNs…
…
ng serve
www.fullengineeringbook.net
Este sencillo ejemplo, simplemente nos ha servido para comprender como se
implementa un servicio pero vemos que no ha aportado nada que no pueda
hacer un componente. Lo normal es que el servicio suministre datos a uno o
varios componentes.
Página 115
www.fullengineeringbook.net
src/app/servicios/proveedores.service.ts
@Injectable()
export class ProveedoresService {
proveedores: any = [ ①
{
nombre: 'Telefónica',
cif: 'B12345678',
direccion: 'Paseo de la Castellana, 100',
cp: '28.010',
localidad: 'Madrid',
provincia: 'Madrid',
telefono: 911111111,
email: '[email protected]',
contacto: 'Juan Pérez'
},
www.fullengineeringbook.net
{
nombre: 'Iberdrola',
cif: 'B87654321',
direccion: 'Príncipe de Vergara, 200',
cp: '28.015',
localidad: 'Madrid',
provincia: 'Madrid',
telefono: 922222222,
email: '[email protected]',
contacto: 'Laura Martínez'
}
]
getProveedores(){
return this.proveedores; ②
}
}
Página 116
www.fullengineeringbook.net
En el cual:
src/app/proveedores/proveedores.component.ts
…
www.fullengineeringbook.net
proveedores: any;
…
ngOnInit() {
this.proveedores = this.proveedoresService.getProveedores();
}
}
Ahora modificamos la plantilla para obtener una tabla con algunos de los
campos de cada proveedor, en el archivo proveedores.component.html:
Página 117
www.fullengineeringbook.net
src/app/proveedores/proveedores.component.html
<h3>Listado de Proveedores</h3>
<table class="table table-bordered table-striped tabla"
style="margin-top: 40px;">
<thead>
<tr class="filters">
<th>Nombre</th>
<th>Correo Electrónico</th>
<th>Telefono</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let proveedor of proveedores">
<td>{{ proveedor.nombre }}</td>
<td><a href="mailto:{{ proveedor.email }}">{{ proveedor.email }}</a></td>
<td>{{ proveedor.telefono }}</td>
</tr>
</tbody>
www.fullengineeringbook.net
</table>
Página 118
www.fullengineeringbook.net
8 Routing
www.fullengineeringbook.net
En este nuevo componente, simplemente modificamos la plantilla en el archivo
inicio.component.html para añadir:
src/app/inicio/inicio.component.html
Página 119
www.fullengineeringbook.net
src/app/app.module.ts
…
import { Routes, RouterModule } from '@angular/router';…
…
const routes: Routes = [
{ path: '', component: InicioComponent },
{ path: 'proveedores', component: ProveedoresComponent }
];
…
Esta constante de la clase Routes, contiene un array de objetos, con las rutas
www.fullengineeringbook.net
para cada componente. En nuestro ejemplo la url raíz, es decir /, se asocia al
componente Inicio, y la url proveedores, es decir /proveedores, se asocia al
componente Proveedores.
…
imports: [
BrowserModule,
RouterModule.forRoot(routes)
],
…
Página 120
www.fullengineeringbook.net
Para ello, sustituimos el código de app.component.html por el siguiente:
src/app/app.component.html
<div class="container">
<router-outlet></router-outlet>
</div>
También podemos añadir una máscara para que cuando se teclee una ruta que
www.fullengineeringbook.net
no exista, redirija al componente Inicio (o a una vista de plantilla 404 en caso
necesario).
src/app/app.module.ts
Página 121
www.fullengineeringbook.net
8.2 Navegación mediante links
• SPA. Los links llaman a los componentes sin refrescar la web, lo que
permite aumentar la velocidad de ejecución de la aplicación y conservar
los estados de la misma, sobre todo en la gestión de datos.
Para comprobar la navegación por links vamos a crear una barra de navegación
de tipo header. Para ello creamos un nuevo componente con el mismo nombre,
en la consola del equipo:
Página 122
www.fullengineeringbook.net
<li class="nav-item">
<a class="nav-link" routerLink="/proveedores">Proveedores </a> ②
</li>
</ul>
</div>
</nav>
src/app/app.component.html
<app-header></app-header>
www.fullengineeringbook.net
<div class="container">
<router-outlet></router-outlet>
</div>
Página 123
www.fullengineeringbook.net
Para ello sustituimos de nuevo los links de la barra en header.component.html
por:
src/app/header/header.component.html
…
<li routerLinkActive="active"
[routerLinkActiveOptions]="{exact:true}"><a routerLink="/" >Inicio
</a></li>
<li routerLinkActive="active"><a
routerLink="/proveedores">Proveedores</a></li>
…
www.fullengineeringbook.net
También añadimos a una clase css al componente header para que establezca
un margen inferior que separe la barra de navegación del componente que
tenga debajo. Añadimos al archivo header.component.css:
src/app/header/header.component.css
nav {
margin-bottom: 40px;
}
Página 124
www.fullengineeringbook.net
y obtendremos en el navegador el resultado deseado.
www.fullengineeringbook.net
Página 125
www.fullengineeringbook.net
9 Formularios
Los formularios son los elementos clave de una aplicación, ya que son la forma
que tiene el usuario de introducir datos para realizar las funciones más
importantes de la misma, como por ejemplo, crear registros o realizar
búsquedas.
Vamos a crear un formulario con esta técnica. Para ello en primer lugar, creamos
un nuevo componente para añadir nuevos registros de proveedores a nuestra
aplicación, completando en la consola:
www.fullengineeringbook.net
Comenzamos añadiendo en la plantilla del componente, archivo
addprovee.component.html el código html de un formulario con los campos
que necesitamos:
src/app/proveedores/addprovee/addprovee.component.html
<div class="row">
<div class="col-xs-12 col-sm-10 col-md-8 col-sm-offset-1 col-md-offset 2">
<h2>Añadir nuevo proveedor</h2>
<form>
<div class="form-group">
<label for="nombre">Nombre</label>
<input type="text"
class="form-control"
id="nombre">
</div>
<div class="form-group">
<label for="cif">C.I.F.</label>
<input type="text"
Página 126
www.fullengineeringbook.net
class="form-control"
id="cif">
</div>
<div class="form-group">
<label for="direccion">Dirección</label>
<input type="text"
class="form-control"
id="direccion">
</div>
<div class="form-group">
<label for="cp">Código Postal</label>
<input type="text"
class="form-control"
id="cp">
</div>
<div class="form-group">
<label for="localidad">Localidad</label>
<input type="text"
class="form-control"
id="localidad" >
</div>
www.fullengineeringbook.net
<div class="form-group">
<label for="provincia">Provincia</label>
<input type="text"
class="form-control"
id="provincia" >
</div>
<div class="form-group">
<label for="telefono">Teléfono</label>
<input type="number"
class="form-control"
id="telefono" >
</div>
<div class="form-group">
<label for="email">Correo Electrónico</label>
<input type="text"
class="form-control"
id="email">
</div>
<div class="form-group">
<label for="contacto">Persona de contacto</label>
Página 127
www.fullengineeringbook.net
<input type="text"
class="form-control"
id="contacto">
</div>
<button type="submit"
class="btn btn-success">
Añadir Proveedor</button>
</form>
<hr>
</div>
</div>
src/app/app.module.ts
…
www.fullengineeringbook.net
{ path: 'addprovee', component: AddproveeComponent },
…
src/app/proveedores/proveedores/proveedores.component.html
…
<h1>Listado de Proveedores</h1>
<a class="btn btn-primary float-md-right" routerLink="/addprovee">Añadir
nuevo proveedor</a>
<br>
…
Página 128
www.fullengineeringbook.net
De esta manera si navegamos al listado de proveedores disponemos de un
botón para añadir nuevos proveedores:
www.fullengineeringbook.net
Página 129
www.fullengineeringbook.net
Por tanto, añadimos al código del archivo app.module.ts:
src/app/app.module.ts
…
import { FormsModule } from '@angular/forms';
…
imports: [
BrowserModule,
RouterModule.forRoot(routes),
FormsModule
],
El siguiente paso es programar el objeto que recibirá los valores del formulario
www.fullengineeringbook.net
en nuestro componente, para ello vamos a añadir las siguientes líneas de código
en la clase del archivo addprovee.component.ts:
src/app/proveedores/addprovee/addprovee.component.ts
…
proveedor: any;
constructor(){
this.proveedor = {
nombre: '',
cif: '',
direccion: '',
cp: '',
localidad: '',
provincia: '',
telefono: null,
email: '',
Página 130
www.fullengineeringbook.net
contacto: ''
}
}
…
src/app/proveedores/addprovee/addprovee.component.html
…
<form (ngSubmit)="onSubmit()" #formpro="ngForm" >
…
www.fullengineeringbook.net
En la cual hemos añado una id local llamada formpro para identificar nuestro
formulario y lo asociamos a la directiva ngForm de Angular.
Esta directiva hará que los valores del formulario se asignen a un objeto llamado
formpro cuando ejecutemos el submit del formulario, que a su vez hará que se
ejecute el método onSubmit( ) en el componente.
Además, tenemos que modificar cada campo del formulario, para añadir
ngModel y el atributo name con el nombre del campo:
…
<div class="form-group">
<label for="nombre">Nombre</label>
<input type="text"
class="form-control"
id="nombre"
ngModel
name="nombre">
</div>
… <! --repetir en todos los componentes -- >
Página 131
www.fullengineeringbook.net
A continuación, regresamos al componente para, con los datos de nuestro
formulario html, enlazarlos al objeto. De nuevo en addprovee.component.ts
modificamos los import:
src/app/proveedores/addprovee/addprovee.component.ts
…
@ViewChild('formpro') formpro: NgForm;
proveedor: any;
…
www.fullengineeringbook.net
Y posteriormente, después del constructor donde inicializamos el objeto
proveedor, añadimos el método onSubmit():
…
onSubmit(){
this.proveedor.nombre = this.formpro.value.nombre;
this.proveedor.cif = this.formpro.value.cif;
this.proveedor.direccion = this.formpro.value.direccion;
this.proveedor.cp = this.formpro.value.cp;
this.proveedor.localidad = this.formpro.value.localidad;
this.proveedor.provincia = this.formpro.value.provincia;
this.proveedor.telefono = this.formpro.value.telefono;
this.proveedor.email = this.formpro.value.email;
this.proveedor.contacto = this.formpro.value.contacto;
this.formpro.reset();
}
…
Página 132
www.fullengineeringbook.net
En este método, que se lanza con el botón del formulario, se pasará el valor del
objeto formpro y de cada propiedad a su correspondiente en el objeto
proveedor del componente.
src/app/proveedores/addprovee/addprovee.component.html
…
</form>
<hr>
<pre>{{ proveedor | json }}</pre>
…
Página 133
www.fullengineeringbook.net
9.2 Carga de datos en campos select
Para llevar a cabo este proceso, en primer lugar añadimos a la clase del
componente (antes del constructor) en el archivo addprovee.component.ts el
siguiente array:
src/app/proveedores/addprovee/addprovee.component.ts
…
provincias: string[] = [
'Álava','Albacete','Alicante','Almería','Asturias','Ávila','Badajoz','Barcelona',
'Burgos', 'Cáceres', 'Cádiz','Cantabria','Castellón','Ciudad Real','Córdoba',
www.fullengineeringbook.net
'La Coruña','Cuenca','Gerona','Granada','Guadalajara',
'Guipúzcoa','Huelva','Huesca','IslasBaleares','Jaén','León','Lérida','Lugo',
'Madrid', 'Málaga','Murcia','Navarra','Orense','Palencia','Las Palmas'
'Pontevedra','La Rioja','Salamanca','Segovia','Sevilla','Soria','Tarragona',
'Santa Cruz de Tenerife', 'Teruel', 'Toledo', 'Valencia', 'Valladolid', 'Vizcaya',
'Zamora','Zaragoza' ]
…
Página 134
www.fullengineeringbook.net
src/app/proveedores/addprovee/addprovee.component.html
…
<div class="form-group">
<label for="provincia">Provincia</label>
<select class="form-control"
id="provincia"
ngModel
name="provincia">
<option value="">Seleccione la provincia</option>
<option *ngFor="let provincia of provincias"
[value]="provincia">{{provincia}} </option>
</select>
</div>
…
www.fullengineeringbook.net
Página 135
www.fullengineeringbook.net
9.3 Validación de campos mediante HTML
Gracias a los estados de cada campo, Angular permite implementar clases CSS
y elementos HTML dinámicos de ayuda al usuario, para completar los
formularios.
Para aprender esta funcionalidad, vamos a comenzar por añadir al campo email
los atributos HTML5 required e email en el archivo addprovee.component.html:
src/app/proveedores/addprovee/addprovee.component.html
…
<div class="form-group">
<label for="email">Correo Electrónico</label>
<input type="text"
class="form-control"
www.fullengineeringbook.net
id="email"
ngModel
name="email"
required
email>
</div>
…
Por defecto, Angular elimina la validación HTML nativa por lo que los anteriores
atributos no impedirán que empleemos el botón submit y tampoco lanzarán
mensaje alguno.
Página 136
www.fullengineeringbook.net
Pero de momento, nos sirven para identificar los estados por los que pasa un
campo en un formulario Angular implementados a través de ngForm.
Para ver el estado del campo Email según operemos en el formulario, añadimos
a la vista, antes del cierre del form, el siguiente código:
src/app/proveedores/addprovee/addprovee.component.html
…
<hr>
<pre> Estado Dirty: {{ formpro.controls.email.dirty }}</pre>
<pre> Estado Pristine: {{ formpro.controls.email.pristine }}</pre>
<pre> Estado Touched: {{ formpro.controls.email.touched }}</pre>
<pre> Estado Valid: {{ formpro.controls.email.valid }}</pre>
<pre> Estado Invalid: {{ formpro.controls.email.invalid }}</pre>
www.fullengineeringbook.net
…
</form>
Este código nos muestra el valor de cada estado del campo email. Al iniciar el
formulario, el valor del estado pristine será true (aún no hemos escrito nada) y el
de invalid y valid, true y false respectivamente, ya que aún no está validado.
Página 137
www.fullengineeringbook.net
Podemos comprobar en el navegador, los cambios a medida que escribimos:
¿Para qué usar estos estados? Pues por ejemplo, para el uso de clases CSS
dinámicas en función del estado que ayuden al usuario a completar el
formulario.
www.fullengineeringbook.net
Vamos a ponerlo en práctica. En el archivo de estilos,
addprovee.component.css, añadimos una serie de clases CSS de Angular (las
que comienzan por ng) relacionadas los estados del campo:
src/app/proveedores/addprovee/addprovee.component.html
input.ng-invalid.ng-touched {
border-left: 5px solid #a94442;
}
input.ng-valid.ng-dirty {
border-left: 5px solid #42A948;
}
Que implicará en primer lugar, que cuando el campo tenga los estados inválido
y touched, es decir que no sea ha introducido correctamente el valor y se ha
pasado al siguiente, se mostrara un borde rojo de 5 px en la izquierda del
campo.
Página 138
www.fullengineeringbook.net
En cambio, si el campo se ha comenzado a completar y se valida, se mostrará
un borde verde de 5 px.
También podemos añadir más ayudas visuales con un icono junto al label del
campo y un texto de advertencia empleando la directiva ngIf y los estados.
src/app/proveedores/addprovee/addprovee.component.html
www.fullengineeringbook.net
…
<div class="form-group">
<label for="email">Correo Electrónico</label>
<i class="fa fa-check-circle check" ①
*ngIf="email.valid"></i>
<i class="fa fa-exclamation-circle uncheck"
*ngIf="email.invalid && email.touched"></i>
<input type="text"
class="form-control"
id="email"
ngModel
name="email"
required
email
#email="ngModel"> ②
<p class="alert alert-danger" *ngIf="email.invalid && email.touched"> ③
Por favor introduzca una dirección de correo correcta.
</p>
</div>
…
Página 139
www.fullengineeringbook.net
Donde hemos ① introducido dos iconos que se mostrarán en función de la
expresión de su ngIf, hemos ② creado la id local email asociándola a ngModel
y hemos ③ creado un texto de alerta que se mostrará también de acuerdo a la
expresión ngIf.
src/app/proveedores/addprovee/addprovee.component.css
…
.check {
color: #42A948;
}
.uncheck {
color: #a94442;
}
…
www.fullengineeringbook.net
Y la refencia al CDN de Font Awesome Icons en el head del index.html para
obtener los iconos:
src/index.html
…
<script src="https://use.fontawesome.com/bacad173cf.js"></script>
…
Página 140
www.fullengineeringbook.net
Finalmente, comprobamos en el navegador:
src/app/proveedores/addprovee/addprovee.component.html
…
<button type="submit"
class="btn btn-success"
[disabled]="!formpro.valid" ①
>Añadir Proveedor</button>
<p class="alert alert-danger " *ngIf="!formpro.valid"> ②
Por favor complete todos los campos
</p>
…
Página 141
www.fullengineeringbook.net
En el cual:
www.fullengineeringbook.net
Como tal, nuestro formulario está listo pero los datos quedan almacenados en
el objeto proveedor en memoria.
Página 142
www.fullengineeringbook.net
9.4 Creación de formularios Reactive
Otra de las técnicas para crear formularios es Reactive, que lleva la generación
y gestión del mismo del lado del archivo TypeScript del componente.
src/app/app.module.ts
…
import { ReactiveFormsModule } from '@angular/forms';
…
www.fullengineeringbook.net
Y:
…
{ path: 'addpres', component: AddpresComponent},
…
…
imports: [
BrowserModule,
RouterModule.forRoot(routes),
FormsModule,
ReactiveFormsModule
],
…
Página 143
www.fullengineeringbook.net
Para poder acceder a este nuevo componente en el navegador, añadimos el link
al menú de cabecera en el archivo header.component.html, de la siguiente
manera:
src/app/header/header.component.html
…
<ul class="nav navbar-nav navbar-right">
<li class="nav-item" routerLinkActive="active"
[routerLinkActiveOptions]="{exact:true}">
<a routerLink="/" >Inicio </a>
</li>
<li class="nav-item"routerLinkActive="active">
<a routerLink="/proveedores">Proveedores</a>
</li>
<li class="nav-item" routerLinkActive="active">
<a routerLink="/addpres">Añadir Presupuesto</a>
</li>
</ul>
…
www.fullengineeringbook.net
Dejando listo el componente para ser empleado.
src/app/presupuestos/addpres/addpres.component.html
<div class="row">
<div class="col-xs-12 col-sm-10 col-md-8 col-sm-offset-1 col-md-offset 2">
<h2>Añadir nuevo presupuesto</h2>
<form>
<div class="form-group">
<label for="proveedor">Proveedor</label>
<input type="text"
class="form-control"
id="proveedor">
</div>
Página 144
www.fullengineeringbook.net
<div class="form-group">
<label for="fecha">Fecha Presupuesto</label>
<input type="date"
class="form-control"
id="fecha">
</div>
<div class="form-group">
<label for="concepto">Concepto</label>
<input type="text"
class="form-control"
id="concepto">
</div>
<div class="form-group">
<label for="base">Base Imponible</label>
<input type="number"
class="form-control"
id="base">
</div>
<div class="form-group">
<label for="tipo">Tipo de IVA</label>
<select class="form-control"
www.fullengineeringbook.net
id="tipo">
<option value="">Seleccione...</option>
<option value=0> 0 %</option>
<option value=0.04> 4 %</option>
<option value=0.10>10 %</option>
<option value=0.21>21 %</option>
</select>
</div>
<div class="form-group">
<label for="iva">Importe IVA</label>
<input type="number"
class="form-control"
id="iva">
</div>
<div class="form-group">
<label for="total">Total Factura IVA Incluido</label>
<input type="number"
class="form-control"
id="total">
</div>
<button class="btn btn-primary"
Página 145
www.fullengineeringbook.net
type="submit">Añadir Presupuesto</button>
</form>
</div>
</div>
src/app/presupuestos/addpres/addpres.component.ts
www.fullengineeringbook.net
…
presupuestoForm: FormGroup;
presupuesto: any;
…
…
constructor(private pf: FormBuilder) { }
…
Página 146
www.fullengineeringbook.net
Continuamos en la clase, y dentro de ngOnInit igualamos presupuestoForm al
objeto pf y inicializamos dentro de este y vaciós, los campos que tendrá el
formulario:
…
ngOnInit() {
this.presupuestoForm = this.pf.group({
proveedor: '',
fecha: '',
concepto: '',
base: '',
tipo: '',
iva: '',
total: ''
});
}
…
src/app/presupuestos/addpres/addpres.component.html
…
<form [formGroup]="presupuestoForm">
…
…
<div class="form-group">
<label for="proveedor">Proveedor</label>
<input type="text"
class="form-control"
id="proveedor"
Página 147
www.fullengineeringbook.net
formControlName="proveedor">
</div>
… <!--repetir para cada campo-->
Para visualizar la toma de datos del formulario, añadimos tras el cierre del form
las siguientes dos líneas:
…
<pre>Valor del formulario: {{ presupuestoForm.value | json }}</pre>
<pre>Status del formulario: {{ presupuestoForm.status | json }}</pre>
…
www.fullengineeringbook.net
Página 148
www.fullengineeringbook.net
Para ello, volvemos a modificar el inicio de la etiqueta form en el archivo
addpres.component.html de la siguiente forma:
src/app/presupuestos/addpres/addpres.component.html
…
<form [formGroup]="presupuestoForm" (ngSubmit)="onSubmit()">
…
…
</form>
<hr>
<pre>Valor del formulario: {{ presupuestoForm.value | json }}</pre>
<pre>Status del formulario: {{ presupuestoForm.status | json }}</pre>
<hr>
<pre>{{ presupuesto | json }}</pre>
…
www.fullengineeringbook.net
En el componente, dentro de la clase, en el archivo addpres.component.ts
añadimos el siguiente código:
src/app/presupuestos/addpres/addpres.component.ts
…
onSubmit() {
this.presupuesto = this.savePresupuesto();
}
…
Página 149
www.fullengineeringbook.net
…
savePresupuesto() {
const savePresupuesto = {
proveedor: this.presupuestoForm.get('proveedor').value,
fecha: this. presupuestoForm.get('fecha').value,
concepto: this.presupuestoForm.get('concepto').value,
base: this.presupuestoForm.get('base').value,
tipo: this.presupuestoForm.get('tipo').value,
iva: this.presupuestoForm.get('iva').value,
total: this.presupuestoForm.get('total').value
};
return savePresupuesto;
}
…
Método que iguala cada valor del formulario con su correspondiente propiedad
del objeto del componente y lo devuelve con un return.
www.fullengineeringbook.net
Ahora en el navegador, podemos comprobar como los datos introducidos en el
formulario son guardados en el objeto presupuesto cuando pulsamos en el
botón añadir presupuesto:
Página 150
www.fullengineeringbook.net
9.5 Validación de campos programática
src/app/presupuestos/addpres/addpres.component.ts
…
ngOnInit() {
this.presupuestoForm = this.pf.group({
proveedor: ['', Validators.required ],
fecha: ['', Validators.required ],
cif: ['', Validators.required ],
concepto: ['', Validators.required ],
base: ['', Validators.required ],
tipo: ['', Validators.required ],
iva: ['', Validators.required ],
total: ['', Validators.required ]
});
}
…
Página 151
www.fullengineeringbook.net
Ahora en la vista, archivo addpres.component.html, modificamos el código del
botón para que solo se muestre cuando el formulario sea válido:
src/app/presupuestos/addpres/addpres.component.html
…
<button type="submit"
class="btn btn-primary"
[disabled]="!presupuestoForm.valid"
>Añadir Presupuesto</button>
<p class="alert alert-danger" *ngIf="!presupuestoForm.valid">
Por favor complete todos los campos
</p>
…
src/app/presupuestos/addpres/addpres.component.ts
…
concepto: ['', [ Validators.required, Validators.minLength(10)]],
…
Página 152
www.fullengineeringbook.net
El resto de clases de validación de Angular se pueden encontrar en el siguiente
enlace de su documentación:
https://angular.io/api/forms/Validators
Para finalizar nuestro formulario, podemos implementar para cada campos los
iconos y textos de validación del apartado anterior. Pero en este caso el objeto
utilizado para obtener el estado del campo tiene una sintaxis diferente, siendo
el nombre del formulario seguido de controls y el nombre del campo.
src/app/presupuestos/addpres/addpres.component.html
<div class="form-group">
<label for="proveedor">Proveedor</label>
<i class="fa fa-check-circle check"
*ngIf="presupuestoForm.controls.proveedor.valid"></i>
<i class="fa fa-exclamation-circle uncheck"
www.fullengineeringbook.net
*ngIf="presupuestoForm.controls.proveedor.invalid &&
presupuestoForm.controls.proveedor.touched"></i>
<input type="text"
class="form-control"
id="proveedor"
formControlName="proveedor">
<p class="alert alert-danger"
*ngIf="presupuestoForm.controls.proveedor.invalid &&
presupuestoForm.controls.proveedor.touched">
El campo Proveedor es obligatorio.
</p>
</div>
Página 153
www.fullengineeringbook.net
9.6 valueChanges
En el ejemplo anterior, tenemos dos campos, importe del IVA y total que en la
vida real se obtienen a partir del producto de la base por el tipo de IVA y la
suma de la base más el IVA respectivamente.
src/app/presupuestos/addpres/addpres.component.ts
…
www.fullengineeringbook.net
export class AddpresComponent implements OnInit {
presupuestoForm: FormGroup;
presupuesto: any;
base: any;
tipo: any;
iva: any = 0;
total: any = 0;
…
Donde al comienzo, hemos creado las propiedades base, tipo, iva y total, de las
cuales las dos últimas se inicializan a cero.
Página 154
www.fullengineeringbook.net
…
ngOnInit() {
this.presupuestoForm = this.pf.group({
proveedor: ['', Validators.required ],
fecha: ['', Validators.required ],
concepto: ['', [ Validators.required, Validators.minLength(10)] ],
base: ['', Validators.required ],
tipo: ['', Validators.required ],
iva: this.iva , ①
total: this.total
});
this.onChanges(); ②
}
…
…
www.fullengineeringbook.net
onChanges(): void {
this.presupuestoForm.valueChanges.subscribe(valor => { ①
this.base = valor.base; ②
this.tipo = valor.tipo;
this.presupuestoForm.value.iva = this.base * this.tipo; ③
this.presupuestoForm.value.total = this.base + (this.base * this.tipo);
});
}
…
En cual:
Página 155
www.fullengineeringbook.net
Una vez modificado el componente, nos queda cambiar la vista en archivo
addpres.component.ts de los campos iva y total de la siguiente manera:
src/app/presupuestos/addpres/addpres.component.html
…
<div class="form-group">
<label for="iva">Importe IVA</label>
<input type="number"
class="form-control"
id="iva"
formControlName="iva"
[(ngModel)]="presupuestoForm.value.iva" ①
disabled> ②
</div>
<div class="form-group">
<label for="total">Total Factura IVA Incluido</label>
<input type="number"
class="form-control"
id="total"
www.fullengineeringbook.net
formControlName="total"
[(ngModel)]="presupuestoForm.value.total"
disabled>
</div>
…
En el cual:
Página 156
www.fullengineeringbook.net
Con estos pasos nuestro formulario queda finalizado y podemos comprobar en
el navegador como los campos iva y total se actualizan automáticamente cada
vez que introducimos los datos necesarios para su cálculo.
www.fullengineeringbook.net
Página 157
www.fullengineeringbook.net
10 Conexión con el servidor
Angular utiliza los métodos http para realizar conexiones con servidores de
bases de datos que nos permitan almacenar de manera persistente los mismos.
https://firebase.google.com
www.fullengineeringbook.net
Página 158
www.fullengineeringbook.net
Le añadimos un nombre identificatavio, nuestro país y pulsamos en Crear
Proyecto:
www.fullengineeringbook.net
Página 159
www.fullengineeringbook.net
El código es el siguiente:
{
“rules”: {
“.read”: “true”,
“.write”: “true”
}
}
www.fullengineeringbook.net
Página 160
www.fullengineeringbook.net
10.2. Servicio HTTP: Post
En este paso vamos a crear un servicio para implementar las peticiones http de
nuestra aplicación al servidor.
src/app/app.module.ts
…
import { HttpModule } from '@angular/http';
import { PresupuestosService } from 'app/servicios/presupuestos.service';
…
www.fullengineeringbook.net
Modificamos los imports y providers:
…
imports: [
BrowserModule,
RouterModule.forRoot(routes),
FormsModule,
ReactiveFormsModule,
HttpModule
],
providers: [ProveedoresService, PresupuestosService],
…
Página 161
www.fullengineeringbook.net
Ahora vamos a nuestro servicio en el archivo presupuestos.service.ts y
comenzamos importando:
src/app/servicios/presupuestos.service.ts
www.fullengineeringbook.net
…
presURL = 'https://comprasapp-83618.firebaseio.com/presupuestos.json'; ①
constructor(private http: Http) {} ②
…
…
postPresupuesto( presupuesto: any) {
const newpres = JSON.stringify(presupuesto);
const headers = new Headers({ ①
'Content-Type': 'application/json'
});
Página 162
www.fullengineeringbook.net
}
…
En el cual:
src/app/presupuestos/addpres/addpres.component.ts
…
www.fullengineeringbook.net
import { PresupuestosService } from '../../servicios/presupuestos.service';
…
…
constructor(private pf: FormBuilder,
private presupuestoService: PresupuestosService) {
}
…
Página 163
www.fullengineeringbook.net
…
onSubmit() {
this.presupuesto = this.savePresupuesto();
this.presupuestoService.postPresupuesto( this.presupuesto )
.subscribe(newpres => {
})
}
…
www.fullengineeringbook.net
Página 164
www.fullengineeringbook.net
Si nos fijamos, Firebase almacena los registros con una estructura de árbol de
nodos en el cual el primero sería el equivalente a una tabla en una base de datos
SQL y cada registro es a su vez un nodo con una clave id que crea
automáticamente Firebase cuyo contenido es el registro en formato JSON, es
decir pares clave-valor.
www.fullengineeringbook.net
Página 165
www.fullengineeringbook.net
10.3. Servicio HTTP: Get
src/app/servicios/presupuestos.service.ts
…
getPresupuestos () {
Que realizará una petición get a la base de datos y devolverá un objeto res que
www.fullengineeringbook.net
es pasado a formato JSON.
src/app/app.module.ts
…
{ path: 'presupuestos', component: PresupuestosComponent },
…
Página 166
www.fullengineeringbook.net
Y en el componente header.component.html modificamos el link de añadir
presupuesto por el siguiente:
src/app/header/header.component.html
A continuación, vamos a introducir una tabla para listar los presupuestos, así
como un botón de acceso para añadir nuevos presupuestos.
src/app/presupuestos/presupuestos/presupuestos.component.html
www.fullengineeringbook.net
<h3>Listado de Presupuestos</h3>
<a class="btn btn-primary float-md-right" routerLink="/addpres">Añadir
nuevo presupuesto</a>
<br>
<table class="table table-bordered table-striped tabla" style="margin-top:
40px;">
<thead>
<tr class="filters">
<th>Proveedor</th>
<th>Fecha</th>
<th>Concepto</th>
<th>Base</th>
<th>IVA</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let presupuesto of presupuestos">
<td>{{ presupuesto.proveedor }}</td>
<td>{{ presupuesto.fecha }}</td>
Página 167
www.fullengineeringbook.net
<td>{{ presupuesto.concepto }}</td>
<td>{{ presupuesto.base }}</td>
<td>{{ presupuesto.iva }}</td>
<td>{{ presupuesto.total }}</td>
</tr>
</tbody>
</table>
src/app/presupuestos/presupuestos/presupuestos.component.ts
…
import { PresupuestosService } from '../../servicios/presupuestos.service';
…
www.fullengineeringbook.net
A continuación, dentro de la clase, creamos un objeto presupuestos como array
de cualquier tipo de datos TypeScript:
…
presupuestos: any[] = [];
…
Como este método nos devuelve un objeto con todos los presupuestos en el
formato de Firebase, lo iteramos con un for para convertirlo en objetos
individuales con una id. Esos objetos, los añadimos al array presupuestos del
componente con el método JavaScript push.
Página 168
www.fullengineeringbook.net
…
constructor(private presupuestosService: PresupuestosService) {
this.presupuestosService.getPresupuestos()
.subscribe(presupuestos => {
for ( const id$ in presupuestos) {
const p = presupuestos[id$];
p.id$ = id$;
this.presupuestos.push(presupuestos[id$]);
}
})
}
…
www.fullengineeringbook.net
Página 169
www.fullengineeringbook.net
src/app/presupuestos/addpres/addpres.component.html
…
<h2>Añadir nuevo presupuesto</h2>
<a class="btn btn-primary float-md-right"
routerLink="/presupuestos">Regresar al listado</a>
<br>
…
…
<button type="submit"
class="btn btn-primary"
[disabled]="!presupuestoForm.valid"
>Añadir Presupuesto</button>
<a class="btn btn-danger" routerLink="/presupuestos">Cancelar</a>
…
www.fullengineeringbook.net
Ahora en el componente añadimos un método en onSubimt para resetear el
formulario.
src/app/presupuestos/addpres/addpres.component.ts
onSubmit() {
this.presupuesto = this.savePresupuesto();
this.presupuestoService.postPresupuesto( this.presupuesto )
.subscribe(newpres => {
})
this.presupuestoForm.reset();
}
Página 170
www.fullengineeringbook.net
10.4. Servicio HTTP: Put
src/app/servicios/presupuestos.service.ts
…
preURL = 'https://comprasapp-83618.firebaseio.com/presupuestos';
…
En el cual:
② Y de crea una url compuesta por la dirección del nodo de firebase más la id
del registro a modificar que es utilizada para recuperar con get el registro.
Página 171
www.fullengineeringbook.net
Seguidamente, añadimos el método putPresupuesto, para que una vez editado
el objeto sea enviado a la base de datos:
…
putPresupuesto( presupuesto: any, id$: string) { ①
const newpre = JSON.stringify(presupuesto);
const headers = new Headers({
'Content-Type': 'application/json'
});
En el cual:
www.fullengineeringbook.net
① Recibimos dos parámetros del componente, el objeto presupuesto y su id
(que corresponde con la emplada por Firebase), de cara a identificar el
presupuesto a actualizar en la base de datos. El objeto recibido, se pasa a string
para Firebase y se define la cabecera.
② Se crea una url compuesta por la dirección del nodo de firebase más la id
del registro a modificar.
Ahora vamos a crear un nuevo componente para editar los presupuestos. Para
ello, completamos en la consola:
Como hacemos con todos los nuevos componente, a continuación vamos añadir
el nuevo componente al routing en el módulo, añadiendo para ello en el archivo
app.module.ts:
Página 172
www.fullengineeringbook.net
src/app/app.module.ts
…
{ path: 'editpres/:id', component: PresupuestosComponent },
…
Vemos como en este caso añadimos a la ruta el símbolo dos puntos seguido de
una referencia id para el objeto a editar, de esta manerá esta ruta nos permitirá
acceder a la edición de un objeto concreto.
src/app/presupuestos/editpres/editpres.component.html
<div class="row">
www.fullengineeringbook.net
<div class="col-xs-12 col-sm-10 col-md-8 col-sm-offset-1 col-md-offset 2">
<h2>Editar Presupuesto</h2> ①
<a class="btn btn-primary float-md-right"
routerLink="/presupuestos">Regresar al listado</a>
<br>
<form [formGroup]="presupuestoForm" (ngSubmit)="onSubmit()">
<div class="form-group">
<label for="proveedor">Proveedor</label>
<i class="fa fa-check-circle check"
*ngIf="presupuestoForm.controls.proveedor.valid"></i>
<i class="fa fa-exclamation-circle uncheck"
*ngIf="presupuestoForm.controls.proveedor.invalid &&
presupuestoForm.controls.proveedor.touched"></i>
<input type="text"
class="form-control"
id="proveedor"
formControlName="proveedor"
[(ngModel)]="presupuesto.proveedor"> ②
<p class="alert alert-danger"
*ngIf="presupuestoForm.controls.proveedor.invalid &&
Página 173
www.fullengineeringbook.net
presupuestoForm.controls.proveedor.touched">
El campo Proveedor es obligatorio.
</p>
</div>
<div class="form-group">
<label for="fecha">Fecha Presupuesto</label>
<i class="fa fa-check-circle check"
*ngIf="presupuestoForm.controls.fecha.valid"></i>
<i class="fa fa-exclamation-circle uncheck"
*ngIf="presupuestoForm.controls.fecha.invalid &&
presupuestoForm.controls.fecha.touched"></i>
<input type="date"
class="form-control"
id="fecha"
formControlName="fecha"
[(ngModel)]="presupuesto.fecha"> ②
<p class="alert alert-danger"
*ngIf="presupuestoForm.controls.fecha.invalid &&
presupuestoForm.controls.fecha.touched">
El campo Fecha es obligatorio.
</p>
www.fullengineeringbook.net
</div>
<div class="form-group">
<label for="concepto">Concepto</label>
<i class="fa fa-check-circle check"
*ngIf="presupuestoForm.controls.concepto.valid"></i>
<i class="fa fa-exclamation-circle uncheck"
*ngIf="presupuestoForm.controls.concepto.invalid &&
presupuestoForm.controls.concepto.touched"></i>
<input type="text"
class="form-control"
id="concepto"
formControlName="concepto"
[(ngModel)]="presupuesto.concepto"> ②
<p class="alert alert-danger"
*ngIf="presupuestoForm.controls.concepto.invalid &&
presupuestoForm.controls.concepto.touched">
El campo Concepto es obligatorio y debe tener más de 10 caracteres.
</p>
</div>
<div class="form-group">
<label for="base">Base Imponible</label>
Página 174
www.fullengineeringbook.net
<i class="fa fa-check-circle check"
*ngIf="presupuestoForm.controls.base.valid"></i>
<i class="fa fa-exclamation-circle uncheck"
*ngIf="presupuestoForm.controls.base.invalid &&
presupuestoForm.controls.base.touched"></i>
<input type="number"
class="form-control"
id="base"
formControlName="base"
[(ngModel)]="presupuesto.base"> ②
<p class="alert alert-danger"
*ngIf="presupuestoForm.controls.base.invalid &&
presupuestoForm.controls.base.touched">
El campo Base Imponible es obligatorio.
</p>
</div>
<div class="form-group">
<label for="tipo">Tipo de IVA</label>
<i class="fa fa-check-circle check"
*ngIf="presupuestoForm.controls.tipo.valid"></i>
<i class="fa fa-exclamation-circle uncheck"
www.fullengineeringbook.net
*ngIf="presupuestoForm.controls.tipo.invalid &&
presupuestoForm.controls.tipo.touched"></i>
<select class="form-control"
id="tipo"
formControlName="tipo"
[(ngModel)]="presupuesto.tipo"> ②
<option value="">Seleccione...</option>
<option value=0> 0 %</option>
<option value=0.04> 4 %</option>
<option value=0.10>10 %</option>
<option value=0.21>21 %</option>
</select>
<p class="alert alert-danger"
*ngIf="presupuestoForm.controls.tipo.invalid &&
presupuestoForm.controls.tipo.touched">
El campo Tipo de IVA es obligatorio.
</p>
</div>
<div class="form-group">
<label for="iva">Importe IVA</label>
<input type="number"
Página 175
www.fullengineeringbook.net
class="form-control"
id="iva"
formControlName="iva"
[(ngModel)]="presupuestoForm.value.iva"
disabled>
</div>
<div class="form-group">
<label for="total">Total Factura IVA Incluido</label>
<input type="number"
class="form-control"
id="total"
formControlName="total"
[(ngModel)]="presupuestoForm.value.total"
disabled>
</div>
<button type="submit"
class="btn btn-primary"
[disabled]="!presupuestoForm.valid"
>Guardar Cambios</button>
<a class="btn btn-danger" routerLink="/presupuestos">Cancelar</a>
<p class="alert alert-danger" *ngIf="!presupuestoForm.valid">
www.fullengineeringbook.net
Por favor complete todos los campos
</p>
</form>
<hr>
</div>
</div>
Este código HTML es el mismo que tenemos en el componente para añadir los
registros de presupuestos con las siguientes modificaciones:
Página 176
www.fullengineeringbook.net
A continuación, tenemos que editar el código del componente en el archivo
editpres.component.ts.
src/app/presupuestos/editpres/editpres.component.ts
…
import { FormControl, FormGroup, FormBuilder, Validators } from
'@angular/forms';
import { PresupuestosService } from '../../servicios/presupuestos.service';
import { Router, ActivatedRoute } from '@angular/router';
…
…
presupuestoForm: FormGroup;
www.fullengineeringbook.net
presupuesto: any;
base: any;
tipo: any;
iva: any = 0;
total: any = 0;
id: string;
…
…
constructor(private pf: FormBuilder,
private presupuestoService: PresupuestosService,
private router: Router,
private activatedRouter: ActivatedRoute) {
this.activatedRouter.params
Página 177
www.fullengineeringbook.net
.subscribe( parametros => {
this.id = parametros['id'];
this.presupuestoService.getPresupuesto( this.id)
.subscribe( presupuesto => this.presupuesto = presupuesto)
});
}
…
…
ngOnInit() {
this.presupuestoForm = this.pf.group({
proveedor: ['', Validators.required ],
fecha: ['', Validators.required ],
concepto: ['', [ Validators.required, Validators.minLength(10)] ],
base: ['', Validators.required ],
www.fullengineeringbook.net
tipo: ['', Validators.required ],
iva: this.iva ,
total: this.total
});
this.onChanges();
onChanges(): void {
this.presupuestoForm.valueChanges.subscribe(valor => {
this.base = valor.base;
this.tipo = valor.tipo;
this.presupuestoForm.value.iva = this.base * this.tipo;
this.presupuestoForm.value.total = this.base + (this.base * this.tipo);
});
}
…
Página 178
www.fullengineeringbook.net
Y finalmente, añadimos el nuevo método onSubmit que enviará además del
objeto presupuesto la id a modificar a través del método putPresupuesto del
servicio:
…
onSubmit() {
this.presupuesto = this.savePresupuesto();
this.presupuestoService.putPresupuesto( this.presupuesto, this.id )
.subscribe(newpre => {
this.router.navigate(['/presupuestos'])
})
savePresupuesto() {
const savePresupuesto = {
proveedor: this.presupuestoForm.get('proveedor').value,
fecha: this.presupuestoForm.get('fecha').value,
www.fullengineeringbook.net
concepto: this.presupuestoForm.get('concepto').value,
base: this.presupuestoForm.get('base').value,
tipo: this.presupuestoForm.get('tipo').value,
iva: this.presupuestoForm.get('iva').value,
total: this.presupuestoForm.get('total').value
};
return savePresupuesto;
}
…
Página 179
www.fullengineeringbook.net
• Carga en la vista los datos del objeto para que puedan ser modificados.
src/app/presupuestos/editpres/editpres.component.ts
input.ng-invalid.ng-touched {
border-left: 5px solid #a94442;
}
input.ng-valid.ng-dirty {
border-left: 5px solid #42A948;
}
www.fullengineeringbook.net
select.ng-invalid.ng-touched {
border-left: 5px solid #a94442;
}
select.ng-valid.ng-dirty {
border-left: 5px solid #42A948;
}
.check {
color: #42A948;
}
.uncheck {
color: #a94442;
}
Página 180
www.fullengineeringbook.net
Para ello, en el componente presupuestos y dentro de su vista en el archivo
presupuestos.component.html, añadimos a la tabla:
src/app/presupuestos/presupuestos/presupuestos.component.html
…
<th class="text-right">Total</th>
<th>Editar</th>
</tr>
</thead>
…
…
<td>
<button type="button" class="btn btn-success"
routerLink="/editpres/{{ presupuesto.id$ }}">Editar</button>
</td>
</tr>
…
www.fullengineeringbook.net
En el que introducimos en el link de la ruta, el valor de la id de cada presupuesto
que será cargado a través de ngFor.
Página 181
www.fullengineeringbook.net
Y mantenemos la funcionalidad reactiva de modificación de los campos de
manera inmediata.
www.fullengineeringbook.net
Página 182
www.fullengineeringbook.net
10.5. Servicio HTTP: Delete
Para ello en primer lugar añadimos a nuestro servicio el método para eliminar
registros de la base de datos. En la clase del archivo presupuestos.service.ts
añadimos:
src/app/servicios/presupuestos.service.ts
…
delPresupuesto ( id$: string ) {
const url = `${ this.preURL }/${ id$ }.json`;
return this.http.delete( url )
.map( res => res.json());
}
…
www.fullengineeringbook.net
Que funciona de la misma manera que los anteriores pero empleando la petición
http delete.
src/app/presupuestos/editpres/editpres.component.html
…
<th>Editar</th>
<th>Eliminar</th>
</tr>
…
…
<td>
<button class="btn btn-danger"
(click)="eliminarPresupuesto(presupuesto.id$)">Eliminar</button>
Página 183
www.fullengineeringbook.net
</td>
</tr>
</tbody>
…
src/app/servicios/presupuestos.service.ts
…
eliminarPresupuesto(id$) {
this.presupuestoService.delPresupuesto(id$)
.subscribe( res => {
console.log(res);
})
}
…
www.fullengineeringbook.net
Este método del componente, a su vez llamará al método delPresupuesto del
servicio, pasándole la id del registro para que lo elimine con la petición delete
en la base de datos.
Página 184
www.fullengineeringbook.net
Con esta solución, la funcionalidad no está finalizada, ya que al borrar un
elemento la tabla no se actualiza debido a que el array del componente
presupuestos, mantiene los datos que cargó de la base de datos al inicializar el
componente.
Para que actualice la tabla en cada borrado, una de las formas es llamar al
método getPresupuestos del servicio, dentro del método delPresupuesto.
src/app/servicios/presupuestos.service.ts
…
eliminarPresupuesto(id$) {
this.presupuestosService.delPresupuesto(id$)
.subscribe( res => {
this.presupuestos = [];
this.presupuestosService.getPresupuestos()
.subscribe(presupuestos => {
www.fullengineeringbook.net
for ( const id$ in presupuestos) {
const p = presupuestos[id$];
p.id$ = id$;
this.presupuestos.push(presupuestos[id$]);
}
})
});
}
…
Página 185
www.fullengineeringbook.net
11 Gestión de Autorizaciones
11.1 Registro
src/app/app.module.ts
www.fullengineeringbook.net
…
{ path: 'registro', component: RegistroComponent },
…
src/app/header/header.component.html
…
<li class="nav-item" routerLinkActive="active">
<a class="nav-link" routerLink="/registro">Registro </a>
</li>
…
Página 186
www.fullengineeringbook.net
Ahora comenzamos añadiendo el código html de un formulario de tipo reactive
de registro, en la vista del archivo registro.component.html:
src/app/autenticación/registro/registro.component.html
<div class="row">
<div class="col-md-6 offset-md-3">
<form [formGroup]="registroForm" (ngSubmit)="onSubmit()">
<h4>Introduzca sus datos de registro</h4>
<label>Correo Electrónico</label>
<input type="email" id="inputEmail" class="form-control"
formControlName="email" autofocus>
<label>Contraseña</label>
<input type="password" id="inputPassword" class="form-control"
formControlName="password">
<hr>
<button type="submit" class="btn btn-primary">Registrar</button>
</form>
</div>
</div>
www.fullengineeringbook.net
En el que hemos añadido el formulario registroForm y los campos de correo
electrónico y contraseñas con la declaración de su atributo formControlName.
src/app/autenticación/registro/registro.component.ts
…
import { FormControl, FormGroup, FormBuilder, Validators } from
'@angular/forms';
…
Página 187
www.fullengineeringbook.net
y dentro de la clase declaramos los objetos del formulario para recoger los datos
de email y contraseña:
…
registroForm: FormGroup;
userdata: any;
…
El constructor:
…
constructor(private formBuilder: FormBuilder) { }
…
Y los métodos:
…
ngOnInit() {
this.registroForm = this.formBuilder.group({
'email': ['', [
www.fullengineeringbook.net
Validators.required,
Validators.email
]
],
'password': ['', [
Validators.required,
Validators.pattern('^(?=.*[0-9])(?=.*[a-zA-Z])([a-zA-Z0-9]+)$'), ①
Validators.minLength(6)
]
]
});
this.registroForm.valueChanges.subscribe(data =>
this.onValueChanged(data));
this.onValueChanged();
onSubmit() {
this.userdata = this.saveUserdata(); ②
}
Página 188
www.fullengineeringbook.net
saveUserdata() {
const saveUserdata = {
email: this.registroForm.get('email').value,
password: this.registroForm.get('password').value,
};
return saveUserdata;
}
Por tanto, debemos crear nuestro servicio, pero previamente vamos a configurar
Firebase para poder emplear su herramienta de autenticación.
Página 189
www.fullengineeringbook.net
Ahora pulsamos en la pestaña método de inicio de sesión, pulsamos en la
opción Correo electrónico/contraseña y marcamos la opción Habilitar:
www.fullengineeringbook.net
Página 190
www.fullengineeringbook.net
El siguiente paso es la creación del servicio Angular en nuestra aplicación, para
lo cual también desde la consola completamos:
src/app/app.module.ts
…
import { AutenticacionService } from './servicios/autenticacion.service';
…
…
providers: [ProveedoresService,
PresupuestosService,
AutenticacionService],
…
www.fullengineeringbook.net
Comenzamos ahora a editar nuestro servicio en el archivo
autenticacion.service.ts añadiendo en primer lugar la importación de las clases
necesarias del paquete firebase:
src/app/servicios/autenticacion.service.ts
…
import * as firebase from 'firebase';
…
…
registroUsuario (userdata) {
firebase.auth().createUserWithEmailAndPassword(userdata.email,
userdata.password)
.catch(
Página 191
www.fullengineeringbook.net
error => {
console.log(error);
}
)
}
…
src/app/app.component.ts
www.fullengineeringbook.net
Y, dentro de la clase, añadimos en ngOnInit las claves del servicio de firebase
que obtuvimos anteriormente, para que se establezca la inicialición del servicio:
…
export class AppComponent implements OnInit {
ngOnInit () {
firebase.initializeApp({
apiKey: 'AIzaSyCA0vJPBzNI_uOeKWkk5skmEIqkYDagFAY',
authDomain: 'comprasapp-83618.firebaseapp.com'
});
}
}
…
Página 192
www.fullengineeringbook.net
Con estos elementos configurados, nos queda llamar al servicio desde el
componente de registro de usuarios.
src/app/autenticación/registro/registro.component.ts
…
import { AutenticacionService } from '../../servicios/autenticacion.service';
import { Router, ActivatedRoute } from '@angular/router';
…
…
constructor(private formBuilder: FormBuilder,
private autService: AutenticacionService,
www.fullengineeringbook.net
private router: Router,
private activatedRouter: ActivatedRoute
){}
…
…
onSubmit() {
this.userdata = this.saveUserdata();
this.autService.registroUsuario(this.userdata);
this.router.navigate(['/inicio'])
}
…
Página 193
www.fullengineeringbook.net
De esta manera, nuestra página de registro quedará lista para crear usuarios:
www.fullengineeringbook.net
src/app/autenticación/registro/registro.component.ts
…
erroresForm = {
'email': '',
'password': ''
}
Página 194
www.fullengineeringbook.net
mensajesValidacion = {
'email': {
'required': 'Email obligatorio',
'email': 'Introduzca una dirección email correcta'
},
'password': {
'required': 'Contraseña obligatoria',
'pattern': 'La contraseña debe tener al menos una letra un número ',
'minlength': 'y más de 6 caracteres'
}
}
…
…
onValueChanged(data?: any) {
if (!this.registroForm) { return; }
www.fullengineeringbook.net
const form = this.registroForm;
for (const field in this.erroresForm) {
this.erroresForm[field] = '';
const control = form.get(field);
if (control && control.dirty && !control.valid) {
const messages = this.mensajesValidacion[field];
for (const key in control.errors) {
this.erroresForm[field] += messages[key] + ' ';
}
}
}
}
…
Página 195
www.fullengineeringbook.net
…
ngOnInit() {
…
this.registroForm.valueChanges.subscribe(data =>this.onValueChanged(data));
this.onValueChanged();
}
…
src/app/autenticación/registro/registro.component.html
<div class="row">
<div class="col-md-6 offset-md-3">
<form [formGroup]="registroForm" (ngSubmit)="onSubmit()">
<h4>Introduzca sus datos de registro</h4>
www.fullengineeringbook.net
<label>Correo Electrónico</label>
<input type="email" id="inputEmail" class="form-control"
formControlName="email" required autofocus>
<p class="alert alert-danger" *ngIf="erroresForm.email">
{{ erroresForm.email }}
</p>
<label>Contraseña</label>
<input type="password" id="inputPassword" class="form-control"
formControlName="password" required>
<p class="alert alert-danger" *ngIf="erroresForm.password">
{{ erroresForm.password }}
</p>
<hr>
<button type="submit"
class="btn btn-primary"
[disabled]="!registroForm.valid"
>Registrar</button>
</form>
</div>
</div>
Página 196
www.fullengineeringbook.net
Para finalmente comprobar en nuestro navegador, como se muestran los
mensajes si los campos no son validados:
www.fullengineeringbook.net
Página 197
www.fullengineeringbook.net
11.2 Inicio de sesión
En la consola completamos:
src/app/app.module.ts
…
{ path: 'iniciosesion', component: InisesComponent },
…
src/app/header/header.component.html
…
<li class="nav-item">
<button class="btn btn-primary float-md-right"
routerLink="/iniciosesion">Inicie sesión</button>
</li>
…
Página 198
www.fullengineeringbook.net
src/app/autenticacion/inises/inises.component.html
<div class="row">
<div class="col-md-6 offset-md-3">
<form [formGroup]="loginForm" (ngSubmit)="onSubmit()">
<h4>Introduzca los siguientes datos:</h4>
<label>Correo Electrónico</label>
<input type="email" id="inputEmail" class="form-control"
formControlName="email" required autofocus>
<label>Contraseña</label>
<input type="password" id="inputPassword" class="form-control"
formControlName="password" required>
<hr>
<button type="submit"
class="btn btn-primary"
[disabled]="!loginForm.valid"
>Inicie sesión</button>
</form>
</div>
www.fullengineeringbook.net
</div>
src/app/autenticación/inises/inises.component.ts
…
import { AutenticacionService } from '../../servicios/autenticacion.service';
import { Router, ActivatedRoute } from '@angular/router';
…
Página 199
www.fullengineeringbook.net
…
loginForm: FormGroup;
userdata: any;
…
ngOnInit() {
this.loginForm = this.formBuilder.group({
'email': ['', [
Validators.required,
Validators.email
www.fullengineeringbook.net
],
]
'password': ['', [
Validators.required,
Validators.pattern('^(?=.*[0-9])(?=.*[a-zA-Z])([a-zA-Z0-9]+)$'),
Validators.minLength(6)
]
]
});
}
…
…
onSubmit() {
this.userdata = this.saveUserdata();
this.autService.inicioSesion(this.userdata);
}
Página 200
www.fullengineeringbook.net
saveUserdata() {
const saveUserdata = {
email: this.loginForm.get('email').value,
password: this.loginForm.get('password').value,
};
return saveUserdata;
}
…
src/app/servicios/autenticacion.service.ts
…
import { Router, ActivatedRoute } from '@angular/router';
www.fullengineeringbook.net
…
…
constructor(private router: Router,
private activatedRouter: ActivatedRoute) { }
…
…
inicioSesion (userdata) {
firebase.auth().signInWithEmailAndPassword(userdata.email,
userdata.password)
.then(response => {
console.log(response);
this.router.navigate(['/inicio']);
Página 201
www.fullengineeringbook.net
})
.catch(
error => {
console.log(error);
}
)
}
…
www.fullengineeringbook.net
Página 202
www.fullengineeringbook.net
Añadimos en la clase del archivo autenticacion.service.ts los siguientes
métodos:
src/app/servicios/autenticacion.service.ts
…
isAuthenticated() {
const user = firebase.auth().currentUser;
if (user) {
return true;
} else {
return false;
}
}
…
Y también añadimos:
…
logout() {
firebase.auth().signOut();
}
…
Página 203
www.fullengineeringbook.net
Sustituimos su código en header.component.html por el siguiente:
src/app/header/header.component.html
Página 204
www.fullengineeringbook.net
En el cual:
① Añadimos a cada link del menú un ngIf para que solo se muestre si el método
isAuth es true, es decir si el usuario está conectado y al revés en el caso del
botón iniciar sesión.
Como estamos utilizando nuevos métodos que llamarán a métodos del servicio
autenticacion.service.ts, debemos añadirlos a este componente, con lo cual en
el archivo header.component.ts añadimos en primer lugar las importaciones del
servicio y de Angular Router:
src/app/header/header.component.ts
…
import { AutenticacionService } from '../servicios/autenticacion.service';
import { Router, ActivatedRoute } from '@angular/router';
…
www.fullengineeringbook.net
Seguidamente modificamos el constructor:
…
constructor(private autService: AutenticacionService,
private router: Router,
private activatedRouter: ActivatedRoute) { }
…
…
isAuth() {
return this.autService.isAuthenticated();
}
…
Página 205
www.fullengineeringbook.net
Y el método onLogout que cerrará la sesión y redireccionará a la página de
inicio:
…
onLogout() {
this.autService.logout();
this.router.navigate(['/inicio'])
}
…
www.fullengineeringbook.net
También podemos emplear los métodos de nuestro servicio en el formulario de
inicio de sesión para que muestre un mensaje cuando el inicio de sesión no sea
correcto.
src/app/autenticacion/inises/inises.component.ts
…
mensaje = false;
…
isAuth() {
return this.autService.isAuthenticated();
}
…
Página 206
www.fullengineeringbook.net
A continuación, modificamos el método onSubmit para que si una vez que se
envíen los datos de inicio de sesión a Firebase, si isAuth es false, es decir, no se
haya iniciado sesión correctamente, la propiedad mensaje pase a true:
…
onSubmit() {
this.userdata = this.saveUserdata();
this.autService.inicioSesion(this.userdata);
setTimeout(() => {
if (this.isAuth() === false) {
this.mensaje = true
}
}, 2000);
}
…
Este if, lo hemos metido dentro de un método JavaScript setTimeout para que
no se ejecute hasta que transcurran 2000 milisegundos, de tal forma que que no
www.fullengineeringbook.net
se ejecute antes de recibir la respuesta del servidor de Firebase.
Como tenemos una nueva propiedad mensaje, que será true cuando no se haya
producido el inicio de sesión la utilizamos en la plantilla para mostrar un
mensaje.
src/app/autenticacion/inises/inises.component.html
…
</form>
<p class="alert alert-danger" *ngIf="mensaje">
El usuario o contraseña no es correcto
</p>
</div>
…
Página 207
www.fullengineeringbook.net
Ahora, si el inicio de sesión no es correcto, se mostrará el siguiente error:
www.fullengineeringbook.net
Página 208
www.fullengineeringbook.net
11.3 Protección de rutas
Una buena técnica de seguridad para las aplicaciones es proteger las rutas url
de acceso a los diferentes componentes de la aplicación.
src/app/servicios/inises/guard.service.ts
…
import { CanActivate,
ActivatedRouteSnapshot,
www.fullengineeringbook.net
RouterStateSnapshot } from '@angular/router';
import { AutenticacionService } from '../servicios/autenticacion.service';
…
…
export class GuardService implements CanActivate { ①
Página 209
www.fullengineeringbook.net
De tal manera que:
src/app/app.module.ts
…
const routes: Routes = [
{ path: '', component: InicioComponent },
{ path: 'proveedores', component: ProveedoresComponent, canActivate:
[GuardService]},
www.fullengineeringbook.net
{ path: 'addprovee', component: AddproveeComponent, canActivate:
[GuardService]},
{ path: 'addpres', component: AddpresComponent, canActivate:
[GuardService]},
{ path: 'presupuestos', component: PresupuestosComponent, canActivate:
[GuardService]},
{ path: 'editpres/:id', component: EditpresComponent, canActivate:
[GuardService]},
{ path: 'registro', component: RegistroComponent },
{ path: 'iniciosesion', component: InisesComponent },
{ path: '**', component: InicioComponent}
];
…
Página 210
www.fullengineeringbook.net
Con estos pasos, nuestra aplicación devolverá una página en blanco si
accedemos mediante la url a cualquiera de los componentes protegidos:
www.fullengineeringbook.net
Página 211
www.fullengineeringbook.net
11.4 Link a registro e inicio de sesión
src/app/autenticacion/inises/inises.component.html
…
<p>Si no dispone de cuenta pulse <a routerLink="/registro">aquí</a></p>
</div>
…
www.fullengineeringbook.net
src/app/autenticacion/registro/registro.component.html
…
<p>Si ya dispone de cuenta pulse <a routerLink="/iniciosesion">aquí</a></p>
</div>
…
Página 212
www.fullengineeringbook.net
12 Módulos adicionales
Vamos a ver como crear un módulo adicional en nuestra aplicación, por ejemplo
para gestionar facturas de proveedores.
Con lo cual, Angular CLI crea un nuevo directorio llamado como el módulo,
facturas, dentro del directorio del módulo principal, app.
www.fullengineeringbook.net
El código del archivo creado, facturas.module.ts dispone de un código diferente
al módulo raíz:
src/app/factuas/facturas.module.ts
@NgModule({
imports: [
CommonModule
],
declarations: []
})
export class FacturasModule { }
Página 213
www.fullengineeringbook.net
En el que se añade el módulo CommonModule de las librerías de Angular que
permitirán que los componentes que creemos en nuestro nuevo módulo, por
defecto privados, puedan ser empleados en el módulo raíz o en otros módulos.
www.fullengineeringbook.net
Página 214
www.fullengineeringbook.net
12.2 Componentes de módulos adicionales
src/app/facturas/facturas.module.ts
www.fullengineeringbook.net
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FacturasComponent } from './facturas/facturas.component';
@NgModule({
imports: [
CommonModule
],
declarations: [AddfrasComponent]
})
export class FacturasModule { }
Pues bién, si necesitamos que nuestro componente addfras del módulo facturas
este disponible en nuestro menú, que recordemos se encuentra en el
componente header, necesitamos en primer lugar importar el módulo facturas
al módulo raíz de la aplicación.
Página 215
www.fullengineeringbook.net
Para ello, editamos el archivo app.module.ts y comenzamos por añadir la
importación del nuevo módulo:
src/app/app.module.ts
…
import { FacturasModule } from 'app/facturas/facturas.module';
…
…
imports: [
BrowserModule,
RouterModule.forRoot(routes),
FormsModule,
ReactiveFormsModule,
HttpModule,
FacturasModule
www.fullengineeringbook.net
…
],
src/app/app.module.ts
…
import { FacturasComponent } from 'app/facturas/facturas/facturas.component';
…
Página 216
www.fullengineeringbook.net
Y lo añadimos al array de rutas:
…
{ path: 'facturas', component: FacturasComponent },
…
src/app/header/header.component.html
…
<li class="nav-item" routerLinkActive="active" *ngIf="isAuth()">
<a class="nav-link" routerLink="/facturas">Facturas </a>
</li>
…
www.fullengineeringbook.net
Y dispondremos del componente facturas del módulo facturas en nuestro
navegador:
Dicho de otra forma, cada librería que añadimos en el módulo raíz según
añadíamos funcionalidad a cada componente, debe ser también añadido en un
nuevo módulo si la vamos a usar en los componentes.
Página 217
www.fullengineeringbook.net
Como emplearemos routing, formularios y peticiones Http en los componentes
que creemos en el módulo facturas, vamos a añadirlos al módulo en el archivo
facturas.module.ts comenzando por las importaciones:
src/app/facturas/facturas.module.ts
…
import { Routes, RouterModule } from '@angular/router';
import { ReactiveFormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
…
…
imports: [
CommonModule,
RouterModule.forRoot(),
www.fullengineeringbook.net
ReactiveFormsModule,
HttpModule,
],
…
Quedando así nuestro módulo operativo para crear más componentes, servicios,
etc.
Página 218
www.fullengineeringbook.net
12.3 Componentes CRUD para el módulo adicional.
Podemos añadir a nuestro módulo adicional los componentes para crear, leer,
editar y borrar registros de facturas en nuestra aplicación.
Los pasos a realizar son los mismos que los empleados para los componentes
encargados de gestionar presupuestos, así que es un buen ejercicio para, por
nuestra cuenta, practicar lo aprendido.
www.fullengineeringbook.net
Página 219
www.fullengineeringbook.net
13 Angular Tips & Tricks
Las aplicaciones complejas siempre necesitan cruzar datos entre sus diversas
colecciones de objetos de las bases de datos para facilitar las operaciones que
se realizan en ellas.
src/app/presupuestos/addpres/addpres.component.ts
…
import { ProveedoresService } from '../../servicios/proveedores.service';
…
Página 220
www.fullengineeringbook.net
Ahora declaramos dentro del componente un nuevo objeto proveedores de tipo
array que almacenará los proveedores que recuperemos del servicio:
…
proveedores: any[] = [];
…
…
constructor(private pf: FormBuilder,
private presupuestoService: PresupuestosService,
private router: Router,
private activatedRouter: ActivatedRoute,
private proveedoresService: ProveedoresService)
{
this.proveedoresService.getProveedores()
.subscribe(proveedores => {
www.fullengineeringbook.net
for ( const id$ in proveedores) {
const p = proveedores[id$];
p.id$ = id$;
this.proveedores.push(proveedores[id$]);
}
})
}
…
src/app/presupuestos/addpress/addpres.component.html
…
<div class="form-group">
Página 221
www.fullengineeringbook.net
<label for="tipo">Proveedor</label>
www.fullengineeringbook.net
Y así, gracias a introducir dentro de la etiqueta option de un select la directiva
ngFor para iterar el objeto proveedores, conseguimos un select con los
proveedores de nuestra aplicación.
Página 222
www.fullengineeringbook.net
13.2 Spinner en carga de elementos HTML
src/app/proveedores/proveedores/proveedores.component.ts
…
cargando = true;
…
…
constructor(private proveedoresService: ProveedoresService) {
this.proveedoresService.getProveedores()
.subscribe(proveedores => {
for ( const id$ in proveedores) {
const p = proveedores[id$];
p.id$ = id$;
this.proveedores.push(proveedores[id$]);
}
this.cargando = false;
})
}
…
Página 223
www.fullengineeringbook.net
Ahora, llega el momento de utilizar esta propiedad en la vista, para ello vamos
a crear dos div en los que implementaremos la directiva ngIf condicionada a la
propiedad cargando.
src/app/proveedores/proveedores/proveedores.component.html
…
<div *ngIf="cargando" class="text-center" style="padding-top: 60px;"> ①
<img src="../../../assets/spinner.gif">
</div>
<div *ngIf="!cargando"> ②
//tabla existente
</div>
…
En el cual:
www.fullengineeringbook.net
① Añadimos un div con ngIf asociado a cargando para que muestre una imagen
gif con un spinner mientras cargando sea true.
② Envolvemos la tabla existente con un div que en este caso, también tiene
ngIf pero asociado a cargando cuando esté false.
Página 224
www.fullengineeringbook.net
Hemos simplificado el ejemplo con un spinner incluido en la carpeta de
imágenes assets del proyecto, pero, por supuesto se puede añadir cualquier
tipo de spinner como los numerosos ejemplos en lenguaje HTML5 y CSS que
existen en internet.
www.fullengineeringbook.net
Página 225
www.fullengineeringbook.net
13.3 Elementos de respuesta de autenticación
src/app/autenticacion/inises/inises.component.ts
…
autenticando = false;
…
…
onSubmit() {
this.autenticando = true;
this.userdata = this.saveUserdata();
this.autService.inicioSesion(this.userdata);
setTimeout(() => {
if (this.isAuth() === false) {
this.mensaje = true;
this.autenticando = false;
}
}, 2000);
}
…
Página 226
www.fullengineeringbook.net
A continuación modificamos el botón del formulario en el archivo
inises.component.html:
src/app/autenticacion/inises/inises.component.html
…
<button type="submit"
class="btn btn-primary"
[disabled]="!loginForm.valid"
*ngIf="!autenticando"
>Inicie sesión</button>
<button type="submit"
class="btn btn-primary"
*ngIf="autenticando"
>Autenticando usuario...</button>
…
Página 227
www.fullengineeringbook.net
13.4 Consultas a la base de datos y buscador
De esta manera, el servidor solo devolverá los datos que necesite el usuario en
ese momento, el rendimiento de la aplicación será mayor y las necesidades de
la arquitectura de la aplicación se reducen.
Por tanto, vamos a realizar en el siguiente ejemplo dos mejoras, por una parte
las peticiones a la base de datos las realizaremos mediante consultas o queries
y para determinar esas consultas vamos a implementar un buscador dinámico.
…
<input type="search"
class="form-control"
placeholder="Teclee un Proveedor..."
[formControl]=" campoBusqueda">
…
Página 228
www.fullengineeringbook.net
A continuación en el componente, comenzamos importando la librería forms de
Angular:
src/app/proveedores/proveedores/proveedores.component.ts
…
import { FormControl, FormGroup, FormBuilder, Validators } from
'@angular/forms';
…
…
campoBusqueda: FormControl;
busqueda: string;
…
www.fullengineeringbook.net
También añadimos otra serie de propiedades booleanas que establecerán la
lógica para mostrar los resultados o no, del buscador, similares al
comportamiento de la propiedad cargando:
…
cargando = false;
resultados = false;
noresultados = false;
…
Página 229
www.fullengineeringbook.net
De esta manera, vamos a recuperar solo los datos con coincidencias con nuestro
buscador para lo cual, dentro de ngOnInit añadimos el siguiente código:
…
ngOnInit() {
this.campoBusqueda = new FormControl(); ①
this.campoBusqueda.valueChanges
.subscribe(term => {
this.busqueda = term;
this.cargando = true;
if (this.busqueda.length !== 0) { ②
this.proveedoresService.getProveedoresSearch(this.busqueda)
.subscribe(proveedores => {
this.proveedores = [];
for ( const id$ in proveedores) {
const p = proveedores[id$];
p.id$ = id$;
this.proveedores.push(proveedores[id$]);
}
if (this.proveedores.length < 1 && this.busqueda.length >= 1) {
www.fullengineeringbook.net
this.noresultados = true;
} else {
this.noresultados = false;
}
})
this.cargando = false;
this.resultados = true;
} else {
this.proveedores = []; ③
this.cargando = false;
this.resultados = false;
}
});
}
En el cual:
Página 230
www.fullengineeringbook.net
② Establecemos un if-else para que si la longitud del campo búsqueda es
distinto de cero nos suscribamos a nuevo método del servicio al que enviamos
el valor de búsqueda y el res que recibamos lo iteramos con un for para
almacenarlo en el array proveedores
Por tanto, como llamamos a un nuevo método del servicio, vamos a crearlo en
este. Para ello añadimos al archivo proveedores.service.ts el siguiente código:
src/app/servicios/proveedores.service.ts
…
getProveedoresSearch(busqueda: string) { ①
const url = `${ this.prosURL }?orderBy="nombre"&startAt="${ busqueda
www.fullengineeringbook.net
}"&endAt="${ busqueda }\uf8ff"`; ②
return this.http.get( url )
.map( res => res.json());③
}
…
En el cual:
② Establecemos una url con el valor de nombre, el campo por el que vamos a
realizar la consulta, y los valores de búsqueda que recibiremos a través del
parámetro. Esta url es la que define Firebase en su documentación como
consulta para recuperar registros que en un campo comiencen por el valor
definido.
Página 231
www.fullengineeringbook.net
También la documentación de Firebase nos indica que para emplear en las
consultas los valores de un determinado campo como filtro, debemos de
establecer un índice en este campo.
…
"proveedores": {
www.fullengineeringbook.net
}
".indexOn": ["nombre"]
Con estos pasos nuestro buscador está listo, pero queda añadir los ngIf en la
plantilla para emplear las propiedades booleanas.
src/app/proveedores/proveedores/proveedores.component.html
<h3>Listado de Proveedores</h3>
<a class="btn btn-primary float-md-right" routerLink="/addprovee">Añadir
nuevo proveedor</a>
<br>
<br>
Página 232
www.fullengineeringbook.net
<input type="search"
class="form-control"
placeholder="Teclee un Proveedor..."
[formControl]="campoBusqueda">
<div *ngIf="cargando" class="text-center" style="padding-top: 60px;">
<img src="../../../assets/spinner.gif">
</div>
<div *ngIf="resultados"> ①
<table class="table table-bordered table-striped tabla" style="margin-top:
40px;">
<thead>
<tr class="filters">
<th>Nombre</th>
<th>Correo Electrónico</th>
<th>Teléfono</th>
<th>Editar</th>
<th>Eliminar</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let proveedor of proveedores">
www.fullengineeringbook.net
<td>{{ proveedor.nombre }}</td>
<td><a href="mailto:{{ proveedor.email }}">{{ proveedor.email }}</a></td>
<td>{{ proveedor.telefono }}</td>
<td>
<button type="button" class="btn btn-success"
routerLink="/editprovee/{{ proveedor.id$ }}">Editar</button>
</td>
<td>
<button class="btn btn-danger"
(click)="eliminarProveedor(proveedor.id$)">Eliminar</button>
</td>
</tr>
</tbody>
</table>
</div>
<div *ngIf="noresultados"> ②
<p>No existe ninguna coincidencia</p>
</div>
Página 233
www.fullengineeringbook.net
En el cual:
① Mostraremos la tabla con los proveedores solo cuando resultados sea true,
es decir cuando se halla iniciado el método getProveedoresSearch y haya
devuelto resultados.
www.fullengineeringbook.net
Página 234
www.fullengineeringbook.net
13.5 Upload de archivos
www.fullengineeringbook.net
service firebase.storage {
match /b/{bucket}/o {
match /{allPaths=**} {
allow read, write: if true;
}
}
}
Página 235
www.fullengineeringbook.net
En primer lugar creamos directorio denominado config en el directorio app y en
este añadimos el siguiente archivo:
src/app/config/firebase.config.ts
…
export const environment = {
production: false,
firebase: {
apiKey: "AIzaSyCA0vJPBzNI_uOeKWkk5skmEIqkYDagFAY",
authDomain: "comprasapp-83618.firebaseapp.com",
databaseURL: "https://comprasapp-83618.firebaseio.com",
projectId: "comprasapp-83618",
storageBucket: "comprasapp-83618.appspot.com",
messagingSenderId: "1004906173037"
}
}
…
www.fullengineeringbook.net
Recuerda que en el apartado 11.1 vimos como obtener los datos de nuestro
proyecto Firebase.
src/app/app.module.ts
…
import { AngularFireModule } from 'angularfire2';
import { AngularFireDatabaseModule } from 'angularfire2/database';
import { AngularFireAuthModule } from 'angularfire2/auth';
import { environment } from './config/firebase.config';
…
Página 236
www.fullengineeringbook.net
Y añadimos en los import:
…
imports: [
BrowserModule,
RouterModule.forRoot(routes),
FormsModule,
ReactiveFormsModule,
HttpModule,
FacturasModule,
AngularFireModule.initializeApp(environment.firebase),
AngularFireDatabaseModule,
AngularFireAuthModule,
],
…
Con esto tenemos nuestra aplicación lista para comenzar a escribir los
componentes para subir archivos.
src/app/upload/file.modal.ts
Página 237
www.fullengineeringbook.net
createdAt: Date = new Date();
constructor(file: File) {
this.file = file;
}
}
src/app/servicios/loadfile.service.ts
…
www.fullengineeringbook.net
import { AngularFireDatabase, FirebaseListObservable,
FirebaseObjectObservable } from 'angularfire2/database';
import * as firebase from 'firebase';
import { Archivo } from '../upload/file.model';
…
…
private basePath:string = '/uploads';
uploads: FirebaseListObservable<Archivo[]>;
…
Página 238
www.fullengineeringbook.net
En el constructor, declaramamos angularFireDatabase un objeto que permite la
comunicación en tiempo real con la base de datos de una manera específica de
Firebase, y que por tanto no emplea las peticiones http como empleamos en
otros componentes:
…
constructor( public angularFireDatabase: AngularFireDatabase) { }
…
…
pushUpload(upload: Archivo) {
const storageRef = firebase.storage().ref();
const uploadTask =
storageRef.child(`${this.basePath}/${upload.file.name}`).put(upload.file);
www.fullengineeringbook.net
uploadTask.on(firebase.storage.TaskEvent.STATE_CHANGED,
(snapshot) => {
// upload in progress
upload.progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100
},
(error) => {
// upload failed
console.log(error)
},
() => {
// upload success
upload.url = uploadTask.snapshot.downloadURL
upload.name = upload.file.name
this.saveFileData(upload)
}
);
}
Página 239
www.fullengineeringbook.net
private saveFileData(upload: Archivo) {
this.angularFireDatabase.list(`${this.basePath}/`).push(upload);
}
…
src/app/upload/upload.component.ts
…
import { Archivo } from './file.model';
import { LoadfileService } from '../servicios/loadfile.service';
import * as _ from 'lodash';
www.fullengineeringbook.net
…
…
selectedFiles: FileList;
currentUpload: Archivo;
loading = false;
…
Página 240
www.fullengineeringbook.net
Seguidamente, llamamos al servicio en el constructor y creamos el métodos
uploadSingle:
…
constructor (public loadfileService: LoadfileService) {}
uploadSingle() {
const file = this.selectedFiles.item(0);
this.currentUpload = new Archivo(file);
this.loading = true;
this.loadfileService.pushUpload(this.currentUpload);
}
…
src/app/upload/upload.component.ts
www.fullengineeringbook.net
<div class="row">
<h3>Contratos</h3>
</div>
<hr>
<div class="row">
<div class="col-md-2">
</div>
<div class="col-md-8 col-md-offset-2">
<div class="uploader">
<p style="font-size: 40px">
<i class="fa fa-file-pdf-o"></i>
<i class="fa fa-file-word-o" style="padding-left: 20px;"></i>
<i class="fa fa-file-excel-o" style="padding-left: 20px;"></i>
<i class="fa fa-file-picture-o" style="padding-left: 20px;"></i>
</p>
<input type="file" (change)="detectFiles($event)">
</div>
<div class="text-center">
<button type="button"
class="btn btn-success"
Página 241
www.fullengineeringbook.net
[disabled]="!selectedFiles"
(click)="uploadSingle()">
Subir archivo</button>
src/app/upload/upload.component.ts
.uploader {
background-color: #ea6112;
color: white;
width: 100 %;
height: 160px;
margin: 40px;
padding-top: 40px;
text-align: center;
Página 242
www.fullengineeringbook.net
De esta manera nuestro componente ya está listo así que vamos a añadir su ruta
al archivo app.module.ts:
src/app/app.module.ts
…
{ path: 'uploads', component: UploadComponent },
…
src/app/header/header.component.html
…
<li class="nav-item" routerLinkActive="active" *ngIf="isAuth()">
<a class="nav-link" routerLink="/uploads">Uploads </a>
</li>
www.fullengineeringbook.net
…
Página 243
www.fullengineeringbook.net
Que quedará almacenado en Firebase en la opción Storage, dentro del
directorio uploads:
www.fullengineeringbook.net
Página 244
www.fullengineeringbook.net
Ya tenemos nuestro nuevo componente asi que en primer lugar, vamos a editar
el archivo contratos.component.ts y comenzamos a añadir las importaciones:
src/app/contratos/contratos.component.ts
…
import { FirebaseListObservable } from 'angularfire2/database';
import { LoadfileService } from '../servicios/loadfile.service';
import { Archivo } from '../upload/file.model';
…
…
uploads: FirebaseListObservable<Archivo[]>;
…
www.fullengineeringbook.net
Y llamamos al servicio en el constructor para a continuación igualar, dentro de
ngOnInit(), el array al método del servicio getUploads.
…
constructor(private loadfileService: LoadfileService) { }
ngOnInit() {
this.uploads = this.loadfileService.getUploads();
}
…
Hemos llamado a un método del servicio para que nos devuelva los datos de
los archivos que tenemos alojados en Firebase, así que tenemos que editar el
mismo para añadir este nuevo método.
Página 245
www.fullengineeringbook.net
Por tanto, en el archivo loadfile.service.ts añadimos en la clase un método que
emplea la clase list para recuperar los objetos de archivo y devolverlos en
uploads, array que ya creamos en el paso anterior:
src/app/contratos/contratos.component.ts
…
getUploads() {
this.uploads = this.angularFireDatabase.list(this.basePath);
return this.uploads
}
…
src/app/contratos/contratos.component.html
www.fullengineeringbook.net
<h3>Listado de Contratos</h3>
<a class="btn btn-primary float-md-right"
routerLink="/uploads">Subir nuevo contrato</a> ①
<br>
<div *ngFor="let upload of uploads | async"> ②
<app-detalles [upload]='upload'></app-detalles>
</div>
En el cual:
② Creamos un div con ngFor pero en este caso, con el pipe async, para iterar
el array uploads. Para poder posteriormente utilizar el objeto para borrarlo,
introducimos un componente hijo que crearemos posteriormente con el nombre
detalles.
Página 246
www.fullengineeringbook.net
Antes de crear el componente detalles en el que cargaremos cada objeto
upload, vamos a finalizar este paso, añadiendo la ruta del nuevo componente,
al archivo app.module.ts:
src/app/app.module.ts
…
{ path: 'contratos', component: ContratosComponent },
…
src/app/header/header.component.html
…
<li class="nav-item" routerLinkActive="active" *ngIf="isAuth()">
www.fullengineeringbook.net
<a class="nav-link" routerLink="/contratos">Contratos </a>
</li>
…
src/app/contratos/detalles/detalles.component.ts
Página 247
www.fullengineeringbook.net
Y en la clase añadimos @Input con el objeto upload de la clase Archivo que nos
vendrá del componente padre.
…
@Input() upload: Archivo;
…
src/app/contratos/detalles/detalles.component.html
En la cual añadimos el nombre del archivo, un botón la url del archivo para
visualizarlo o descargarlo y un botón para eliminarlo que programaremos en el
siguiente apartado.
Página 248
www.fullengineeringbook.net
Ya podemos comprobar en el navegador, como se carga el archivo que subimos
a Firebase y podemos visualizarlo o descargarlo:
Para finalizar esta funcionalidad solo nos queda poder borrar los archivos, con
lo cual comenzamos editando el servicio, en el archivo loadfiles.service.ts en el
cual añadimos:
src/app/servicios/loadifle.service.ts
www.fullengineeringbook.net
…
deleteUpload(upload: Archivo) {
this.deleteFileData(upload.$key)
.then( () => {
this.deleteFileStorage(upload.name)
})
.catch(error => console.log(error))
}
private deleteFileStorage(name:string) {
const storageRef = firebase.storage().ref();
storageRef.child(`${this.basePath}/${name}`).delete()
}
…
Página 249
www.fullengineeringbook.net
Hemos añadido 3res métodos, deleteUpload que recibirá del componente el
objeto upload a eliminar, deleteFileData que eliminará por su identificador el
objeto de la base de datos Firebase, y deleteFileStorage que eliminará por su
propiedad name el archivo del servicio de almacenamiento de Firebase.
src/app/contratos/detalles/detalles.component.ts
…
import { LoadfileService } from '../../servicios/loadfile.service';
…
Y en la clase:
…
constructor(private loadfileService: LoadfileService) { }
…
www.fullengineeringbook.net
deleteUpload(upload) {
this.loadfileService.deleteUpload(this.upload);
}
…
src/app/contratos/detalles/detalles.component.html
…
<button class="btn btn-danger float-md-right"
(click)='deleteUpload(upload)'>Eliminar</button>
…
Página 250
www.fullengineeringbook.net
13.6 Menú en pantalla de inicio
src/app/inicio/inicio.component.ts
…
import { AutenticacionService } from '../servicios/autenticacion.service';
…
…
constructor(private autService: AutenticacionService) { }
…
isAuth() {
return this.autService.isAuthenticated();
www.fullengineeringbook.net
…
}
src/app/inicio/inicio.component.html
Página 251
www.fullengineeringbook.net
<i class="fa fa-address-book-o" style="font-size: 60px"></i>
<p style="font-size: 24px; padding-top: 15px">Proveedores</p>
</div>
</a>
</div>
<div class="col-md-3">
<a routerLink="/presupuestos" style="text-decoration: none">
<div class="rectgreen">
<i class="fa fa-address-book-o" style="font-size: 60px"></i>
<p style="font-size: 24px; padding-top: 15px">Presupuestos</p>
</div>
</a>
</div>
<div class="col-md-3">
<a routerLink="/facturas" style="text-decoration: none">
<div class="rectviolet">
<i class="fa fa-address-book-o" style="font-size: 60px"></i>
<p style="font-size: 24px; padding-top: 15px">Facturas</p>
</div>
</a>
</div>
www.fullengineeringbook.net
<div class="col-md-3">
<a routerLink="/contratos" style="text-decoration: none">
<div class="rectpink">
<i class="fa fa-address-book-o" style="font-size: 60px"></i>
<p style="font-size: 24px; padding-top: 15px">Contratos</p>
</div>
</a>
</div>
</div>
src/app/inicio/inicio.component.css
.rectorange {
background-color: #ea6112;
color: white;
text-align: center;
padding: 20px;
Página 252
www.fullengineeringbook.net
margin: 20px;
}
.rectorange:hover {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4), 0 6px 20px 0 rgba(0, 0, 0, 0.4);
}
.rectgreen {
background-color: #12ea6f;
color: white;
text-align: center;
padding: 20px;
margin: 20px;
}
.rectgreen:hover {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4), 0 6px 20px 0 rgba(0, 0, 0, 0.4);
}
.rectviolet {
background-color: #b412ea;
www.fullengineeringbook.net
color: white;
text-align: center;
padding: 20px;
margin: 20px;
}
.rectviolet:hover {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4), 0 6px 20px 0 rgba(0, 0, 0, 0.4);
}
.rectpink {
background-color: #ea1261;
color: white;
text-align: center;
padding: 20px;
margin: 20px;
}
.rectpink:hover {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4), 0 6px 20px 0 rgba(0, 0, 0, 0.4);
}
Página 253
www.fullengineeringbook.net
De esta manera, cuando no esté iniciada sesión, la aplicación mostrará:
Y al iniciar sesión:
www.fullengineeringbook.net
Página 254
www.fullengineeringbook.net
14 Despliegue a producción
14.1 Build
Este proceso crea un directorio dist (de distribución) en nuestro proyecto que
compila, minifica y comprime los archivos de tal manera que conseguimos un
bundle de muy pequeño tamaño para subir al servidor, cuyo punto de entrada
seguirá siendo el archivo index.html.
ng build --prod
www.fullengineeringbook.net
El proceso puede durar varios minutos en función del tamaño de la aplicación,
y una vez finalizado tendremos la versión de producción de nuestra aplicación
en el directorio dist:
Página 255
www.fullengineeringbook.net
14.2 Despligue a Amazon Web Services S3 Bucket
https://aws.amazon.com/es/free/
www.fullengineeringbook.net
En el cuadro completamos un nombre, por ejemplo comprasapp, una zona, por
ejemplo US Standar y pulsamos en create:
Página 256
www.fullengineeringbook.net
En esta opción, añadimos index.html tanto en el campo Index Document como
en el Error Document, y guardamos los cambios:
A continuación vamos a cambiar los permisos del Bucket, para lo cual pulsamos
en la opción Permissions y dentro de esta pulsamos en Add bucket policy:
www.fullengineeringbook.net
En el cuadro vamos a pegar la siguiente política, que como vemos contiene el
nombre de nuestro bucket:
{
"Version":"2012-10-17",
"Statement":[
{
"Sid":"AddPerm",
"Effect":"Allow",
"Principal": "*",
"Action":["s3:GetObject"],
"Resource":["arn:aws:s3:::comprasapp/*"]
}
]
}
Página 257
www.fullengineeringbook.net
Y guardamos los cambios:
Nuestro bucket ya está listo asi que hacemos doble clic sobre él y pulsamos en
la opción Upload :
www.fullengineeringbook.net
Y seleccionamos nuestro archivos de producción que recordemos se encuentran
en la carpeta dist del proyecto, para finalmente pulsar en Start Upload:
Página 258
www.fullengineeringbook.net
Una vez que finalice la carga, accedemos de nuevo a la opción Static Website
hosting y en la opción Endpoint se encuentra la url de nuestro bucket:
www.fullengineeringbook.net
Por supuesto se le puede añadir un nombre de dominio de AWS o cualquier
otro proveedor, así como cualquier sistema de protección recomendable.
Página 259
www.fullengineeringbook.net
Anexo Extra I Instalación de Node y NPM
https://nodejs.org/es/
www.fullengineeringbook.net
Una vez descargado el archivo .msi lo ejecutamos con doble clic desde nuestra
carpeta de descargas para iniciar el asistente:
Página 260
www.fullengineeringbook.net
Realizamos los pasos que nos vaya solicitando el asistente por defecto, y si nos
fijamos, el asistente instalará tanto Node Js como NPM, y añadirá sus rutas al
path de windows:
Una vez concluida la instalación es necesario reiniciar el equipo para que las
rutas se carguen y podamos emplear node o nmp desde la consola.
www.fullengineeringbook.net
tecleando en la consola:
node –v
npm –v
Página 261
www.fullengineeringbook.net
En el caso de instalar Node y NPM en un equipo Mac el proceso es exactamente
igual, siendo la última pantalla del asistente la siguiente:
En el cual se nos especifica donde han sido instalados Node JS y NPM y como
debemos tener establecido en el path la ruta /usr/local/bin/
www.fullengineeringbook.net
Página 262
www.fullengineeringbook.net
Anexo Extra II de Visual Studio Code
Nuestro editor favorito es Visual Studio Code, que además distribuye libremente
Microsoft.
https://code.visualstudio.com/
www.fullengineeringbook.net
Página 263
www.fullengineeringbook.net
Una vez descargado el paquete, lo ejecutamos y realizamos los pasos que nos
vaya solicitando:
Para instalar un plugin, pulsamos en el último botón del menú lateral izquierdo
www.fullengineeringbook.net
y en el buscador, completamos el nombre de un plugin, por ejemplo HTML
Snippets y pulsamos en el botón verde Instalar:
Página 264
www.fullengineeringbook.net
Para que funcione, en la pantalla de detalle del plugin pulsamos en el botón azul
Recargar y en el cuadro de diálogo pulsamos en Volver a cargar Windows.
www.fullengineeringbook.net
Con esto, tendremos el plugin implementado y funcionando.
Página 265
www.fullengineeringbook.net
Anexo Extra III Ciclo de Vida Angular
Angular tiene un ciclo de vida compuesto por las diferentes fases en las que
genera la aplicación. Al tratarse de una arquitectura de componentes, las fases
del ciclo de vida van instanciando las clases de los componentes y Angular
dispone de una serie de métodos hooks que se llaman a medida que se genera
la aplicación.
www.fullengineeringbook.net
La principal diferencia entre el constructor y ngOnInit es que mientras el primero
es un elemento propio de JavaScript y podríamos decir, ajeno a Angular, el
segundo se trata de una funcionalidad propia de Angular y por tanto sometida
al control por parte del framework, aunque en esencia, realizan prácticamente
la misma función.
El siguiente método del ciclo de vida ngDoCheck se ejecuta cada vez que se
produce, en general, un cambio en la template del componente, tanto cambios
en propiedades, como eventos, modificaciones del DOM, etc.
ngAfterViewInit se ejecutará una vez que las vistas del componente (y sus vistas
hojas) se han inicializado, seguido de ngAfterViewChecked.
Página 266
www.fullengineeringbook.net