Programacion de Aplicaciones Web2

INSTITUTO NACIONAL TECNOLÓGICO
DIRECCIÓN GENERAL DE FORMACIÓN PROFESIONAL
CARTILLA PARA EL PROTAGONISTA
PROGRAMACIÓN
DE APLICACIONES WEB
Mayo 2021
PROGRAMACIÓN DE APLICACIONES WEB
CRÉDITOS
Esta es una publicación del Instituto Nacional Tecnológico - INATEC, con el apoyo
técnico financiero del gobierno de Canadá a través del organismo Children Believe
en el marco del Proyecto “Empleabilidad Juvenil: Cerrando la Brecha de Género en
la Empleabilidad Juvenil en Nicaragua”.
Los contenidos de esta cartilla son una recopilación de diversos autores. Se han
realizado todos los esfuerzos para que este material de estudio muestre información
fiable, por tanto, su contenido está en constante revisión y actualización, sin
embargo, INATEC no asumirá responsabilidad por la validación de todo el material
o por las consecuencias de su uso.
Se autoriza la reproducción y difusión del contenido de esta cartilla para fines

educativos u otros no comerciales sin previa autorización escrita, siempre que se
especifique claramente la fuente.
Cartilla de Programación de Aplicaciones Web
PRESENTACIÓN
La cartilla “Programación de Aplicaciones Web” está dirigida a los y las protagonistas de esta
formación con la finalidad de facilitar el proceso de aprendizaje durante su formación técnica.
El propósito de esta cartilla es dotar a los y las protagonistas de los conocimientos técnicos
fundamentales para profundizar y fortalecer las capacidades que va adquiriendo en el Centro de
Formación.
La cartilla se encuentra estructurada en 6 contenidos :
• Contenido 1: Componentes de la aplicacion web

• Contenido 2: Diseño de interfaz de usuario web
• Contenido 3: Comunicación entre componentes
• Contenido 4: Enrutamiento, patrones y servicios
• Contenido 5: Peticiones HTTP y métodos
• Contenido 6: Formularios
En los contenidos se presenta toda la información general, técnica y científica que necesitas conocer
para el desarrollo de las competencias. La cartilla posee figuras que facilitan su interpretación y
desarrollo.
Las palabras desconocidas o términos técnicos de uso poco común, se definen a lo largo del texto en
forma de notas al pie y se indican mediante un número.
Al finalizar el último contenido de la cartilla, encontrarás:
• Índice de tablas y figuras

• Bibliografía
Confiando en que logres con éxito culminar esta formación, que te convertirá en un o una profesional
en Programación de aplicaciones web y así contribuir al desarrollo de nuestro país.
TECNOLÓGICO NACIONAL
ÍNDICE
CONTENIDO I: COMPONENTES DE LA APLICACIÓN WEB.................................................................................................... 1
1.1. Características de las Tecnologías Web del lado del cliente............................................................................................................................. 1
1.2. Instalación del entorno de desarrollo....................................................................................................................................................................... 1
CONTENIDO II: DISEÑO DE INTERFAZ DE USUARIO WEB....................................................................................................5
1.1. Elementos de la aplicación......................................................................................................................................................................................... 5
1.2. Módulos............................................................................................................................................................................................................................7
1.3. Componentes................................................................................................................................................................................................................. 8
CONTENIDO III: COMUNICACIÓN ENTRE COMPONENTES................................................................................................ 12
1.1. Tuberías PiPe.................................................................................................................................................................................................................12
1.2. Modelado de datos.....................................................................................................................................................................................................12
CONTENIDO IV: ENRUTAMIENTO, PATRONES Y SERVICIOS............................................................................................. 17
1.1. Configuración de rutas...............................................................................................................................................................................................18
1.2. Patrón de diseño Inyección de dependencias.....................................................................................................................................................18
1.3. Servicios mediante inyección de dependencias.................................................................................................................................................19
CONTENIDO V: PETICIONES HTTP Y MÉTODOS................................................................................................................. 26
1.1. Instalación HttpCllient................................................................................................................................................................................................26
1.2. Operaciones con Métodos GET y POST.............................................................................................................................................................26
1.3. Operaciones con Métodos PUT, PATCH Y DELETE...........................................................................................................................................28
1.4. Gestión de respuestas y errores de peticiones HTTP......................................................................................................................................29
1.5. Intercepción de peticiones y respuestas..............................................................................................................................................................29
CONTENIDO VI: FORMULARIOS............................................................................................................................................. 33
1.1. Obtención de valores.................................................................................................................................................................................................33
1.2. Estado de los objetos ...............................................................................................................................................................................................33
1.3. Validaciones ................................................................................................................................................................................................................34
1.4. Validaciones reactivas...............................................................................................................................................................................................34
ÍNDICE DE TABLAS Y FIGURAS......................................................................................................................................................................42

BIBLIOGRAFÍA..................................................................................................................................................................................................43
TECNOLÓGICO NACIONAL
Contenido I: Componentes de la Aplicación Web
CONTENIDO I: COMPONENTES DE LA APLICACIÓN WEB
Toda aplicación web tiene una arquitectura básica de tipo cliente-servidor, en la que sigue un modelo
de aplicación distribuida, por una parte, está el servidor que provee de recursos y servicios y por la
otra, está el cliente que los demanda. Según lo estática o dinámica que sea cada parte, se tienen
distintos tipos de aplicaciones web:
Cliente y servidor estáticos: no hay ningún tipo de dinamismo y el servidor

1 siempre devuelve los mismos recursos sin ningún tipo de cambio. Más que de
aplicaciones web, aquí hablaríamos de páginas web.
Cliente estático y servidor dinámico: el servidor devuelve recursos dinámicos,

2 por ejemplo, páginas web con el resultado de consultas a base de datos, entre
otras.
3 Cliente/servidor dinámicos: el cliente es dinámico porque las páginas web

recibidas del servidor incluyen JavaScript, que se ejecuta en el propio navegador
dando todo tipo de funcionalidades diversas.
Figura 1. Tipos de Aplicaciones Web
Hoy en día, la mayoría de aplicaciones web disponen de una parte cliente dinámica con el objetivo de
disminuir la comunicación con el servidor y mejorar la fluidez y experiencia del usuario.
1.1. Características de las Tecnologías Web del lado del cliente
Las tecnologías web del lado del cliente permiten crear interfaces de usuario y establecer comunicación
con el servidor basadas en HTML, CSS y JavaScript, en este caso, el navegador actúa como intérprete.
Angular es una plataforma que permite desarrollar aplicaciones web en el lado del cliente utilizando
HTML y JavaScript para que el cliente asuma la mayor parte de la lógica y descargue al servidor con
la finalidad de que las aplicaciones ejecutadas a través de Internet sean más rápidas.
Angular está orientado a objetos, trabaja con clases y favorece el uso del patrón MVC (Modelo-Vista-
Controlador).
1.2. Instalación del entorno de desarrollo

Procedimiento para la instalación del entorno de desarrollo Visual Studio 2019
TECNOLÓGICO NACIONAL 1
1. Descargar el instalador de Visual Studio 2019

1. 3. Una vez descargado, se ejecuta el
3.
instalador y se aceptan todos los valores
que nos propone por defecto hasta que
lleguemos a la pantalla final y pulsemos
Finish.
Figura 2. Sitio web de Visual Studio 2019
Figura 3. Descarga e instalación de Visual Studio

Community 2019
2.
2. Descargar el instalador de node: 14.16.0
(incluye npm 6.14.11)
4.
4. Una vez instalado, NPM abre una
terminal con el comando Command
y escribe:
npm install -g @angular/cli
Figura 4. Descarga de Node.js
Este comando lo que hace es instalar de forma global en el equipo Angular CLI, una herramienta de
consola de Angular que ayudará en la programación con Angular. Esta herramienta sirve para tener
una serie de comandos para poder trabajar con proyectos de Angular. Entre los comandos existe uno
que lo que hace es crear un proyecto base con todo lo necesario para empezar un proyecto con este
framework.
2 TECNOLÓGICO NACIONAL
Contenido I: Componentes de la Aplicación Web
Para usar el comando se escribe: ng new 6. Por último para ejecutar la aplicación web
6.
NOMBRE_APP (nombre de la aplicación). En que se acaba de crear ejecutamos desde la
nuestro ejemplo llamaremos “RegEstudiante”. terminal: ng serve - -open
Nos indica que si queremos realizar verificación
de tipos y paquetes en el área de trabajo, le
indicamos con “Y” que si queremos.
El flag - -open sirve para que se abra

