Universidad Afro Americana de África Central

Facultad de ingenierías: Ingeniería informática

Programación de Aplicaciones Distribuidas

Desarrollo web front-end con Angular
Cuarto año semestre VII curso académico : 2022-2023
Diosdado Asumu NDONG ANDEME

Estructura angular 2, 4, 5, 6,…..16

 Angular
- Angular Le permite crear la parte frontal de aplicaciones web tipo SPA
(Single Page Responsive Application).
- Un SPA es una aplicación que contiene una única página HTML
(index.html) recuperada del servidor.
- Para navegar entre las diferentes partes de esta aplicación, se utiliza
Java Script para enviar solicitudes http (AJAX) al servidor para
recuperar contenido dinámico generalmente en formato JSON.
- Este contenido JSON luego se muestra en el lado del cliente en formato HTML en la
misma página.

Parte delantera
Parte trasera

Servidor web

HTTP Parte trasera

JSON API de descanso SGBD
PHP, JEE, .Net, NodeJS

aannguullaarr
Angular 1, 2,4,5,…..,16
- Angular 1 (AgularJS):
◦ Primera versión de Angular que es la más popular.
◦ Se basa en una arquitectura MVC del lado del cliente. Las
aplicaciones de Angular 1 están escritas en Java Script.

- Angular 2 (Angular):
◦ Es una reescritura de Angular 1 que es más eficiente, mejor
estructurada y representa el futuro de Angular.
◦ Las aplicaciones Angular2 están escritas en Type Script, que se
compila y traduce a Java Script antes de ser ejecutadas por
BrowsersWeb.
◦ Angular 2 se basa en la programación basada en
Componentes Web (Web Component)
- Angular 4, 5, 6,…16 son actualizaciones
simples de Angular 2 con mejoras de
rendimiento.
Angular con Type Script
- Para desarrollar una aplicación Angular, se
recomienda utilizar Type Script que será
compilado y traducido a Java Script.
- Type Script es un lenguaje de programación
estructurado y orientado a objetos que simplifica el
desarrollo de aplicaciones Java Script.

Compilado en

Escriba guión secuencia de comandos java

Script

lenguaje estructurado
Mecanografiado y orientado a objetos
 Solicitud de una sola página: SPA

- Angular Le permite crear la parte frontal de aplicaciones

web tipo SPA (Aplicación de página única)

Parte delantera
Parte trasera

Servidor web

HTTP Parte trasera

JSON API desarrollado en SGBD
PHP, JEE, .Net, NodeJS

aannguullaarr
RECORDATORIOS A TRAVÉS DE HTTP
 EL PROTOCOLO HTTP
- HTTP: protocolo de transferencia de hipertexto
◦ Protocolo que permite al cliente recuperar documentos del
servidor.
◦ Estos documentos pueden ser estáticos (contenido que no cambia:
HTML, PDF, Imagen, etc.) o dinámicos (Contenido generado
dinámicamente en el momento de la solicitud: PHP, JSP, ASP, etc.)
◦ Este protocolo también permite enviar
formularios.
◦ El cliente se conecta al servidor (Crear socket)
◦ El cliente solicita un documento al servidor: solicitud HTTP
◦ El servidor devuelve el documento al cliente (estado=200) o un
error (estado=404 cuando el documento no existe)
◦ Desconectar
 Conexión

cliente HTTP Conexión Servidor web

:Enchufe :ServidorSocket
OBTENER /doc.htm
FPS=
Puerto=80 Publicar /script.php puerto=80
respuesta HTTP aceptar()

Estado=200

Desconectar :Enchufe
Doc.htm IPC=…. Doc.htm
puerto=….
 Métodos de protocolo HTTP
- Se puede enviar una solicitud HTTP utilizando los
siguientes métodos:
◦ GET: Para recuperar el contenido de un documento
◦ POST: Para enviar formularios (Enviar, en la
solicitud, datos ingresados por el usuario)
◦ PUT enviar un archivo desde el cliente al servidor
◦ DELETE le permite pedirle al servidor que elimine un
documento.
◦ HEAD le permite recuperar información sobre un
documento (Tipo, Capacidad, Fecha de última modificación,
etc.)
El cliente envía la solicitud.:método POST

Encabezado de solicitud

Publicación /Script_Name HTTP/1.0 Método, ruta, versión

anfitrión: www.intra.net Nombre de dominio

Código de lenguaje
ACCTEPT_LANGUAGE: fr
Tipo y versión del
Agente de usuario: Mozilla/4.0
navegador
* * * salto de línea ***

iniciar sesión=Valor1& pasar=Valor2

& Var3=Valor3 Configuraciones para los

diferentes campos del formulario.

cuerpo de la solicitud
El cliente envía la solicitud.:GET método

Encabezado de solicitud

¿GET /Nombre_script?iniciar sesión=val1&contraseña=val2&….HTTP/1.0

anfitrión: www.intra.net
ACCEPT_LANGUAGE: fr
Agente de usuario: Mozilla/4.0

el cuerpo de la solicitud está vacío

El servidor devuelve la respuesta:

Encabezado de respuesta

HTTP/1.0 200 correcto Línea de estado

Fecha: miércoles, 05 de febrero de 2002 15:02:01 fecha del servidor
GMT Servidor: Apache/1.3.24 Nombre del servidor

Última modificación: miércoles 02 de octubre de 2001 a las 24:05:01 GMT

última modificación
Tipo de contenido: Texto/html Tipo de contenido
Longitud del contenido: 4205 Su talla
* * * salto de línea ***

<HTML><CABEZAL>

…. El archivo que mostrará

</BODY></HTML> el cliente.
Código de estado
- Cuando el servidor devuelve un documento, lo asocia a un código de
estado informando así al cliente sobre el resultado de la solicitud (solicitud
no válida, documento no encontrado, etc.).

- Los principales valores de los códigos de estado HTTP se detallan

en la siguiente tabla.
- Información 1xx:
◦ 100 (Continuar): Úselo si la solicitud tiene cuerpo.
◦ 101 (Protocolo de conmutación): Solicite al cliente que cambie el protocolo. Por
ejemplo de Http1.0 a Http 1.1