automáticamente el navegador web con la web.
Por defecto Angular se ejecuta en el puerto
4200.
5.
5. Si el comando ha terminado bien lo que se
habrá hecho es crear una carpeta en la ruta Si todo ha ido bien, se visualizara una web como
en la que nos encontramos en la terminal. ésta (si no se abre el navegador, escribir http://
localhost:4200/):
Desde la terminal entrar a la carpeta
“simulacro” con el comando cd (cd
regestudiante), carpeta que se acaba de
crear y ejecutar: npm install
Este comando de NPM sirve para instalar todas

las dependencias necesarias para el proyecto
de Angular. Estas dependencias se descargan
dentro de la carpeta node_modules del proyecto.
Figura 5. Pantalla principal de aplicación por defecto.
Por defecto, cuando Angular crea la estructura
de carpetas también añade al archivo .gitignore 7. Por último, se necesita un editor que permita
7.
la carpeta node_modules. Esto sirve para que desarrollar componentes con Angular:
no se haga commit y no se suban al repositorio
todas las dependencias. Si un usuario se baja Atom https://atom.io/
el código tendrá que instalar las dependencias https://code.visualstudio.
usando también npm install. Visual Studio Code
com/download
https://www.sublimetext.
Tutorial sobre NPM Sublime Text
com/3
https://codingpotions.com/npm-
tutorial
Para el desarrollo de los ejemplos en este manual se utilizará Visual Studio Code. Por lo que se
procede a descargar e instalar.
Figura 6. Sitio web de descarga de Visual Studio Code
Figura 7. Interfaz de desarrollo Visual Studio Code
Visual Studio Code

https://code.visualstudio.com/docs/?dv=win
Contenido II: Diseño de Interfaz de Usuario Web
CONTENIDO II: DISEÑO DE INTERFAZ DE USUARIO WEB
El objetivo de la interfaz web es permitir una operación y un control efectivo de la aplicación desde
la parte humana, mediante el uso de dispositivos digitales como computadoras de escritorio, laptops,
smartphones o tablets, que a su vez utilizan pantallas táctiles, teclados y botones (Lara Galicia
GoDaddy.com).
1.1. Elementos de la aplicación
Tabla 1. Elementos de la aplicación web en Angular
Elemento Descripción
Módulo Conjunto de códigos dedicados a resolver un objetivo que generalmente exporta
una clase. Cada aplicación posee al menos una clase de módulo que se denomina
“módulo raíz” y que, por defecto, posee el nombre de AppModule. En el mismo
podemos apreciar una clase con un decorador (@NgModule) y una serie de
propiedades entre las que destacamos las siguientes:
• Declarations: define las vistas que pertenecen a este módulo.

• Exports: declaraciones que han ser visibles para componentes de otros
módulos.
• Imports: clases que otros módulos exportan para poderlas utilizar en el
módulo actual.
• Providers: servicios usados de forma global y accesibles desde cualquier
parte de la aplicación.
• Bootstrap: la vista principal o componente raíz, que aloja el resto de vistas
de la aplicación. Propiedad establecida solo por el módulo raíz.
Un módulo puede agrupar diversos componentes relacionados entre sí.
Componente Elemento que controla una zona de espacio de la pantalla que representa la “vista”.
Define las propiedades y métodos que usa el propio template y contiene la lógica
y la funcionalidad que utiliza la vista. Pueden tener atributos tanto de entrada
(decorador @Input) como de salida (decorador @Output). También podemos
definir al componente como:
Componente = template + metadatos + clase
Template Define la vista de un Componente mediante un fragmento de HTML.
Metadatos Permiten decorar una clase y configurar así su comportamiento. Extiende una
función mediante otra sin tocar la original.
Data binding Permite intercambiar datos entre el template y la clase del componente que
soporta la lógica del mismo. Existen 4 tipos de Data binding:
• Interpolación: muestra el valor de una propiedad en el lugar donde se

incluya {{ propiedad }}.
• Property binding: traspaso del objeto del componente padre al componente
hijo ([objHijo]=“objPadre”).
• Event binding: permite invocar un método del componente pasándole un
argumento al producirse un evento (por ejemplo, (click)=“hazAlgo(obj)”).
• Two-way binding: binding bidirectional que permite combinar event y
Property binding (por ejemplo, input [(ngModel)]= “obj”).
Directiva Permite añadir comportamiento dinámico a HTML mediante una etiqueta o selector.
Existen directivas estructurales (*ngFor o *ngIf) o de atributos que modican el
aspecto o comportamiento de un elemento DOM (NgSwitch, NgStyle o NgClass).
Servicio Son clases que permiten realizar acciones concretas que ponen a disposición
de cualquier componente. Por ejemplo, permiten obtener datos, resolver lógicas
especiales o realizar peticiones a un servidor.
D e p e n d e n c y Permite suministrar funcionalidades, servicios, entre otras, aun componente sin
injection que sea el propio componente el encargado de crearlos. Utiliza el decorador @
Injectable(). Generalmente proporciona servicios y facilita los test y la modularidad
del código.
Figura 8. Interfaz de usuario aplicación Registro Estudiante
Base de datos: RegEstudiante, tabla: Estudiante
Figura 9. Figura 9. Base de datos RegEstudiante
1.2. Módulos
Son clases que permiten organizar la aplicación encapsulando funcionalidades concretas dentro
de los mismos. Son agrupadores de componentes, pipes, directivas, entre otras, relativos a una
funcionalidad que permiten crear bloques reutilizables.
Una vez finalizada la creación del proyecto,
se abre Visual Studio Code, ir al menú File,
seleccionar Open Folder y seleccionar la
carpeta del proyecto que se ha creado, en
este caso: RegEstudiante.
Otra forma de abrir el proyecto en Visual

Studio Code, es ubicarse en la carpeta
donde se encuentra el proyecto y ejecutar
el comando: code .
En cualquiera de las dos opciones, de

inmediato se carga la estructura del
proyecto.
Al crear una aplicación con Angular CLI,

se crea un módulo que por convenio se
denomina AppModule y se almacena
en el archivo app.module.ts, el cual se
denomina módulo raíz y que es el que usa Figura 10. Estructura del proyecto RedEstudiante en
la aplicación en el arranque de la misma. Visual Studio Code
Figura 11. Modulo: app.module.ts

1.3. Componentes
Básicamente, es una clase acompañada del decorador @Component y se encarga de controlar lo que
se llama Vista o zona de pantalla. A groso modo, un componente está formado por un template, una
metadata y una clase.
Al crear una aplicación con Angular CLI, se crea un módulo por defecto y, dentro del mismo, se
crea también un componente denominado app.component. El contenido por defecto del mismo es el
siguiente:
Figura 12. Componente principal: app.component.ts
TemplateUrl hace referencia al archivo app.component.html donde se encuentra la definición de los

componentes y styleUrl hace referencia al archivo que contiene los componentes .css.
Export class AppComponent, exporta la clase AppComponent que implementa la clase del
componente llamado <app-root>, definido en el archivo index.html.
Title, es el nombre de título de la aplicación web y se ejecutará en el archivo app.component.html.

Este archivo contiene etiquetas html de la aplicación web, observar que en la etiqueta <span>{{ title }}
app is running!</span>, se ejecutará el título introducido anteriormente. Por ejemplo, si se modifica
el título en el archivo app.component.ts, con el título: “Registro de Estudiantes” y luego procedemos
a actualizar la aplicación web en el navegador.
El contenido del archivo app.component.html puede ser eliminado ya que solo contiene información
general del proyecto y éste fue generado automática, por lo que se procede a dejar en blanco.
Index.html: se encuentra fuera de la carpeta App, este archivo es la raíz de entrada a la aplicación.
Figura 13. Archivo index.html
Augusta do Condesa de Lovelace (Londres, 10 de diciembre de 1815-íd., 27 de noviembre de 1852),

registrada al nacer como Augusta Ada Byron y conocida habitualmente como Ada Lovelace, fue
una matemática, informática y escritora británica, célebre sobre todo por su trabajo acerca de
la calculadora de uso general de Charles Babbage, la denominada máquina analítica. Entre sus
notas sobre la máquina, se encuentra lo que se reconoce hoy como el primer algoritmo destinado
a ser procesado por una máquina, por lo que se la considera como la primera programadora de
ordenadores.
Para crear un componente nuevo, se escribe en consola el comando:
ng generate component [directorio/] nombre del componente.
También se puede escribir el comando corto:
ng g c [directorio/] nombre del componente.
Ejemplo: Crear el componente header del proyecto, para personalizar la cabecera del html.
Figura 14. Crea el componente header
Crear la carpeta Components/header en el proyecto y en el archivo app.module.ts se hace referencia

al componente, la cual se genera automáticamente.
Figura 14. Archivo app.module.ts, hace referencia al componente header
Modificando el código en el archivo app.component.html con el marcador: <app-header></app-

header>, se procede a guardar el archivo y se actualiza el proyecto en el navegador.
Figura 15. Archivo app.component.html, hace referencia a <app-header>
CONTENIDO III: COMUNICACIÓN ENTRE COMPONENTES
1.1. Tuberías PiPe
Las pipes también llamadas tuberías o filtros son funciones que se llaman en una vista (html) y que
tienen por objetivo transformar un dato a mostrar para mejorar la experiencia del usuario. Hay una
cantidad reducida de pipes que trae por defecto Angular y se puede hacer uso en cualquier vista de
los componentes.
Por ejemplo para mostrar el contenido de una variable toda en mayúsculas en la plantilla se utiliza la
siguiente sintaxis:
1. <p>Nombre del estudiante:{{ nombre | uppercase}}</p>
En algunas pipes se puede pasar parámetros:
2. <p>El saldo es:{{ saldo | currency:'$'}}</p>
Seguido al nombre de la pipe se dispone cada parámetro antecedido por el carácter ':'.
PIPE
h t t p s : / / w w w.t u t o r i a l e s p r o g r a m a c i o n y a . c o m / a n g u l a r y a / d e t a l l e c o n c e p t o .
php?punto=19&codigo=19&inicio=0
1.2. Modelado de datos
Se procede a realizar el modelado de datos de la aplicación web. Para ello, se crea una Web API
que contendrá las funcionalidades de crear, reemplazar, actualizar y eliminar registros, lo que se
denomina un CRUD.
Procedimiento:
Procedimiento
1. Abrir el Visual Studio 2019, dar clic en Crear un proyecto >> Aplicación Web de ASP.Net (Modelo-
Vista-Controlador) >> Configurar proyecto >> Información adicional, después dar clic en Ok y se
presentan las plantillas disponibles, seleccionar la plantilla de Web API.
Contenido III: Comunicación entre Componentes
Figura 16. Interfaz de Visual Studio 2019 Figura 17. Selección de Aplicación Web ASP.NET
Figura 18. Nombre del proyecto y ubicación Figura 19. Selección del tipo de aplicación, en este caso
Web API
Se procede agregar un nuevo elemento en el modelo de datos, haciendo clic derecho posicionado
sobre la carpeta Model >> Agregar >> Nuevo elemento >> ADO.Net Entity Data Model.
Figura 20. Agregar nuevo elemento en el modelo

de datos Figura 21. ADO.Net Entity Data Model
Se selecciona el contenido del modelo: EF Se establecen las propiedades de conexión:

Designer desde base de datos. nombre del servidor, tipo de autenticación y
nombre de la base de datos, estas se toman de
las propiedades en el SQL Server.
Figura 22. Contenido del modelo de datos

Se selecciona el origen de datos SQL Server y se
configura la conexión: Figura 24. Propiedades de conexión con la base de
datos
Figura 25. Propiedades de conexión del SQL Server
Figura 23. Se elige origen de datos SQL Server
Contenido III: Comunicación entre Componentes
Figura 26. Se establece la conexión con la base de Figura 28. Selección de base de datos y tablas
datos
Se establece la versión del Entity Framework a
6.x
Figura 29. Interfaz del modelo de datos
Proceder agregar el controlador Web API en

blanco:
Figura 27. Se elige la versión de Entity Framework Figura 30. Agregar el controlador Web Api
Figura 31. Web Api 2 en blanco
Asignar el nombre del controlador y agregarlo. Se crea la clase RegEstudianteController.
Figura 32. Asignar nombre al controlador Figura 33. Clase ApiControler
Contenido IV: Enrutamiento, Patrones y Servicios
CONTENIDO IV: ENRUTAMIENTO, PATRONES Y SERVICIOS
La navegación web se realiza mediante la siguiente serie de acciones:
a. Si se introduce una dirección URL en la barra de direcciones del navegador, se cambia de

página.
b. Si se hace clic en un vínculo de una página, se cambia de página.
c. Si se hace clic sobre los botones de avance y retroceso del navegador, se navega hacia atrás
y hacia delante a través del historial de páginas que se haya visto.
Toda aplicación Web se adapta a esta forma de navegación a través de algún sistema para gestionar
sus rutas (direcciones URL) y vistas asociadas (páginas HTML). En el caso de Angular, esta gestión se
hace con el servicio Angular Router.
El servicio Router no es accesible por defecto. Tiene su propio paquete sobre el cual se debe realizar
la siguiente importación en el archivo “app.module.ts”:
import { AppRoutingModule } from './app-routing.module';
Figura 34. Importación de rutas en el archivo app.module.ts
1.1. Configuración de rutas
La configuración indica qué componentes deben visualizarse por el navegador para distintos path de
ruta. Y esto es lo que realiza el servicio Router. Cuando en la barra de direcciones del navegador se
introduzca una dirección URL determinada, el servicio intentará hacer “match” de esa dirección con
los path de rutas configuradas. Si lo consigue, mostrará el componente que corresponda.
Figura 35. Configuración de rutas en el archivo app-routing-module.ts

1.2. Patrón de diseño Inyección de dependencias
Una de las ventajas que tiene Angular respecto A la hora de testear esta clase es mucho más
a otros frameworks es la posibilidad de usar el complicado porque si se quiere comprobar la
patrón de diseño de inyección de dependencias. llamada a Factory (o se quiere interceptar no se
Este patrón sirve para proveer, suministrar, a las puede). Para ello lo que se hace es inicializar la
clases con las dependencias que se necesita. dependencia directamente desde el constructor,
Esto permite que el código se pueda testear de esta forma lo que se consigue es que al
mejor ya que se puede pasar las dependencias testear la aplicación, que se pueda crear el
desde fuera de la clase. objeto Factory desde fuera:
Imaginar que se inicializa las dependencias de