- Logro 2xx:
◦ 200 (OK): Se encontró el documento y su contenido sigue
◦ 201 (Creado): El documento fue creado en respuesta a un PUT
◦ 202 (Aceptado): Solicitud aceptada, pero procesamiento no completado
◦ 204 (Sin respuesta): El servidor no tiene información para devolver
◦ 206 (Contenido parcial): Parte del documento sigue
Código de estado
- Redirección 3xx:
◦ 301 (Movido): El documento ha cambiado de dirección permanentemente
◦ 302 (Encontrado): El documento ha cambiado de dirección temporalmente
◦ 304 (No modificado): El documento solicitado no ha sido modificado
- Errores del cliente 4xx:
◦ 400 (solicitud incorrecta): la sintaxis de la solicitud es incorrecta
◦ 401 (No autorizado): El cliente no tiene privilegios de acceso al documento
◦ 403 (Prohibido): El acceso al documento está prohibido
◦ 404 (No encontrado): No se pudo encontrar el documento solicitado
◦ 405 (Método no permitido): El método de consulta no está permitido
- Errores del servidor 5xx:
◦ 500 (error interno): se produjo un error inesperado en el servidor
◦ 501 (No implementado): El método utilizado no está implementado
◦ 502 (Puerta de enlace incorrecta): error del servidor remoto durante una solicitud de proxy
encabezados HTTP
- Encabezados HTTP genéricos:
◦ Longitud del contenido: longitud en bytes de datos después de los encabezados
◦ Tipo de contenido: tipo MIME de los siguientes datos
◦ Conexión: Indica si la conexión TCP debe permanecer abierta (Keep-
Alive) o cerrarse (close)
- Encabezados de solicitud:
◦ Aceptar: tipos MIME que acepta el cliente.
◦ Aceptar codificación: métodos de compresión admitidos por el cliente.
◦ Idioma de aceptación: Idiomas preferidos por el cliente (ponderados)
◦ Cookie: Datos de cookies almacenados por el cliente
◦ Anfitrión: Anfitrión virtual solicitado
◦ If-modified-since: Sólo devuelve el documento si se modificó desde la fecha
indicada
◦ If-none-match: Solo devuelve el documento si ha cambiado
◦ Referer: URL de la página desde la que se solicita el documento
◦ Agente de usuario: Nombre y versión del software cliente.
Encabezados de respuesta

- Permitido: métodos HTTP permitidos para este URI (como POST)

- Codificación de contenido: método de comprimir los datos que siguen
- Idioma del contenido: Idioma en el que está escrito el documento
devuelto.
- Fecha: fecha y hora UTC actuales
- Expires: Fecha de vencimiento del documento.
- Última modificación: fecha en que se modificó por última vez el documento.

- Ubicación: Dirección del documento durante una redirección

- Etiqueta electrónica: número de versión del documento

- Pragma: datos auxiliares para el navegador (por ejemplo, no.cache)

- Servidor: nombre y versión del software del servidor.

- Set-cookie: permite al servidor escribir una cookie en el disco del cliente.

 Sesión y cookies
Cliente Servidor
HTTP Web
Conexión
enchufe enchufe

Solicitud HTTP 1: GET/index.html

Crear :: SSeessssiio onn
oIrIeD==1122
Seessssiio

Respuesta HTTP 1 nombre de usuario = x

Galletas
JSESSIONID=12; índice.html
Encabezado HTTP: Establecer cookie:JSESSIONID=12;

Desconectar
Consultar sesión
Para identificar el
cliente que tiene

envió la solicitud
Nueva conexión
enchufe enchufe

Solicitud HTTP 2: POST/Guardar

Encabezado HTTP: Cookie:JSESSIONID=12;

respuesta HTTP2
Vista de confirmación de registro
Desconectar
 Uso de sesiones y cookies
- Generalmente, cuando un cliente HTTP envía su primera solicitud, el servidor web
crea una sesión para este cliente.
- Una sesión es un objeto almacenado en la memoria del servidor que se puede utilizar para
almacenar información relacionada con el cliente.

- El servidor asigna un SessionID único a cada sesión.

- Luego, este ID de sesión se envía en la respuesta http como una cookie
utilizando el encabezado de respuesta HTTP:
◦ Establecer cookies:JSESSIONID=F84DB7B959F76B183DBF05F999FAEE11;
- Lo que significa que el servidor le pide al cliente que guarde este SESSIONID en un
archivo almacenado en la máquina del cliente llamado COOKIE.
- Una vez que el cliente recibe la respuesta HTTP, la conexión se cierra.
- Cada vez que el cliente envía una solicitud HTTP al servidor, siempre
envía datos de cookies, incluido el SESSIONID.
- Las cookies se envían en la solicitud HTTP mediante un encabezado
COOKIE:
◦ Galleta:JSESSIONID=F84DB7B959F76B183DBF05F999FAEE11
- Gracias a esta información, el servidor puede saber qué cliente es incluso si se
trata de una conexión nueva.
 Sesión y Cookies > Paciente y médico

Paciente Doctor

Llamar
En línea En línea
soy un paciente nuevo Crear :: FFiicchhee

quiero una consulta Numuem

erro =1122
o =

Acordarse respuesta 1 nombre=x

del numero
de Aquí está el tratamiento a seguir.
paciente=12; Su número de paciente es=12;

Gracias adios
Encuentra el archivo
Del paciente
numero 12

Llamar
En línea En línea
quiero una consulta
Mi número es=12;

Aquí está el nuevo tratamiento a tomar.

Gracias adios
 Solicitud de una sola página: SPA

- Angular Le permite crear la parte frontal de aplicaciones

web tipo SPA (Aplicación de página única)

Parte delantera
Parte trasera

Servidor web

HTTP Parte trasera

JSON API de descanso SGBD
PHP, JEE, .Net, NodeJS

aannguullaarr
Comience con Angular
- https://angular.io/guide/quickstart
Instalación de herramientas

- Para facilitar el desarrollo de una aplicación

Angular se deben instalar las siguientes
herramientas:
◦ NodoJS:https://nodejs.org/en/download/
- Node JS instala la herramienta npm (Node Package Manager)
que le permite descargar e instalar bibliotecas de Java Script.

◦ Luego instale Angular CLI (Interfaz de línea de

comando) que le permite generar, compilar, probar
e implementar proyectos Angular
(https://cli.angular.io/):

- npm install -g @angular/cli

Creando un nuevo proyecto angular

- Para generar la estructura de un proyecto Angular,

usamos Angular CLI a través de su comando ng
seguido de las nuevas opciones y el nombre del
proyecto.

◦ ng new aplicación

- Este comando genera los diversos archivos

requeridos por una aplicación Angular básica y
también instala todas las dependencias
requeridas por este proyecto.
 Ejecutar un proyecto angular

- Para ejecutar un proyecto Angular, ejecute el

siguiente comando desde la raíz del proyecto

◦ ng serve
- Este comando compila el código fuente del
proyecto para transpilar el código TypeScript a
Java Script y al mismo tiempo inicia un servidor
web local basado en Node JS para implementar
la aplicación localmente.
- Para probar el proyecto generado, simplemente cambie el
navegador y escriba la URL: http://localhost:4200
- En el siguiente paso, veremos la estructura
del proyecto generado por Angular CLI.
Editando el proyecto

- Se pueden utilizar varios IDE

profesionales para editar código:
◦ Intellij idea
◦ Web storm, storm PHP
◦ Visual studio
◦ Eclipse con complemento Angular
- También se pueden utilizar otros
editores clásicos:
◦ Atom
◦ Sublime text
◦ Etc …
Estructura angular del proyecto.
Archivo de configuración del proyecto

Dependencias externas del proyecto (bibliotecas Java Script y CSS)

Lógica de aplicación de su proyecto: Componentes, Servicios, etc. Es en

esta carpeta de la aplicación donde pasará su tiempo de desarrollo.

Código fuente para tu proyecto

Archivo de configuración del proyecto

Estructura angular del proyecto.

índice.html
index.html

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>FirstApp</title>
<base href="/">
<meta name="viewport"
content="width=devicewidth,
initial-scale=1">
<link rel="icon" type="image/x-icon"
href="favicon.ico">
</head>
<body>

</body>
</html>
Estructura angular del proyecto.

main.ts

import { enableProdMode } from '@angular/core';

import { platformBrowserDynamic } from
'@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from
'./environments/environment';
if (environment.production) {
enableProdMode();
}
Estructura angular del proyecto.

app.module.ts

aplicación.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule
],
providers: [],

})
export class AppModule { }
Estructura angular del proyecto.
application.component.ts