una clase de la manera tradicional:
constructor(Factory factory) {
public Example() { object_test = Factory.getObject();
object_test = Factory.getObject();
}
}
Para que este código funcione, se tiene que meter dentro del objeto Factory una anotación especial
de Angular, @Injectable():
// factory.ts
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root',
})
export class Factory {
constructor() { }
En este caso, se crea la anotación

Injectable encima de la declaración
de la clase providedIn es un
atributo especial de las anotaciones
inyectables providedIn: ‘root’ significa
que Angular creará una sola instancia
de esta clase para poder inyectarla
de forma global en los componentes
que la necesite. Esto permite ahorrar
recursos y optimizar las webs de
Angular al no tener que crear una
instancia por dependencia aunque
sea de la misma clase.
Figura 36. Inyección de dependencia en el archivo

regestudiante.service.ts
1.3. Servicios mediante inyección de dependencias
Un servicio Angular es una clase que encapsula algún tipo de funcionalidad común entre los diferentes
componentes de la aplicación, como podría ser, por ejemplo, el acceso a datos.
La extracción de funcionalidades comunes de los componentes para crear servicios supone toda una
serie de ventajas:
a. Se evita la repetición innecesaria de código en los componentes, por lo que su código
acaba siendo más ligero y centrado en el soporte a la vista.
b. Se puede crear servicios mock1 (de prueba) que faciliten el análisis de los componentes que
los usan.
c. Se mejora el control y mantenimiento de esas funcionalidades comunes.
Creación del servicio: ng generate service RegEstudiante, también se puede acotar la siguiente
orden: ng g s RegEstudiante.
Figura 37. Generación del servicio
Figura 38. Servicio generado, crea los archivos RegEstudiante.service.ts y

RegEstudiante.service.spec.ts
Creación de la clase Estudiante: escribir todas las propiedades de la clase Estudiante relacionadas
con un estudiante que coincida con la base de datos.
Comando: ng generate class RegEstudianteClass
Figura 39. Propiedades de la clase RegEstudianteClass
1 Mock: objetos simulados que imitan el comportamiento de objetos reales de forma controlada.
Abrir el archivo reg-estudiante.service.ts y primero importar la clase y las bibliotecas necesarias y

luego hacer llamadas a los métodos WebAPI.
1. import { Injectable } from '@angular/core';

2. import { HttpClient } from '@angular/common/http';
3. import { HttpHeaders } from '@angular/common/http';
4. import { Observable } from 'rxjs';
5. import { RegEstudianteClass } from './reg-estudiante-class';
6. //Después de eso, se escriben todos los métodos relacionados con el consumo web
en reg-estudiante.service.ts
7. @Injectable({
8. providedIn: 'root'
9. })
10. export class RegEstudianteService {
11. url = 'http://localhost:65389/Api/RegEstudiante';
12. constructor(private http: HttpClient) { }
13. getAllEstudiante() : Observable<RegEstudianteClass[]>
14. {
15. return this.http.get<RegEstudianteClass[]>(this.url + '/AllEstudianteDetails');
16. }
17. getEstudianteById(IdEstudiante: string): Observable<RegEstudianteClass> {
18. return this.http.get<RegEstudianteClass>(this.url + '/GetEstudianteDetailsById/'
+ IdEstudiante);
19. }
20. createEstudiante(regestudiante: RegEstudianteClass):
Observable<RegEstudianteClass> {
21. const httpOptions = { headers: new HttpHeaders({ 'Content-Type': 'application/
json'}) };
22. return this.http.post<RegEstudianteClass>(this.url + '/InsertEstudianteDetails/',
23. regestudiante, httpOptions);
24. }
25. updateEstudiante(regestudiante: RegEstudianteClass):
Observable<RegEstudianteClass> {
json'}) };
27. return this.http.put<RegEstudianteClass>(this.url + '/UpdateEstudianteDetails/',
28. regestudiante, httpOptions);
29. }
30. deleteEstudianteById(IdEstudiante: string): Observable<number> {
json'}) };
32. return this.http.delete<number>(this.url + '/DeleteEstudianteDetails?id='
+IdEstudiante,
33. httpOptions);
34. }
35. }
El servicio está completo ahora. Si se

consume la API web, Angular bloquea la
URL, este problema se llama CORS (Cross
OriginResource Sharing). Para resolverlo,
hay que ir al proyecto Web API en Visual
Studio 2019 y descargar el paquete de
Nuget para CORS.
Dar clic derecho sobre el nombre del

proyecto RegEstudiante, luego dar clic en
Administrar paquetes NuGet y descargar
el siguiente archivo:
Microsoft.AspNet.WebApi.Cors.
Figura 40. Descargar el paquete Microsoft.AspNet.

WebApi.Cors
Después de eso, ir a la carpeta App_Start en el proyecto WebAPI y abrir la clase WebApiConfig.cs.

Aquí, modificar el método Register con el siguiente código.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web.Http;
using System.Web.Http.Cors;
namespace RegEstudiante
{
public static class WebApiConfig
{
public static void Register(HttpConfiguration config)
{
// Configuración y servicios de API web
EnableCorsAttribute cors = new EnableCorsAttribute("*", "*", "*");
//var cors new EnableCorsAttribute( "*" , "*" , "*" );
config.EnableCors(cors);
// Rutas de API web

config.MapHttpAttributeRoutes();
config.Routes.MapHttpRoute(
name: "DefaultApi",
routeTemplate: "api/{controller}/{id}",
defaults: new { id = RouteParameter.Optional }
);
}
}
}
El siguiente paso es instalar y configurar el tema Material de Angular para crear una interfaz de usuario
rica, interactiva y orientada al dispositivo para la aplicación web.
Abrir el terminal nuevamente y escribir el siguiente comando:
npm install --save @angular/material @angular/cdk @angular/animations
Comenzando con el material angular

https://material.angular.io/guide/getting-startedphp?punto=19&codigo=19&inicio=0
Después de instalarlo correctamente, se registra el archivo package.json.
Las mujeres han ocupado y ocupan un papel vital en los avances de la tecnología y de la
computación.
Según la ONU la brecha de género en los sectores de la ciencia, la tecnología, la ingeniería y las
matemáticas (STEM) persiste desde hace años en todo el mundo. Los prejuicios y los estereotipos
de género que se arrastran desde hace mucho tiempo continúan manteniendo a las niñas y
mujeres alejadas de los campos relacionados con la ciencia. Solo un dato a tener en cuenta:
menos del 30 % de los investigadores en todo el mundo son mujeres.
Es por ello por lo que la Asamblea General de las Naciones Unidas proclamó el día 11 de febrero
como el Día Internacional de la Mujer y la Niña en la Ciencia. Un día que persigue lograr el acceso
y la participación plena y equitativa en la ciencia para las mujeres y las niñas, y además para lograr
la igualdad de género y el empoderamiento de las mujeres y las niñas.
Figura 41. Se registra el tema material en el archivo package.json
Ahora, se verán todas las bibliotecas necesarias en app.module.ts. También se importará un selector
de fecha que se usará en el selector de fecha para el campo de fecha de nacimiento.
Abrir la clase app.module.ts y escribir el siguiente código.
1. import { BrowserModule } from '@angular/platform-browser';

2. import { NgModule } from '@angular/core';
3. import { RegEstudianteService } from './reg-estudiante.service';
4. import { FormsModule, ReactiveFormsModule } from '@angular/forms';
5. import { HttpClientModule, HttpClient } from '@angular/common/http';
6. import { MatButtonModule } from '@angular/material/button';
7. import { MatMenuModule } from '@angular/material/menu';
8. import { MatDatepickerModule } from '@angular/material/datepicker';
9. import { MatIconModule } from '@angular/material/icon';
10. import { MatCardModule } from '@angular/material/card';
11. import { MatFormFieldModule } from '@angular/material/form-field';
12. import { MatInputModule } from '@angular/material/input';
13. import { MatTooltipModule } from '@angular/material/tooltip';
14. import { MatToolbarModule } from '@angular/material/toolbar';
15. import { MatRadioModule } from '@angular/material/radio';
16. import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
17. import { MatSidenavModule } from '@angular/material/sidenav';
18. import { AppRoutingModule } from './app-routing.module';
19. import { AppComponent } from './app.component';
20. import { RegEstudiantecComponent } from 'src/app/reg-estudiante-c/reg-
estudiante-c.component';
21. @NgModule({
22. declarations: [
23. AppComponent,
24. RegEstudiantecComponent],
25. imports: [
26. BrowserModule,
27. FormsModule,
28. ReactiveFormsModule,
29. HttpClientModule,
30. BrowserAnimationsModule,
31. MatButtonModule,
32. MatMenuModule,
33. MatDatepickerModule,
34. MatIconModule,
35. MatRadioModule,
36. MatCardModule,
37. MatSidenavModule,
38. MatFormFieldModule,
39. MatInputModule,
40. MatTooltipModule,
41. MatToolbarModule,
42. AppRoutingModule
43. ],
44. providers: [HttpClientModule,RegEstudianteService,MatDatepickerModule],
45. bootstrap: [AppComponent]
46. })
47. export class AppModule { }
Ahora, se tiene que importar la biblioteca en el archivo styles.css.
@import '@angular/material/prebuilt-themes/indigo-pink.css';
CONTENIDO V: PETICIONES HTTP Y MÉTODOS
HttpClient es un servicio con métodos para realizar peticiones HTTP en aplicaciones Angular. Es
un cliente con los métodos REST habituales (a continuación), que está basado en Observables.
Básicamente es lo que se va a utilizar para hacer llamadas a una API REST y obtener resultados de la
misma.
1.1. Instalación HttpCllient
Angular ofrece el servicio HttpClient. HttpClient es un servicio que proporciona una API simplificada,
construida sobre la interfaz XMLHttpRequest, para realizar peticiones HTTP y procesar sus respuestas.
El servicio ofrece toda una serie de métodos para realizar los distintos tipos de peticiones HTTP que
existen: get, post, put, delete, patch, head y jsonp.
En el caso particular del proyecto, lo vemos en el archivo app.module.ts:
Figura 42. Archivo app.module.ts importando HttpClientModule
1.2. Operaciones con Métodos GET y POST
Existen dos métodos con los que el navegador puede enviar información al servidor:
• Método HTTP GET. Información se envía de forma visible

• Método HTTP POST. Información se envía de forma no visible
Antes de que el navegador envíe la información proporcionada, la codifica mediante URL encoding,
dando como resultado un Query String. Esta codificación es un esquema de keys y values separados
por un ampersand &:
key1=value1&key2=value2&key3=value3...
Contenido V: Peticiones HTTP y Métodos
Los espacios y otros caracteres no alfanuméricos se sustituyen. Una vez que la información es
codificada, se envía al servidor.
Método HTTP GET
El método GET envía la información codificada del usuario en el header del HTTP request, directamente
en la URL. La página web y la información codificada se separan por un interrogante?:
www.ejemplo.com/index.htm?key1=value1&key2=value2&key3=value3...
• El método GET envía la información en la propia URL, estando limitada a 2000 caracteres.
• La información es visible por lo que con este método nunca se envía información
sensible.
• No se pueden enviar datos binarios (archivos, imágenes...).
Ejemplo sencillo de formulario html con el método GET:
<html>
<body>
<form action="formget.php" method="get">
Nombre: <input type="text" name="nombre"><br>
Email: <input type="text" name="email"><br>
<input type="submit" value="Enviar">
</form>
Hola <?php isset($_GET["nombre"]) ? print $_GET["nombre"] : ""; ?><br>
Tu email es: <?php isset($_GET["email"]) ? print $_GET["email"] : ""; ?>
</body>
</html>
La url que resulta de hacer clic en submit es de la forma:
formget.php?nombre=peter&email=peter%40ejemplo.com
En este caso @ es un carácter especial y se codifica.
Método HTTP POST
Con el método HTTP POST también se codifica la información, pero ésta se envía a través del body
del HTTP Request, por lo que no aparece en la URL.
• El método POST no tiene límite de cantidad de información a enviar.

• La información proporcionada no es visible, por lo que se puede enviar información sensible.
• Se puede usar para enviar texto normal así como datos binarios (archivos, imágenes...).
Se puede comprobar que la información no se muestra en la url.
1.3. Operaciones con Métodos PUT, PATCH Y DELETE
HTTP define un conjunto de métodos de petición para indicar la acción que se desea realizar para
un recurso determinado. Aunque estos también pueden ser sustantivos, estos métodos de solicitud
a veces son llamados HTTP verbs. Cada uno de ellos implementan una semántica diferente, pero
algunas características similares son compartidas por un grupo de ellos.
Método
Método PUT
PUT
PHP ofrece soporte para el método PUT de HTTP utilizado por algunos clientes para almacenar
ficheros en un servidor. Las peticiones PUT son mucho más simples que una subida de ficheros
mediante peticiones POST:
PUT /ruta/nombrefichero.html HTTP/1.1
Esto normalmente significaría que el cliente remoto quiere guardar el contenido que le sigue como: /
ruta/nombrefichero.html en el árbol web. Tampoco muestra ninguna información en la URL. En caso de
éxito devuelve 201 (created, en caso de que la acción haya creado un elemento) o 204 (no response,
si el servidor no devuelve ningún contenido). A diferencia de POST es idempotente2, si se crea o edita
un resource con PUT y se hace el mismo request otra vez, el resource todavía está ahí y mantiene
el mismo estado que en la primera llamada. Si con una llamada PUT se cambia aunque sea sólo un
contador en el resource, la llamada ya no es idempotente, ya que se cambian contenidos.
PUT ejemplo.com/usuario/pedro HTTP/1.1
Método PATCH
Método PATCH
Es utilizado para aplicar modificaciones parciales a un recurso. Sólo se establecerán las propiedades
proporcionadas en el cuerpo de solicitud, las propiedades no listadas conservarán su valor existente.
Método DELETE
Método DELETE
Elimina un recurso identificado en la URI. Si se elimina correctamente devuelve el código 200 junto
con un body response, o 204 sin body. DELETE, al igual que PUT y GET, también es idempotente.
DELETE ejemplo.com/usuario/pedro HTTP/1.1
2 Idempotente: se usa para describir una operación que produce los mismos resultados si se ejecuta una o varias veces.
1.4. Gestión de respuestas y errores de peticiones HTTP
La función header() envía los headers (cabeceras) HTTP y asegura que estén formateados
adecuadamente. Los headers han de ser lo primero en el response (respuesta), no se ha de escribir
nada antes de un header. A veces el HTTP server puede estar configurado para incluir otros headers
además de los que se puedan especificar en el código.
Los headers contienen todo tipo de metadatos, como la codificación de texto utilizada en el mensaje
del body, o el MIME type del contenido del body. En este caso se está especificando explícitamente
los códigos de respuesta HTTP. Los códigos de respuesta estandarizan una forma de informar al
cliente acerca del resultado de su request. Por defecto, PHP devuelve un código de respuesta 200,
que significa que ha sido satisfactoria.
El servidor debe enviar el código de respuesta HTTP más apropiado. De esta forma el cliente puede
intentar reparar sus errores, suponiendo que haya alguno.
El significado de un código de respuesta HTTP no es muy preciso, por eso HTTP es considerado algo
genérico, pero se debe intentar usar el código de respuesta que más concuerde con la situación.
Los códigos de respuesta más comúnmente utilizados con REST son:
• 200 OK. Satisfactoria. • 404 Not Found. Esta respuesta indica

• 201 Created. Un resource se ha creado. que el resource requerido no se puede
Respuesta satisfactoria a un request POST encontrar (La URL no se corresponde con
o PUT. un resource).
• 400 Bad Request. El request tiene algún • 405 Method Not Allowed. El método HTTP
error, por ejemplo cuando los datos utilizado no es soportado por este resource.
proporcionados en POST o PUT no pasan • 409 Conflict. Conflicto, por ejemplo
la validación. cuando se usa un PUT request para crear
• 401 Unauthorized. Es necesario el mismo resource dos veces.
identificarse primero. • 500 Internal Server Error. Un error 500
suele ser un error inesperado en el servidor.
1.5. Intercepción de peticiones y respuestas
Angular cuenta con un mecanismo para modificar los pedidos o las respuestas hacia o desde un
servidor. Ha creado un tipo de servicio: HttpInterceptor.
Modificando las peticiones
Antes de realizar una petición con HttpClient Angular obtiene todos los interceptors declarados en el
módulo y ejecuta cada uno de ellos como si de un middleware3 se tratara.
3 Middleware: es un bloque de código que se ejecuta entre la petición que hace el usuario (request) hasta que la petición llega al servidor.
Mediante estos interceptors se puede modificar tanto el request antes de ser enviado al servidor
como la respuesta una vez que se obtiene desde el servidor.
Ejemplo de un HttpInterceptor que agrega el host y el protocolo a todos los pedidos hechos por
HttpClient que no comiencen con http o https:
import { Injectable } from '@angular/core';

import {HttpHandler, HttpRequest, HttpInterceptor} from '@angular/common/
http';
import {environment} from '../../environments/environment';
@Injectable({
providedIn: 'root'
})
export class BaseURLInterceptor implements HttpInterceptor {
intercept(req: HttpRequest<any>, next: HttpHandler) {
if (!req.url.match(/^http(s)?:\/\/(.*)$/)) {
const url = `${environment.baseURL}${req.url}`.replace(/([^:]\/)\/+/g,
'$1');
req = req.clone({ url });
}
return next.handle(req);
}
}
El interceptor va a verificar que la URL no comience por http o https, y en ese caso va a agregar la
variable environment.baseURL al comienzo de la url. Ahora los servicios pueden realizar pedidos sin
tener que agregar la URL completa a la API, haciendo simplemente this.http.get('/posts') el interceptor
se va a encargar de completar la URL.
Capturando las respuestas o errores

La forma de capturar respuestas o los errors de una llamada y el manejo de cualquier error http de
manera uniforme se verá en este ejemplo:
import {Injectable} from '@angular/core';

import {HttpHandler, HttpRequest, HttpInterceptor} from '@angular/common/
http';
import {throwError} from 'rxjs';
import {catchError} from 'rxjs/internal/operators';
import {ErrorService} from '../my-services/error.service';
@Injectable({
providedIn: 'root'
})
export class HttpErrorInterceptor implements HttpInterceptor {

construct(private errorService: ErrorService) {}

intercept(req: HttpRequest<any>, next: HttpHandler) {
return next.handle(req).pipe(
catchError(error => {
let errorMessage = '';
if (error instanceof ErrorEvent) {
// client-side error
errorMessage = `Client-side error: ${error.error.message}`;
} else {
// backend error
errorMessage = `Server-side error: ${error.status} ${error.message}`;
}
// Aquí se podrías agregar código que muestre el error en alguna parte
fija de la pantalla.
this.errorService.show(errorMessage);
return throwError(errorMessage);
})
);
}
}
En el ejemplo se observa como se captura el error de cualquier petición que se realice. Hay que tener
en cuenta que el servicio ErrorService es un servicio que debería crear el o la programadora, para
mostrar los mensajes de error http de manera uniforme en la página.
Este interceptor va a realizar el pedido tal como lo recibe ejecutando la funciona next.handler(req) y
va a continuar con un pipe que va a estar atento a cualquier error que pueda suceder con catchError
. Al recibir un error catchError va a generar un mensaje uniforme y pasarlo al servicio que muestra
errores en la página (en este caso ErrorService).
Agregando los interceptors al módulo

Una vez que se tienen programado el interceptors lo único que falta es informarle a Angular que se
desea agregar los propios interceptors al módulo. Los interceptors son servicios y son parte de un
provider en particular que recibe múltiples clases.
Este es un ejemplo de un módulo simple que introduce los dos interceptors que se acaban de crear:
import {NgModule} from '@angular/core';

import {BrowserModule} from '@angular/platform-browser';
import {HTTP_INTERCEPTORS, HttpClientModule} from '@angular/common/http';
import {AppComponent} from './app.component';

import {BaseURLInterceptor} from './services/base-url.interceptor';
import {HttpErrorInterceptor} from './services/http-error.interceptor';

@NgModule({
declarations: [ AppComponent ],
imports: [
BrowserModule,
HttpClientModule
],
providers: [
{ provide: HTTP_INTERCEPTORS, useClass: BaseURLInterceptor, multi: true },
{ provide: HTTP_INTERCEPTORS, useClass: HttpErrorInterceptor, multi: true }
],
bootstrap: [AppComponent]
})
export class AppModule { }
Ambos HttpInterceptors se van a ejecutar cada vez que se intenta hacer una llamada http con HttpClient.
Contenido VI: Formularios
CONTENIDO VI: FORMULARIOS
Los formularios son uno de los elementos más importantes en las aplicaciones de gestión ya que son,
en esencia, los que permiten obtener y mostrar información para registrarla o realizar acciones a partir
de la misma. En HTML se dispone de un buen conjunto de elementos mediante los cuales se puede
fabricar formularios, entre los que se destacan los siguientes: input, select, radio button, textarea,
checkbox, buttons, entre otros.
1.1. Obtención de valores
Para acceder a los valores introducidos en los controles de un formulario, se puede utilizar diversos
mecanismos. Uno de ellos es el uso de variables locales que hagan referencia a los controles. Para
trabajar con las propiedades de un control se añade en el tag la definición #nomVar, la propiedad
name y ngModel. Por ejemplo, para un supuesto control de nominado nombre, se usaría una expresión
como la siguiente:
<input type=”text” class=”form-control” ngModel name=”nombre” #nom>
1.2. Estado de los objetos
El estado de los objetos viene determinado por un conjunto de clases que permitirá averiguar si
los objetos de un formulario han sido tratados o modificados o sin son válidos o no respecto de sus
posibles restricciones.
Los estados más importantes de un objeto están representados por alguna de las siguientes clases:
Tabla 2. Estado de los objetos

Clases Estado de Control
ng-touched Ya ha tenido el foco en algún momento
ng-untouched Aún no ha tenido el foco
ng-dirty Se ha hecho alguna modificación
ng-pristine Aun no se ha modificado nada
ng-valid Posee un contenido válido
ng-invalid Posee un contenido inválido
ng-pending Validaciones asíncronas pendientes
Un objeto posee varias clases asociadas simultáneamente, aunque algunas de ellas son incompatibles
entre sí como pueden ser ng-touched con ng-untouched, ng-dirty con ng-pristine, o ng-valid con ng-
invalid.
1.3. Validaciones
Las validaciones en los formularios son imprescindibles para poder recoger la información con la
calidad necesaria antes de enviarla para su procesamiento posterior. Se pueden realizar tantas
validaciones como sean necesarias en cada uno de los controles que quiera y habilitar o deshabilitar
el botón Submit del formulario dependiendo de si hay o no errores en el formulario.
1.4. Validaciones reactivas
Cuando necesite crear controles dinámicamente y/o se requiera realizar pruebas unitarias, se hace
uso de reactive forms.
La creación de los controles se hace en la clase del componente. Los reactive forms son síncronos,
permiten añadir controles dinámicamente y facilitan los test unitarios. En la plantilla, simplemente
se definen los tags HTML correspondientes a los inputs, pero estos quedarán relacionados con la
clase del componente gracias a formControlName y formGroupName para los controles y grupos de
controles, respectivamente.
Se diseña la página HTML del proyecto RegistroEstudiante (formulario) para la entrada y validaciones
de datos, para ello: Abrir employee.component.html y escribir el siguiente código:
<div class="container">
<mat-card>
<mat-toolbar color="accent">
<div align="center" style="color:white;text-align: right;">
Operaciones CRUD en Angular usando Web API y SQL Server
</div>
</mat-toolbar>
<br><br>
<mat-card-content>
<form [formGroup]="RegEstudianteForm"(ngSubmit)="onFormSubmit(RegEstudianteForm.
value)">
<table>
<tr>
<td class="tbl1">
<mat-form-field class="demo-full-width">
<input formControlName="NombreEstudiante" matTooltip="Introduzca
el nombre del Estudiante" matInput placeholder="Nombre Estudiante">
</mat-form-field>
<mat-error>
<span *ngIf="!RegEstudianteForm.get('NombreEstudiante').value
&& RegEstudianteForm.get('NombreEstudiante').touched"></span>
</mat-error>
</td>
<td class="tbl1">
<input matInput [matDatepicker]="picker"matTooltip="Fecha de
Nacimiento" formControlName="FechaNac"placeholder="Fecha de nacimiento">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-
toggle>
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>
<mat-error>
<span *ngIf="!RegEstudianteForm.get('FechaNac').value &&
RegEstudianteForm.get('FechaNac').touched"></span>
</mat-error>
</td>
<td class="tbl1">
<input formControlName="Email" matTooltip="Email" matInput
placeholder="Email">
</mat-form-field>
<mat-error>
<span *ngIf="!RegEstudianteForm.get('Email').value &&
RegEstudianteForm.get('Email').touched"></span>
</mat-error>
</td>
</tr>
<tr>
<td class="tbl1">
<span>Sexo</span>
<br><br>
<mat-radio-group matTooltip="Sexo"formControlName="Sexo">
<mat-radio-button value="0">Male</mat-radio-button>
<mat-radio-button value="1">Female</mat-radio-button>
</mat-radio-group>
<mat-error>
<span *ngIf="!RegEstudianteForm.get('Sexo').value &&
RegEstudianteForm.get('Sexo').touched"></span>
</mat-error>
</td>
<td class="tbl1">
<input matTooltip="Direccion"formControlName="Direccion"
matInput placeholder="Direccion">
</mat-form-field>
<mat-error>
<span *ngIf="!RegEstudianteForm.get('Direccion').value &&
RegEstudianteForm.get('Direccion').touched"></span>
</mat-error>
</td>
<td class="tbl1">
<input formControlName="Cedula" matTooltip="Numero de Cedula"
matInput placeholder="Cedula">
</mat-form-field>
<mat-error>
<span *ngIf="!RegEstudianteForm.get('Cedula').value &&
RegEstudianteForm.get('Cedula').touched"></span>
</mat-error>
</td>
</tr>
<tr>
<td></td>
<td class="content-center">
<button type="submit" mat-raised-button
color="accent"matTooltip="Enviar"[disabled]="!RegEstudianteForm.valid">Submit</
button>
<button type="reset" mat-raised-button color="accent"matTooltip="Reset"
(click)="resetForm()">Reset</button>
</td>
<td>
<p *ngIf="dataSaved" style="color:rgb(0, 128, 0);font-
size:20px;font-weight:bold" Class="success" align="left">
{{massage}}
</p>
</td>
</tr>
</table>
<br><br>
<table class="table" >
<tr ngclass="btn-primary">
<th class="tbl2">Nombre Estudiante</th>
<th class="tbl2">Fecha Nacimiento</th>
<th class="tbl2">Email</th>
<th class="tbl2">Sexo</th>
<th class="tbl2">Direccion</th>
<th class="tbl2">Cedula/th>
<th class="tbl2">Editar</th>
<th class="tbl2">Eliminar</th>
</tr>
<tr *ngFor="let estudiante of allRegEstudiante | async">
<td class="tbl2">{{ estudiante.NombreEstudiante}}</td>
<td class="tbl2">{{ estudiante.FechaNac | date }}</td>
<td class="tbl2">{{ estudiante.Email}}</td>
<td class="tbl2">{{estudiante.Sexo ==0? 'Hombre' : 'Mujer'}}</td>
<td class="tbl2">{{ estudiante.Direccion}}</td>
<td class="tbl2">{{ estudiante.Cedula}}</td>
<td class="tbl2">
<button type="button" class="btn btn-info"matTooltip="Click en

el boton Editar"(click)="loadEstudianteToEdit(estudiante.NombreEstudiante)">Editar</
button>
</td>
<td class="tbl2">
<button type="button" class="btn btn-danger"matTooltip="Click en el
boton Eliminar"(click)="deleteEstudiante(estudiante.IdEstudiante)">Eliminar</button>
</td>
</tr>
</table>
</form>
</mat-card-content>
</mat-card>
</div>
Abrir el archivo app.component.html y escribir el siguiente código
import { Component, OnInit } from '@angular/core';

import { FormBuilder, Validators } from '@angular/forms';
import { Observable } from 'rxjs';
import { RegEstudianteService } from '../reg-estudiante.service';
import { RegEstudianteClass } from '../reg-estudiante-class';
@Component({
selector: 'app-reg-estudiante-c',
templateUrl: './reg-estudiante-c.component',
styleUrls: ['./reg-estudiante-c.component.styl']
})
export class RegEstudiantecComponent implements OnInit {
dataSaved = false;
RegEstudianteForm: any;
AllRegEstudianteDetails: Observable<RegEstudianteClass[]>;
IdEstudianteUpdate = null;
massage = null;
constructor(private formbulider: FormBuilder, private

RegEstudianteService:RegEstudianteService) { }
ngOnInit() {
this.RegEstudianteForm = this.formbulider.group({
NombreEstudiante: ['', [Validators.required]],
FechaNac: ['', [Validators.required]],
Email: ['', [Validators.required]],
Sexo: ['', [Validators.required]],
Direccion: ['', [Validators.required]],
Cedula: ['', [Validators.required]],
});
this.loadAllRegEstudiante();
}
loadAllRegEstudiante() {
this.allRegEstudiante = this.RegEstudianteService.getAllEstudiante();
}
onFormSubmit() {
this.dataSaved = false;
const estudiante = this.RegEstudianteForm.value;
this.CreateEstudiante(estudiante);
this.RegEstudianteForm.reset();
}
loadEstudienteToEdit(IdEstudiante: string) {
this.RegEstudianteService.getEstudianteById(IdEstudiante).subscribe(Estudiante=>
{
this.massage = null;
this.IdEstudianteUpdate = Estudiante.IdEstudiante;
this.RegEstudianteForm.controls['NombreEstudiante'].setValue(Estudiante.
NombreEstudiante);
this.RegEstudianteForm.controls['FechaNac'].setValue(Estudiante.FechaNac);
this.RegEstudianteForm.controls['Email'].setValue(Estudiante.Email);
this.RegEstudianteForm.controls['Sexo'].setValue(Estudiante.Sexo);
this.RegEstudianteForm.controls['Direccion'].setValue(Estudiante.Direccion);
this.RegEstudianteForm.controls['Cedula'].setValue(Estudiante.Cedula);
});
}
CreateEstudiante(estudiante: RegEstudianteClass) {
if (this.IdEstudianteUpdate == null) {
this.RegEstudianteService.createEstudiante(estudiante).subscribe(
() => {
this.dataSaved = true;
this.massage = 'Registro guardado satisfactoriamente';
this.IdEstudianteUpdate = null;
}
);
} else {
estudiante.IdEstudiante = this.IdEstudianteUpdate;
this.RegEstudianteService.updateEstudiante(estudiante).subscribe(() => {
this.massage = 'Registro actualizado';
});
}
}
deleteEstudiante(IdEstudiante: string) {
if (confirm("Esta segura que desea eliminar ?")) {
this.RegEstudianteService.deleteEstudianteById(IdEstudiante).subscribe(() => {
this.massage = 'Registro eliminado';
});
}
}
resetForm() {
this.massage = null;
}
}
Se ha completado toda la funcionalidad de código necesaria para las operaciones CRUD. Antes de
ejecutar la aplicación. Ahora, ejecutar la aplicación y ver cómo funciona.
Abrir una terminal y escribir el siguiente comando para ejecutar el programa.
ng serve -o
La salida se parece a la siguiente imagen. Es una interfaz de usuario impresionante creada con
operaciones CRUD.
Figura 43. Interfaz de aplicación web CRUD
CRUD Operations In Angular 7 Using Web API

https://www.c-sharpcorner.com/article/crud-operation-in-angular-7-using-web-api/
Las empresas, instituciones y organizaciones que desarrollan sus páginas o portales web con
perspectiva de género, contribuyen a la igualdad entre mujeres y hombres, a través de una
práctica activa positiva que dignifican a ambos géneros, porque: i) ofrecen una imagen igualitaria
de mujeres y hombres, evitando el androcentrismo y el sexismo; ii) Fomenta la aplicación y difusión
de las políticas de igualdad a través de Internet; iii) Evita y reduce las desigualdades de género en
el uso de Internet y los servicios que se ofrecen a través de este medio.
“Androcentrismo hace referencia a la práctica, consciente o no, de otorgar al varón y a su punto

de vista una posición central en el mundo, las sociedades, la cultura y la historia. Los hombres
constituyen el sujeto de referencia y las mujeres quedan invisibilizadas o excluidas”. androcentrismo
- Bing.
ÍNDICE DE TABLAS Y FIGURAS
TABLAS
Tabla 1. Elementos de la aplicación web en Angular.................5 Figura 20. Agregar nuevo elemento en el modelo de datos..13
Tabla 2. Estado de los objetos.......................................................33 Figura 21. ADO.Net Entity Data Model..........................................13
Figura 22. Contenido del modelo de datos................................14
FIGURAS Figura 23. Se elige origen de datos SQL Server........................14
Figura 24. Propiedades de conexión con la base de datos...14
Figura 1. Tipos de Aplicaciones Web............................................... 1 Figura 25. Propiedades de conexión del SQL Server..............14
Figura 2. Sitio web de Visual Studio 2019....................................2 Figura 26. Se establece la conexión con la base de datos... 15
Figura 3. Descarga e instalación de Visual Studio Community Figura 27. Se elige la versión de Entity Framework................. 15
2019..................................................................................................2 Figura 28. Selección de base de datos y tablas....................... 15
Figura 4. Descarga de Node.js........................................................2 Figura 29. Interfaz del modelo de datos..................................... 15
Figura 5. Pantalla principal de aplicación por defecto.............. 3 Figura 30. Agregar el controlador Web Api................................ 15
Figura 6. Sitio web de descarga de Visual Studio Code.......... 4 Figura 31. Web Api 2 en blanco..................................................... 16
Figura 7. Interfaz de desarrollo Visual Studio Code................... 4 Figura 32. Asignar nombre al controlador.................................. 16
Figura 8. Interfaz de usuario aplicación Registro Estudiante... 6 Figura 33. Clase ApiControler........................................................ 16
Figura 9. Figura 9. Base de datos RegEstudiante....................... 7 Figura 34. Importación de rutas en el archivo app.module.ts..17
Figura 10. Estructura del proyecto RedEstudiante en Visual Figura 35. Configuración de rutas en el archivo app-routing-
Studio Code.................................................................................... 7 module.ts....................................................................................... 18
Figura 11. Modulo: app.module.ts.....................................................8 Figura 36. Inyección de dependencia en el archivo
Figura 12. Componente principal: app.component.ts................8 regestudiante.service.ts............................................................ 19
Figura 13. Archivo index.html............................................................9 Figura 37. Generación del servicio............................................... 20
Figura 14. Archivo app.module.ts, hace referencia al Figura 38. Servicio generado, crea los archivos RegEstudiante.
componente header................................................................... 10 service.ts y RegEstudiante.service.spec.ts.......................... 20
Figura 15. Archivo app.component.html, hace referencia a Figura 39. Propiedades de la clase RegEstudianteClass...... 20
<app-header>.................................................................................11 Figura 40. Descargar el paquete Microsoft.AspNet.WebApi.
Figura 16. Interfaz de Visual Studio 2019.....................................13 Cors................................................................................................ 22
Figura 17. Selección de Aplicación Web ASP.NET......................13 Figura 41. Se registra el tema material en el archivo package.
Figura 18. Nombre del proyecto y ubicación...............................13 json..................................................................................................24
Figura 19. Selección del tipo de aplicación, en este caso Web Figura 42. Archivo app.module.ts importando
API....................................................................................................13 HttpClientModule....................................................................... 26
Figura 43. Interfaz de aplicación web CRUD............................ 39
BIBLIOGRAFÍA
• (ONGEI), O. N. (Agosto de 2014). Obtenido de https://www.pmg-ssi.com/2014/08/taller-