import { Component } from '@angular/core';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app';
}

application.component.html
<div style="text-align:center">
<h1>
Welcome to {{title}}!!
</h1>
</div>

application.component.css

Los archivos de especificaciones son pruebas unitarias para sus archivos fuente. La
convención para las aplicaciones Angular2 es tener un archivo .spec.ts para cada archivo .ts.
Se ejecutan utilizando el marco de prueba de JavaScript Jasmine a través del programa de
tareas Karma cuando se usa el comando
Plan de estudios
- Empezando con Angular
- Los conceptos básicos de Angular
- Components and Data BindingPautas
- Directivas
- Servicios e inyección de dependencia
- Enrutamiento
- observables
- Formularios
- Pipes
- http
- Autenticación
- Optimización y NgModules
- Despliegue
- Entretenimiento
- Pruebas
- Type Script
- Type Script es un lenguaje de programación gratuito y de código
abierto desarrollado por Microsoft que tiene como objetivo mejorar y
asegurar la producción de código JavaScript.
- Es un superconjunto de JavaScript (es decir, cualquier código
JavaScript correcto se puede utilizar con TypeScript).
- El código TypeScript se transcompila a JavaScript, por lo que
puede ser interpretado por cualquier navegador web o motor
JavaScript.
- Fue co-creado por Anders Hejlsberg, el principal inventor de
C#.
- TypeScript permite la escritura estática opcional de variables
y funciones, la creación de clases e interfaces, la importación
de módulos, manteniendo el enfoque no restringido de
JavaScript.
- Es compatible con la especificación ECMAScript 6.
 Arquitectura de Angular
- Angular es un marco para crear la parte front-end de aplicaciones web
utilizando HTML y JavaScript o TypeScript compilado en JavaScript.
- Una aplicación Angular consta de:
◦ De uno a varios módulos, uno de los cuales es principal.
◦ Cada módulo puede incluir:
- Componentes web: la parte visible de la aplicación web (UI)
- Servicios para la lógica de aplicaciones. Los componentes pueden
utilizar servicios mediante el principio de inyección de dependencia.
- Directivas: un componente puede utilizar directivas
- Tuberías: utilizadas para formatear la visualización de datos en
componentes.

Módulo angular: app.module.ts

Componentes Servicios Directivas

C1 Servicio 1
pipes
Servicio 2
C2 C3 C4
Servicio 3
C5 C6
 Módulos
- Las aplicaciones angular son modulares
- Angular tiene su propio sistema de modularidad llamado Angular
Modules o NgModules.
- Cada aplicación Angular tiene al menos una clase de módulo Angular: el
módulo raíz, clásicamente llamado Módulo de aplicación.
- Un módulo Angular es una clase con un decorador.@NgModule.
- Los decoradores son funciones que modifican las clases de JavaScript.
- Angular tiene muchos decoradores que adjuntan metadatos a lasclases
para configurarlas y darles sentido.

src/app/app.module.ts