implementacion-norma-iso-27001-gobierno-peru/
• Business, O. (Diciembre de 2018). ostec.blog. Obtenido de https://ostec.blog/es/generico/iso-
27002-buenas-practicas-gsi
• Colombia, P. d. (Mayo de 2018). es.presidencia.gov.co. Obtenido de http://es.presidencia.gov.co/
dapre/DocumentosSIGEPRE/M-TI-01-Manual-Politicas-Seguridad-Informacion.pdf
• Colombia, P. G. (Marzo de 2016). polux.unipiloto.edu.co. Obtenido de http://polux.unipiloto.edu.
co:8080/00003023.pdf
• Colombia, U. N. (Noviembre de 2015). hemeroteca.unad.edu.co. Obtenido de http://hemeroteca.
unad.edu.co/index.php/publicaciones-e-investigacion/article/view/1435/1874
• Cuba, C. N. (Agosto de 2013). instituciones.sld.cu. Obtenido de https://instituciones.sld.cu/
dnspminsap/files/2013/08/Metodologia-PSI-NUEVAProyecto.pdf
• Erb, M. (Julio de 2018). protejete.wordpress.com. Obtenido de https://protejete.wordpress.com/
gdr_principal/
• Exterior, I. C. (Octubre de 2018). portal.icetex.gov.co. Obtenido de https://portal.icetex.gov.
co/Portal/docs/default-source/documentos-el-icetex/biblioteca/manuales-de-la-entidad/m11-
manual-seguridad-de-la-informacion-v3.pdf
• iso27000.es. (octubre de 2018). iso27000.es. Obtenido de http://www.iso27000.es/download/
doc_sgsi_all.pdf
• ISOTools. (Febrero de 2015). www.isotools.org. Obtenido de https://www.isotools.org/2015/02/12/
iso-27001-pasos-implantacion-politica-seguridad-procedimientos/
• Neira, A. L. (Enero de 2017). www.iso27000.es. Obtenido de http://www.iso27000.es/
• Tools, I. (22 de noviembre de 2016). isotools.org. Obtenido de https://www.isotools.org/2016/11/22/
acciones-preventivas-correctivas-sg-sst/
• Valencia, U. I. (Marzo de 2018). /www.universidadviu.com. Obtenido de https://www.universidadviu.
com/crear-plan-seguridad-informatica-facilmente/

Programacion de Aplicaciones Web2

Cargado por

Información del documento

Descripción original:

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Programacion de Aplicaciones Web2

Cargado por

Copyright:

Formatos disponibles

INSTITUTO NACIONAL TECNOLÓGICO

DIRECCIÓN GENERAL DE FORMACIÓN PROFESIONAL

CARTILLA PARA EL PROTAGONISTA

Se autoriza la reproducción y difusión del contenido de esta cartilla para fines

La cartilla se encuentra estructurada en 6 contenidos :

• Contenido 1: Componentes de la aplicacion web

Al finalizar el último contenido de la cartilla, encontrarás:

• Índice de tablas y figuras

ÍNDICE DE TABLAS Y FIGURAS......................................................................................................................................................................42

CONTENIDO I: COMPONENTES DE LA APLICACIÓN WEB

Cliente y servidor estáticos: no hay ningún tipo de dinamismo y el servidor

Cliente estático y servidor dinámico: el servidor devuelve recursos dinámicos,

3 Cliente/servidor dinámicos: el cliente es dinámico porque las páginas web

1.1. Características de las Tecnologías Web del lado del cliente

1.2. Instalación del entorno de desarrollo

1. Descargar el instalador de Visual Studio 2019

Figura 2. Sitio web de Visual Studio 2019