import { NgModule } from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';
@NgModule({
imports: [ BrowserModule ],
providers: [ Logger ],
declarations: [ AppComponent ],
exports: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
 @NgModule
- @NgModule es un decorador que cuelga como parámetro un objeto
javascript que contiene metadatos cuyas propiedades describen el módulo.
Las propiedades más importantes son:
◦ declaraciones: la clase que representa el módulo. Angular tiene tres
tipos de clases de módulos: componentes,directivas, y pipes.
◦ exportaciones–Para exportar clases que se pueden utilizar en otros módulos.
◦ importaciones–Para importar otros módulos.
◦ proveedores–Declarar fábricas de servicios.
◦ bootstrap– Declarar el componente raíz del módulo. Sólo el módulo raíz
debe establecer esta propiedad.
 Iniciando la aplicación
- El módulo raíz se inicia en el archivo main.ts
- Por defecto el módulo raíz se llama AppModule

importar{enableProdMode } desde'@angular/núcleo';
importar{plataformaBrowserDynamic } de'@angular/plataforma-navegador-dinámico';

importar{AppModule } de'./aplicación/módulo de aplicación'; importar{

ambiente } de'./entornos/ambiente';

si(entorno.producción) {
enableProdMode();
}

plataformaBrowserDynamic().bootstrapModule(Módulo de aplicación);
 Componentes
- Los componentes son elementos importantes en Angular.
- La aplicación está formada por un conjunto de componentes.
- Cada componente puede anidar otros componentes, definiendo así
una estructura jerárquica.
- El componente raíz se llama root-component Raíz
componente
Componente 1 Componente 2 Componente 3

H A B

Componente 6
Componente 5

Componente 4
Componentes
- Cada componente consta principalmente de los siguientes elementos:
◦ Plantilla HTML: representando su vista
◦ Una clase que representa su lógica de negocios.
◦ Una hoja de estilo CSS
◦ Un archivo de especificaciones son pruebas unitarias. Se ejecutan utilizando el
marco de prueba de JavaScript Jasmine a través del programa de tareas Karma
cuando se usa el comando 'prueba de ng'.

- Los componentes son fáciles de actualizar e intercambiar entre

diferentes partes de las aplicaciones.

aplicación.componente.ts

importar{Componente }from'@angular/núcleo';
@Component({
selector:'app-root', URL de plantilla:
'./aplicación.componente.html', estiloURL: ['./
app.component.css']
})
export class AppComponent {
título='aplicación';
}

aplicación.componente.html
aplicación.componente.css
<div style="text-
align:center">
<h1>
Welcome to {{ título}}!!
</h1>
</div>
 Creación de nuevos componentes.
- Para crear fácilmente componentes Angular, podemos usar el comando
ng nuevamente de la siguiente manera:

◦ Ng generate component ComponentName

- En nuestro ejemplo, crearemos dos componentes: acerca de y
contactos
Estructura del componente about
acerca de.component.ts

importar{ Componente, OnInit }de'@angular/núcleo';

@Componente({
selector:'acerca de la aplicación', URL de plantilla
:'./acerca del.componente.html', estiloURL: ['./
acerca.componente.css']
})
clase de exportaciónAcerca del componenteimplementosAl iniciar {
constru ctor() {
}ngOnInit() {
}
}

acerca de.componente.html

<pag>

sobre obras!
</p>

acerca de.componente.css
 @Component
- Un componente es una clase que tiene el decorador @Component
- Este decorador tiene las siguientes propiedades:
◦ selector: indica la declaración que le permite insertar el componente en el
documento HTML. Esta declaración puede ser:
- El nombre de la etiqueta asociada con este componente.
- selector : acerca de la aplicación
- En este caso el componente será insertado por:<app-about></app-about>
- El nombre del atributo asociado con este componente:
- selector : [app-about]
- En este casoel el selector será insertado por : <div app-about ></div>
- El nombre de la clase asociada con este componente:
- selector : . app-about
- En este caso el componente será insertado por : <div clase="app-
about"></div>

◦ plantilla o URL de plantilla:

- plantilla: le permite definir el código HTML que representa la vista
del componente dentro del decorador
- URL de plantilla: le permite asociar un archivo HTML externo que contiene la
estructura de la vista del componente

◦ styleUrls: especifica las hojas de estilo CSS asociadas con este

componente
 Declaración de componentes
- Para utilizar un componente, se
debe declarar en el módulo:
aplicación.module.ts

import {Módulo de navegador }from '@angular/navegador-plataforma';

import { NgMódulo }from '@angular/core';

import { Componente de aplicación}from './app.component'; import {

AboutComponent } from './acerca de/acerca del.componente'; import { Componente
de contactos} from './contactos/contactos.componente';

importaciones: [
Módulo de navegador
],
proveedores: [],
oreja: [Componente de aplicación]
})
export class Módulo de aplicación { }
Uso de componentes
- Se puede insertar un componente en cualquier parte HTML de la
aplicación utilizando su selector asociado.
- En este ejemplo, los dos componentes generados se insertan dentro del
componente raíz AppComponent.
<divestilo ="texto alineado:centro">
<h1>
¡¡Bienvenido a {{título}}!!
</h1>
<app-about>>app-about>
<div contactos de la aplicación>
</div>
</div>

Módulo de aplicación
AppModule
AppComponent

AppComponent
AboutComponent ContactsComponent

Acerca de Contactos
componente Component
El enlace de datos
- Para insertar dinámicamente datos de la aplicación en
vistas de componentes, Angular define técnicas para el
enlace de datos.
- Enlace de datos = comunicación

Clase de componente Parte HTML del componente.

Datos resultantes

Interpolación de cadenas: {{datos}} Vinculación Vista

Type script
Clase
de propiedad: [propiedad]="datos" HTML
Plantillas
del componente Reaccionar a eventos de usuario
Lógica de negocios
 Ejemplos de enlace de datos:

about.component.ts
export class Acerca del componente {

cómo={identificación:0,mensaje:''};

nuevo comentario=FALSO;

agregar comentario() {
si(este.comment.message!=''){

this.comment.id=this.comentarios.
longitud+1;
this.comments.empujar({ id:this.
comment.id, message:this.comment.
mensaje}
); </ul>
this.comment.message=''; } </div>
<plantilla ng#sin comentarios>
} <p> La lista de comentarios está vacía</p> </
} plantilla ng>
 Ejemplos de Data Binding :
about.component.html
about.component.ts <ul>
<li>Nombre : </li>
export class AboutComponent { <li>Correo electrónico: </li>
<li> Teléfono: </li>
</ul>
<div>
<aporte
comments=[]; tipo ="texto"
[(ngModel)]="comment.message" >
comment={fecha:nulo,message:''}; <botón
(clic)="addComment()"
newComment=false; [deshabilitado]="newComment">
Agregar comentario
addComment() { </button>
if(this.comment.message!=''){ </div>
this.comment.date=nueva
<div *ngSi="comentarios.longitud>0; demás sin
fecha();
comentarios">
this.comments.push({ <h3>Lista de mensajes:</h3>
fecha:este.cómo.fecha, mensaje:este.
cómo.mensaje}
);
este.cómo.mensaje=''; }
</div>
} <plantilla ng#sin comentarios>
} <pag> La lista de comentarios está vacía</pag> </
plantilla ng>
Importar módulo de formularios para ngModel
- Para utilizar la directiva ngModel, es necesario importar el
módulo FormsModule desde Angular.

aplicación.module.ts

importar{Módulo del navegador}de'@angular/navegador-plataforma';

importar{NgMódulo}de'@angular/núcleo';
importar{ Componente de aplicación }de'./app.component'; importar{Acerca
del componente}de'./acerca de/acerca del.componente';

importar{Componente de contactos}de'./contactos/contactos.componente';

importar{Módulo de formularios}de“@angular/formularios”;

@NgModule({
declaraciones: [
componente de aplicación,
Acerca del componente,
Componente de contactos
],
importaciones: [
Módulo de navegador, módulo de formularios
],
proveedores:[],
oreja: [Componente de aplicación]
})
clase de exportaciónMódulo de aplicación { }
 Agregue el marco css bootstrap al proyecto

- Una de las formas más elegantes de agregar

nuevos enlaces a archivos css en index.html es
hacerlo usando Angular CLI.
- Primero debes instalar bootstrap con npm:
◦ instalación npm --install bootstrap@4

- Luego agregue la ruta de bottstrap.min.css en el

archivo.angular-cli.json
- Luego inicia el servidor con ng serve

t
 Nueva apariencia con Bootstrap
<div clase ="envase">
<div clase ="panel primario">
<div clase ="encabezado del panel">Acerca de Componente</div>
<div clase ="cuerpo del panel">
<ul clase ="">
<li>Nombre : {{información.apellido}}</li>: {{
<li>Correo electrónico información.Correo electrónico}}</li> {{
<li> Teléfono: información.semejante}}</li>
</ul>
<divclase ="grupo de formularios">
<etiqueta>Mensaje:</etiqueta> <
aporte tipo ="texto"[(ngModelo)]="cómo.mensaje">
<botón (clic)="agregar comentario()"
[deshabilitado]="nuevo clase ="btn btn-primario">Agregar
comentario" cómobotón>
</div>
<div*ngSi="comentarios.longitud>0; demássin comentarios">
<h3>Lista de mensajes:</h3> <ulclase
="grupo de lista">
<li*ngPara="sea c decomentarios"clase ="lista-grupo-
artículo">
{{vs.mensaje}}<durar
clase ="insignia">{{vs.fecha|fecha:'HH:mm:ss'}}</durar>>li>
</ul>
</div>
<plantilla ng#sin comentarios>
<pag> La lista de comentarios está vacía</pag> </
plantilla ng>

</div>
</div>
</div>
 Servicios
- Un servicio es una categoría amplia que abarca cualquier valor, función o funcionalidad
que requiera su aplicación.
- Un servicio es generalmente una clase con un propósito limitado y bien definido.

- Normalmente, los componentes se limitan a mostrar y gestionar eventos de usuario en la

vista de componentes. La ejecución del procesamiento localmente o en el back-end se
asigna a los servicios.
- Cuando ocurre un evento en la vista, el componente llama a funciones en los
servicios para realizar el procesamiento y proporcionar resultados.
- Generalmente, estos son los servicios que interactúan con la parte back-end de la
aplicación mediante el envío de solicitudes HTTP.
- Generalmente son los componentes los que consumen los servicios, sin embargo, un
servicio puede consumir otros servicios.
- El uso de un servicio se realiza mediante el principio de inyección de dependencia.

Plantilla HTML
<>
@Servicio 1 @Servicio 3

@Componente
@Servicio 2
ejemplo.servicio.ts
ejemplo de servicio
importar{ Inyectable }de'@angular/núcleo';
@Inyectable()
clase de exportaciónServicio de ejemplo {
constructor() { }
guardar datos(datos) {
consola.registro('guardando datos en el back-end. .. ');
}
obtener datos() {
console.log('obteniendo datos desde el back-end...');
}
}

ejemplo.componente.ts

import {Componente, OnInit}de'@angular/núcleo'; importar{

Servicio de ejemplo}de"../ejemplo.servicio"; @Componente({

selector:'ejemplo de aplicación',URL de plantilla:'./ejemplo.componente.html',

estiloURL: ['./ejemplo.componente.css']
})
clase de exportaciónComponente de ejemplo {
constructor(privadoservicio de ejemplo: servicio de ejemplo) { }
al guardar(datos){
este.ejemploServicio.guardar datos(datos);
}
enGetData() {
devolver esto.exempleService.obtener datos();
}
}
 Inyección de dependencia
- La inyección de dependencia es una forma de proporcionar
una nueva instancia de una clase con las dependencias
completamente formadas que necesita.
- La mayoría de las dependencias son servicios.
import {Inyectable }de
'@angular/core'; export class Acerca del componente {
constructor(privado
@Inyectable() acerca del servicio: acerca del servicio) { }
export class Acerca del servicio {
información={

apellido:“Mohamed”, Correo electrónico: info=this.sobreeServicio.conseguir información(); comentarios=this

“ [email protected]”, semejante: .abouteService.obtener todos los comentarios();
"0661326837"
}; cómo={identificación:0,mensaje:'',fecha:nulo}; nuevo
comments=[]; comentario=FALSO; agregar comentario() {
constructor() { }
getInfos(){ si(this.comment.message!=''){
return this.info;
} this.abouteService.addComment({
addComment(contra) { message:this.comment.message});
vs.date=nuevoFecha(); this. this.comments=this.abouteService.getAllComments(); this.
comments.empujar(vs); comment.message='';
} }
getAllComments() { }
return this.comments; }
}
}
Injection des dépendances
- Cuando Angular crea un componente, primero solicita a un
inyector los servicios requeridos.
- Un inyector mantiene un contenedor de instancias de servicio que
creó previamente.
- Si una instancia de servicio solicitada no está en el contenedor, el
inyector crea una y la agrega al contenedor antes de devolver el
servicio a Angular.
- Cuando todos los servicios solicitados se hayan resuelto y devuelto,
Angular puede llamar al constructor del componente con estos
servicios como argumentos.
- Esta es la inyección de dependencia.
 Registro de servicio
- Para utilizar un servicio, primero debe registrar un proveedor de este
servicio en el inyector.
- Un proveedor de servicios es una fábrica que gestiona la creación de instancias de
servicios.
- Puede guardar proveedores como módulos o componentes.
- En general, agregue proveedores al módulo raíz para que la misma instancia de un servicio
esté disponible en todas partes.

aplicación.module.ts

importaciones: [
Módulo de navegador, módulo de formularios
],
proveedores: [Acerca del servicio, servicio de ejemplo],
oreja: [Componente de aplicación]

De lo contrario, regístrese a nivel de componente en la propiedad de proveedores de

metadatos @Component. En este caso, se crea una instancia del servicio para cada nueva
instancia del componente.
@Componente({
selector: 'acerca de la aplicación',
templateUrl: './acerca de.componente.html',
styleUrls: ['./acerca.componente.css'],
providers: [Acerca del servicio]
})
Enrutamiento y navegación
- Angular Router permite la navegación de una vista a otra
cuando los usuarios realizan tareas de la aplicación.
- Angular Router es un servicio opcional que presenta una vista
de componente particular para una URL determinada.
- No es parte del núcleo angular.
- Está en su propio paquete de biblioteca,
@angular/enrutador.
- Importa lo que necesitas como lo harías desde
cualquier otro paquete de Angular.

src/app /app.module.ts (importar)

import { Módulo de enrutador, Carreteras}from '@angular/enrutador';
 Configuración de ruta
Importar...
import {Módulo de enrutador, rutas}from '@angular/router';

constanteaplicaciónRutas: Carreteras = [
{camino:'acerca de',componente: Acerca del componente }, {
camino: 'contactos', componente: Componente de contactos },
{ camino: '',
redirigir a: '/acerca de',
rutaCoincidencia: 'lleno'
}
];
@NgModule({
declaraciones: [
componente de aplicación,
Acerca del componente,
componente de contactos,
Componente de ejemplo
],
importaciones: [
Módulo de navegador, módulo de formularios,Módulo de enrutador.para raíz (aplicaciónRutas)
],
proveedores: [Acerca del servicio, servicio de ejemplo],
oreja: [Componente de aplicación]
})
clase de exportaciónMódulo de aplicación { }
 Salida del enrutador
- Dada esta configuración,
◦ Cuando el usuario escribe: http://
localhost:4200/acerca de,

◦ el enrutador busca y carga el

AboutComponent y lo muestra en un
elemento<salida-enrutador> </salida-
enrutador>.
◦ Se supone que este elemento está en la
vista del componente raíz.

aplicación.componente.html

<divclase ="espaciador de contenedores">

<divclase ="envase">
clase ="btn btn-primario">Acerca de</botón>
<botónenlaceenrutador="/acerca de"
<botónenlaceenrutador="/contactos"clase ="btn btn-primario">Contactos</botón> </div>

<divclase ="espaciador de contenedores">

<salida-enrutador>>salida-enrutador>
</div>
</div>
 Enrutamiento y navegación
- También es posible navegar entre diferentes rutas utilizando el método de navegación() del
servicio Router. Para hacer esto, el servicio de enrutador debe inyectarse en la clase de
componente.

- El siguiente ejemplo muestra el código de la clase AppComponent:

aplicación.componente.ts

importar{Componente }de'@angular/núcleo';
importar{Ruta}de"@angular/enrutador";

@Componente({
selector:'raíz de la aplicación', URL de plantilla:
'./aplicación.componente.html', estiloURL: ['./
app.component.css']
})
clase de exportaciónComponente de aplicación {
título='aplicación';
constructor(privadoenrutador: enrutador) {}
sobre(){
este.enrutador.navegar(['acerca de']);
}
}

<button (clic)="sobre()"class="btn btn-primary">About</button>

 Crear un módulo separado para la
configuración de rutas
aplicación/app-routing.module.ts

import {Acerca del componente}from "./acerca de/acerca del.componente"; import {

Componente de contactos}from "./contactos/contactos.componente"; import {Rutas,
módulo de enrutador}from "@angular/router"; import {NgMódulo}from "@angular/
núcleo"; constanteappRoutes: Routes = [
{ path: 'about', component: Acerca del componente }, {
path: 'contactos', component: Componente de contactos },
{ path: '',
redirectTo: '/about',
pathMatch: 'lleno'
}
];
@NgModule({
imports:[Módulo de enrutador.para raíz(appRoutes)],
exportaciones:[Módulo de enrutador]
})
export class AppRoutingModule {
}
aplicación.module.ts

- Es más útil crear un módulo separado para @NgModule({

configurar rutas en lugar de hacerlo en el imports: [
módulo principal. Módulo de navegador, módulo de formularios, Módulo de

enrutamiento de aplicaciones
- Simplemente cree un archivo app/app-routing.module.ts ]
- Luego importe este módulo al módulo principal. })
export class AppModule { }
HTTP: Interacción con la parte back-end
- La mayoría de las aplicaciones frontend se comunican con los
servicios backend a través del protocolo HTTP.
- Los navegadores modernos admiten dos API
diferentes para realizar solicitudes HTTP:
◦ la interfaz XMLHttpRequest
◦ y la API fetch().
- El HttpClient del módulo @angular/common/http ofrece una
API de cliente HTTP simplificada para aplicaciones Angular que
se basa en la interfaz XMLHttpRequest expuesta por los
navegadores.
- Los beneficios adicionales de HttpClient incluyen
capacidades de prueba, objetos de solicitud y respuesta
escritos, mecanismo de interceptación de solicitudes y
respuestas, API observables y manejo de errores
simplificado.
 Módulo HttpClient

- Antes de poder usarcliente http,necesitas

importar el móduloMódulo HttpClientangular.
- La mayoría de las aplicaciones hacen esto en el módulo raíz de
AppModule.
importar{Módulo HttpClient}de'@angular/común/http';
@NgModule({
declaraciones: [
AppComponent, LoginComponent, TasksComponent, NewTaskComponent,
RegistrationComponent
],
importaciones: [
Módulo de navegador, módulo de enrutador.para raíz(aplicaciónRutas), Módulo de formularios,Módulo HttpClient
],
proveedores: [Servicio de autenticación],
oreja: [Componente de aplicación]
})
clase de exportaciónMódulo de aplicación { }
 Ejemplo de servicio con HttpClientModule
importar{Inyectable}de'@angular/núcleo';
importar{HttpClient, HttpHeaders}de'@angular/común/http';

@Inyectable()
clase de exportaciónServicio de autenticación{
privadoanfitrión:cadena="http://localhost:8080";

constructor(private http:HttpCliente){ }

obtener tareas(){
devolver esto.http.conseguir(este.host+"/tareas"); }

acceso(usuario){
return this.http.correo(this.host+"/acceso",usuario,{observado:'respuesta'}); }

obtenerTareasV2(){
return this.http.get(this.host+"/tasks",
{encabezados:nuevoencabezadoshttp({'Autorización':'mi-token'})});
}

guardar tarea(tarea){
return this.http.post(this.host+"/tasks",tarea,{headers:nuevo HttpHeaders({
'autorización':'my-token'})});
}
}
 Ejemplo de componente
export class Componente de tareas implements onInit {
tareas;
constructor(audiencia authService:Servicio de autenticación,privado
enrutador:Ruta) {}
ngOnInit() {
this.servicio de autenticación.getTasks()
. suscribir(datos=>{
this.tasks
=datos; },err=>{
this.authService.cerrar sesión();
this.router.navegarPorUrl('/acceso')
})
}
}
 Exemple de composant
export class Componente de inicio de sesiónimplements OnInit {
moda:número=0;
constructor(private authService:AuthenticationService,private router:Ruta) { }

ngOnInit() {
}

al iniciar sesión(user){
this.authService.login(usuario)
. subscribe(resp=>{
dejarjwt=resp.headers.get('Authorization');
// console.log(resp.headers.get('Autorización'));
this.authService.guardarToken(jwt); this.router.
navigateByUrl('/tareas');
},
errar=>{
this.mode=1;
})
}

}
Solicitud
- Cree una aplicación web JEE que le permita administrar
contactos (id, apellido, nombre, fecha de nacimiento,
correo electrónico, teléfono, foto):
◦ Ingresar y agregar contactos
◦ Buscar contactos
◦ Editar y modificar contactos
◦ Eliminar contactos
- La solicitud consta de dos partes:
◦ La parte BackEnd basada en Spring, Spring Data JPA e
Hibernate. (API relajante)
◦ La parte FrontEnd está basada en Angular 4.
 Arquitectura
Microservicio

Contenedor COI de arranque de primavera

Noso.
W te
rob
s DA.oOh.
<<En nttitty y> >
cC
ono
tnroasn
otrt
ocsa
uenta
HTML5 <<servicio>>
HTTP, JSON <<interfaz>>
angulares 4 Contactar
Repositorio de productos
Oreja Servicio de descanso

SpSripringgDDaattaa
SGBD
JJP
PETNISEIN
LE
VANIA.

Cliente móvil D
DiissppaattcchheerrSSeerrvvlleett Hiciebrveznaaattee
h
HTTP, JSON

EmEem
gabyetejd
ab a ed
scritr
ure
aAo
Tmm
ccaatt JDBC ANTES DE CRISTO.
Application
Application
Application
Application
 Módulo de enrutamiento:aplicación/app-routing.ts
import {Acerca del componente}from "./acerca de/acerca del.componente"; import {
Componente de contactos}from "./contactos/contactos.componente"; import {
Rutas, módulo de enrutador}from "@angular/enrutador"; import {NgMódulo}from
"@angular/núcleo";
import {DetalleContactoComponenteComponente}from "./detail-contactcomponent/
detail-contact-component.component"; import {Nuevo componente de contacto}
from "./nuevo-contacto/nuevocontacto.component";

constanteappRoutes: Carreteras = [
{camino:'acerca de',componente: Acerca del componente },
{path: 'contactos', component: Componente de contactos },
{ path: 'detalleContacto/:id', component:
DetalleContactoComponenteCompone}n, te
{ path: 'nuevo contacto', component: Nuevo componente de contacto },
{ path: '',
redirigir a: '/acerca de',
rutaCoincidencia: 'lleno'
}
];
@NgModule({
imports:[Módulo de enrutador.forRoot(appRoutes)],
exportaciones:[Módulo de enrutador]
})
export class AppRoutingModule { }
 Contacto de servicioServicio:aplicación/servicio/contacto.service.ts
import {Injectable} from "@angular/core"; import {Http,
respuesta}from "@angular/http"; importar
"rxjs/añadir/operador/mapa";
import "rxjs/añadir/operador/catch"
import {Observable}from "rxjs";
@Inyectable()
clase de exportaciónServicio de contacto {
constructor(privadohttp:http){}

obtener todos los contactos():Observable<cualquier>{

devolver esto.http.conseguir("http://localhost:8080/contactos")
. mapa(resp=>resp.json());

}
obtenerContacto(identificación:número):Observable<any>{
return this.http.get("http://localhost:8080/contactos/"+identificación)
. map(resp=>resp.json());

}
guardarContacto(contactar){
return this.http.correo("http://localhost:8080/contacts",contactar)
. map(resp=>resp.json());
}
borrar contacto(id:number){
return this.http.borrar("http://localhost:8080/contacts/"+id)
. map(resp=>resp);
}
}
 Componente de contactos:contactos.component.ts
importar{Componente, OnInit}de'@angular/núcleo'; import {Servicio de
contacto}from "../servicios/contactos.servicio"; import {Ruta}from
"@angular/enrutador"; @Componente({

selector:'[contactos-aplicación]', URL de plantilla: './

contactos.componente.html', estiloURL: ['./
contactos.componente.css']
})
export class Componente de contactosimplements onInit {
contactos=[];
constructor(
private servicio de contacto: servicio de contacto,
private enrutador: enrutador
){}
ngOnInit() {
este.servicio de contacto.getAllContacts()
. suscribir(datos=>this.contacts=datos);

}
detalleContacto(id:number){
this.enrutador.navegar(["/detalleContacto",identificación]);
}
deleteContact(id:number){
this.contactService.deleteContact(identificación)
. subscribe(datos=>{this.ngOnInit();});
}
}
Composant ContactsComponent: contactos.component.html
<divclase ="panel primario">
<div class="encabezado del panel">Lista de contactos</div> <div
class="cuerpo del panel">
<mesaclass="mesa rayas">
<tr>
<th>identificación</th><th>Nombre</th><th>Nombre</th><th>>th><th></th> </
tr>
<tr*ngPara="sea c decontacts">
<td>{{vs.identificación}}</td> <
td>{{c.apellido}}</td> <td>{{c.
nombre de pila}}</td> <!--

<td><a routerLink="/detailContact/{{c.id}}">Detalle</a></td>
-->
<td><tieneclass="en el que se puede hacer clic"(clic)="detailContact(c.id)">Detalle</tiene></td>
<td><a class="clickable" (click)="deleteContact(c.id)">Eliminar</a></td> </tr>

</mesa>
</div>
</div>
DetalleContactoComponente:
detallecontacto.component.ts
import { Component, OnInit } from '@angular/core'; import {Ruta activada,
enrutador}from "@angular/router"; import {ContactService} from "../
services/contacts.service";

@Componente({
selector: 'componente-de-contacto-detalle-de-la-aplicación',
templateUrl: './detalle-contacto-componente.component.html',
styleUrls: ['./detalle-contacto-componente.component.css']
})
export class DetalleContactoComponenteComponenteimplements OnInit {

constructor(
private ruta:RutaActivada, private
enrutador: enrutador,
private servicio de contacto: servicio de contacto) { }
contactar={};
id:number;
ngOnInit() {
this.id=+this.camino.instantánea.parámetros[
'identificación']; this.contactService.getContact(this.id)
. subscribe(data=>this.contact=data);
}
}
Composant DetailContactComponent:
detallecontacto.component.html
<div class="panel panel-primario">
<div class="panel-heading">Detalle Contacto</div>
<div class="panel-body">
<div class="grupo de formularios">
<etiqueta>identificación:</label>
<label>{{contact.id}}</label> </div>

<div class="form-group">
<label>Nombre:</label>
<label>{{contact.nombre}}</label> </
div>
<div class="form-group">
<label>Nombre:</label>
<label>{{contact.nom}}</label> </div>

<div class="form-group">
<label>Fecha de nacimiento:</label>
<label>{{contact.fechaNacimiento|fecha:'dd/MM/aaaa'}}</label> </div>

<div class="form-group">
<label>Correo electrónico:</label>
<label>{{contact.correo electrónico}}</label>
</div>
<div class="form-group">
<label>Tel:</label>
<label>{{contact.tel}}</label> </div>

<div class="form-group">
<label>Foto:</label>
<imagenorigen="http://localhost:8080/imagenes/{{contact.foto}}"ancho =“100”altura ="100" class="circuloimg">

</div>
</div>
</div>
Nuevo componente de contacto:
nuevocontacto.component.ts
import { Component, OnInit } from '@angular/core'; import {ContactService}
from "../services/contacts.service";

@Component({
selector: 'aplicación-nuevo-contacto', templateUrl: './
nuevo-contacto.component.html', styleUrls: ['./nuevo-
contacto.component.css']
})
export class Nuevo componente de contactoimplements OnInit {
contact={nom:"",prenom:"",Correo electrónico:"",fecha de nacimiento:nulo,semejante:""};
moda="nuevo";
constructor(private contactService:ContactService) { }

ngOnInit() {
}

saveContact(){
this.contactService.saveContact(this.contact)
. subscribe(data=>{this.mode='confirmar';this.contact=datos;});
}

nuevo contacto(){
this.contact={nom:"",prenom:"",email:"",dateNaissance:null,tel:""}; this.mode=
'nuevo';
}
}
Composant NewContactComponent: nuevo-
contacto.componente.html
- <div class="panel primario"*ngSi="mode=='nuevo'"> <div class=
"panel-heading">Nuevo contacto</div> <div class="panel-body">

<div class="form-group">
<etiquetaclass="controlable">Nom:</label>
<aportetipo ="texto"[(ngModelo)]="contact.nom"class="control de formularios"> </
div>
<div class="form-group">
<label class="control-lable">Prénom:</label>
<input type="text" [(ngModel)]="contact.prenom" class="form-control"> </div>

<div class="form-group">
<label class="control-lable">Fecha de nacimiento:</label>
<input type="fecha"[(ngModel)]="contact.dateNaissance" class="control de
formularios">
</div>
<div class="form-group">
<label class="control-lable">Email:</label>
<input type="Correo electrónico"[(ngModel)]="contact.email" class="form-control"> </
div>
<div class="form-group">
<label class="control-lable">Tel:</label>
<input type="semejante"[(ngModel)]="contact.tel" class="form-control"> </div>

<botón(click)="saveContact()"class="btn ptn-primario">Guardar</botón> </div>

</div>
Composant NewContactComponent:
nuevocontacto.component.html (continuación)
- <divclase ="panel primario"*ngSi="moda=='confirmar'">
<div clase ="encabezado del panel">Confirmación</div> clase
<div ="cuerpo del panel">
<div clase ="grupo de formularios">
<etiqueta clase ="controlable">Identificación:</etiqueta>
<etiqueta clase ="controlable">{{contactar.id}}</etiqueta>
</div>
<divclase ="grupo de formularios">
<etiqueta clase ="controlable">Nombre:</etiqueta>
<etiqueta clase ="controlable">{{contactar.apellido}}</etiqueta>
</div>
<divclase ="grupo de formularios">
<etiqueta clase ="controlable">Nombre:</etiqueta>
<etiqueta clase ="controlable">{{contactar.nombre de pila}}</etiqueta>
</div>
<divclase ="grupo de formularios">
<etiqueta clase ="controlable">Fecha Nacimiento:</etiqueta>
<etiqueta clase ="controlable">{{contactar.fecha de nacimiento}}</etiqueta>
</div>
<divclase ="grupo de formularios">
<etiqueta clase ="controlable">Correo electrónico:</etiqueta>
<etiqueta clase ="controlable">{{contactar.Correo electrónico}}</etiqueta>
</div>
<divclase ="grupo de formularios">
<etiqueta clase ="controlable">Tel:</etiqueta>
<etiqueta clase ="controlable">{{contactar.semejante}}</etiqueta>
</div>
<botón(clic)="nuevo contacto()"clase ="btn ptn-primario">OK</botón> </div>

</div>
Interacción con la parte Backend
- Angular tiene un servicio http que le permite enviar
solicitudes http Ajax a servidores web
- La parte del servidor ejecuta el procesamiento y devuelve datos a la
parte Frontal generalmente en formato JSON.
- Estos datos normalmente se muestran mediante
componentes web.

Parte trasera
Parte delantera
Servidor web

TP
Parte trasera
NO
API de descanso SGBD
PHP, JEE, .Net, NodeJS

aannguullaarr
Solicitud
- Aplicación que te permite buscar fotos
interactuando con una API Rest
- https://pixabay.com/api/?key=5832566-
81dc7429a63c86e3b707d0429&q=casablanca&per_page=10&page=1
Solicitud
- Aplicación que te permite buscar fotos
interactuando con una API Rest:
◦ https://pixabay.com/api/?key=5832566-
81dc7429a63c86e3b707d0429&q=casablanca&per_page=10&page=1
Estructura del proyecto
 aplicación.module.ts
importar{Módulo de navegador }de'@angular/navegador-plataforma';
importar{NgMódulo }de'@angular/núcleo';

importar{Componente de aplicación }de'./app.component';

importar{Módulo de formularios}de“@angular/formularios”;
importar{Módulo HTTP}de"@angular/http";

@NgModule({
declaraciones: [
Componente de aplicación

],
importaciones: [
Módulo de navegador, módulo de formularios, Módulo Http
],
proveedores: [],
oreja: [Componente de aplicación]

})
clase de exportaciónMódulo de aplicación { }
 aplicación.componente.ts
importar{Componente }de'@angular/núcleo';
importar{http}de"@angular/http"; importar"rxjs/
añadir/operador/mapa" @Componente({

selector:'raíz de la aplicación', URL de plantilla:

'./aplicación.componente.html', estiloURL: ['./
app.component.css']
})
clase de exportaciónComponente de aplicación {
palabra clave:cadena="";fotos:{golpes:nulo}; tamaño de página:número=5; página actual:número=1;
paginas totales:número;paginas:Matriz<número>=[];moda='LISTA';imagen actual=nulo;

obtener imágenes(){
este.http.conseguir("https://pixabay.com/api/?
key=5832566-81dc7429a63c86e3b707d0429&q="+este.palabra clave+" &per_página="+este. &página="+
tamaño de página+" este.página actual)
. mapa(resp=>resp.json())
. suscribir(datos=>{
este.fotos=datos;
este.paginas totales=este.fotos['total de visitas'] /este.tamaño de página; si(
este.fotos['total de visitas'] %este.tamaño de página!=0)
este.paginas totales+=1;
este.paginas=nuevoFormación(este.paginas totales
); });
}
ir a página(i:número){este.página actual=yo;este.obtener imágenes(); }
detalleImagen(soy){este.moda='DETALLE';este.imagen actual=yo; }

constructor(privadohttp:http){

}
}
 aplicación.componente.html
<pag>>p>
<div class="envase">
<div class="panel primario">
<div class="panel-heading">Búsqueda de fotos</div> <div class=
"panel-body">
<div class="form-group">
<label>Palabra clave:</label>
<aportetipo ="texto"[(ngModelo)]="motCle"> <
button class="btn btn-primario"
(click)="getImages()">Buscar</button>
</div>
</div>
</div>
 app.component.httml
<div *ngIf="mode=='LISTA'">
<div class="fila">
<div *ngPara="déjame deimages.golpes"class="col-md-3 col-xs-12">
<div class="panel panel-altura primaria">
<div class="panel-heading">{{soy.etiquetas}}</div> <div
class="panel-body">
<p>Tamaño: <fuerte>{{im.ancho de la imagen}}
{{im.imageHeight}}</strong></p>
<imagen(click)="detailImage(im)"
origen="{{im.previewURL}}"class="img-miniatura en la que se puede hacer clic">
<p>Por<strong>{{im.usuario}}</strong></p>
</div>
</div>
</div>
</div>
<div class="row">
<ulclass="pastillas nav">
<li[ngClase]="{'activo':currentPage==(yo+1)}"*ngFor="deja p de
pages; deja que yo =índice"class="en el que se puede hacer clic">
<tiene(click)="gotoPage(i+1)">{{i+1}}</tiene> </
li>
</ul>
</div>
</div>
</div>
 aplicación.componente.html
<div*ngSi="moda=='DETALLE'"clase ="envase">
<divclase ="almohadillas para contenedores">
<botónclase ="btn btn-primario"(clic)="modo='LISTA'">Modo de lista</
botón>
</div>
<divclase ="panel primario">
<divclase ="encabezado del panel">{{imagen actual.etiquetas}}</div> <div
clase ="cuerpo del panel">
<pag>

Tamaño: <fuerte>{{imagen actual.ancho de la imagen}}

{{imagen actual.imageHeight}}</fuerte>
, Por {{imagen actual.usuario}}
</pag>
<div>
<imagenorigen="{{imagen actual.userImageURL}}"clase ="img-círculo"> <
imagenorigen="{{imagen actual.webformatoURL}}"clase ="img-
miniatura">
</div>

</div>
</div>
</div>
 aplicación.componente.css
. relleno{
relleno:5píxeles;
margen:5píxeles;

}
. borde{
borde:1px punteado gris;
}
. altura{
altura:280píxeles;
}
Desarrollo Móvil
Marco Iónico