Figura 3. Descarga e instalación de Visual Studio

npm install -g @angular/cli

Figura 4. Descarga de Node.js

El flag - -open sirve para que se abra

Este comando de NPM sirve para instalar todas

Figura 6. Sitio web de descarga de Visual Studio Code

Figura 7. Interfaz de desarrollo Visual Studio Code

Visual Studio Code

CONTENIDO II: DISEÑO DE INTERFAZ DE USUARIO WEB

1.1. Elementos de la aplicación

Tabla 1. Elementos de la aplicación web en Angular

• Declarations: define las vistas que pertenecen a este módulo.

• Interpolación: muestra el valor de una propiedad en el lugar donde se

Figura 8. Interfaz de usuario aplicación Registro Estudiante

Base de datos: RegEstudiante, tabla: Estudiante

Figura 9. Figura 9. Base de datos RegEstudiante

Otra forma de abrir el proyecto en Visual

En cualquiera de las dos opciones, de

Al crear una aplicación con Angular CLI,

Figura 11. Modulo: app.module.ts

Figura 12. Componente principal: app.component.ts

TemplateUrl hace referencia al archivo app.component.html donde se encuentra la definición de los

Title, es el nombre de título de la aplicación web y se ejecutará en el archivo app.component.html.

Figura 13. Archivo index.html

Augusta do Condesa de Lovelace (Londres, 10 de diciembre de 1815-íd., 27 de noviembre de 1852),

Para crear un componente nuevo, se escribe en consola el comando:

ng generate component [directorio/] nombre del componente.

También se puede escribir el comando corto:

ng g c [directorio/] nombre del componente.

Figura 14. Crea el componente header

Crear la carpeta Components/header en el proyecto y en el archivo app.module.ts se hace referencia

Figura 14. Archivo app.module.ts, hace referencia al componente header

Modificando el código en el archivo app.component.html con el marcador: <app-header></app-

Figura 15. Archivo app.component.html, hace referencia a <app-header>

CONTENIDO III: COMUNICACIÓN ENTRE COMPONENTES

1.1. Tuberías PiPe

1. <p>Nombre del estudiante:{{ nombre | uppercase}}</p>

En algunas pipes se puede pasar parámetros:

2. <p>El saldo es:{{ saldo | currency:'$'}}</p>

1.2. Modelado de datos

Figura 20. Agregar nuevo elemento en el modelo

Se selecciona el contenido del modelo: EF Se establecen las propiedades de conexión:

Figura 22. Contenido del modelo de datos

Figura 25. Propiedades de conexión del SQL Server

Figura 23. Se elige origen de datos SQL Server