Angular

Hello!
Kelvin Carrión Alfaro
FullStack Developer

Pueden encontrarme:
kelvin.ca91@gmail.com
https://www.linkedin.com/in/kelvin-carrión-alfaro/
+051 993 197 088

Temas del curso
★ Introducción sobre Angular
★ Detalle importante de JavaScript
○ Coercion
○ Conversion explicita e implicita
★ ECMAScript
○ Novedades en ES6
○ Novedades en ES7
○ Novedades en ES8
○ Novedades en ES9
○ Novedades en ES10
★ TypeScript
○ Interfaces
○ Types
○ Extends
○ Implements
★ Instalación de Angular
★ Comandos principales para usar con
AngularCLI
★ Directivas estructurares y de atributo
★ ¿Qué son los Componentes, modulos y
servicios?
★ Components
○ Ciclos de vida
○ Components padres e hijos
★ Modules
○ Declaración para componentes
reutilizables
3
★ Routes
○ Rutas principales
○ Rutas hijas
○ Lazy loading modules
★ CanActivate
○ Validación para rutas
★ Pipes
○ Uso de pipes de Angular
○ Crear pipes personalizados
★ Services
○ HttpClient - Methods Get,
Post, Put, Delete
○ HttpHeaders
○ Promesas vs Observables
★ Forms & ReactiveForms
○ Formas de uso de formulario
○ Validación de campos
★ Implementación de módulos y
pluggins externos con NPM
★ Chat Realtime con Firebase
★ Firebase
○ Cloud Storage
○ Cloud Firestore
○ Hosting
○ RealTime Database
○ Authentication
 4

HERRAMIENTAS QUE NECESITAMOS

Browser
- Chrome o Firefox de preferencia
- Herramienta para desarrolladores (F12)

Editor de Texto
- Visual Studio Code
- Atom
- Sublime Text

Extensiones del editor

- Angular Snippets (John Papa)
- Angular Files (Alexander Ivanichev)
- Code Runner (Jun Han)
- Prettier-Code formatter (Esben Petersen)
- TSLint (Microsoft)
 5

INTRODUCCIÓN A ANGULAR
 6

¿Qué pasa con las versiones de Angular?

2.0.0 // Versión estable

2.0.1 // Corrección de problemas

2.1.0 // Nuevas funcionalidades

4.0.0 // Nuevas funcionalidades - Atención a los cambios

8.0.0 // Marzo 2019 - Disponible en Mayo 2019

9.0.0 // Setiembre/Octubre 2019 - Disponible en Febrero 2020

 7

No siempre lo recien
salido es mejor
 8

¿Qué es angular?

Angular es un framework para aplicaciones web desarrollado en

TypeScript, de código abierto, mantenido por Google, que se utiliza
para crear y mantener aplicaciones web SPA.

Angular se basa en clases tipo "Componentes", cuyas propiedades

son las usadas para hacer el binding de los datos. En dichas clases
tenemos propiedades (variables) y métodos (funciones a llamar).

Angular es la evolución de AngularJS aunque incompatible con su

predecesor.

Curva de aprendizaje: Media - Alta

 9

DETALLES IMPORTANTE DE
JAVASCRIPT
10
 11

Coerción de datos

JavaScript al no ser fuertemente tipado tiene la bondad de no

necesitar declarar el tipo de dato que almacenará una variable.

Pero esta bondad puede ser peligrosa ya que el intérprete de

JavaScript al realizar la conversión puede traernos valores que no
esperábamos que sucediera.

Más Info: https://www.etnassoft.com/2011/04/06/coercion-de-datos-en-javascript

 12

CONVERSIÓN DE DATOS
EXPLICITA IMPLICITA
 13

¿Qué es ECMAScript?
 14

“European Computer Manufacturers Association (ECMA)”, una

organización internacional basada en membresías de estándares para
la comunicación y la información.

En el año de 1997 se crea un comité (TC39) en la ECMA para

estandarizar JavaScript. A partir de entonces, los estándares de
JavaScript se rigen como ECMAScript. No solo JavaScript se basa el
lenguaje ECMAScript, existen otros como JScript y ActionScript 3 que
también lo hacen.

Haciendo una analogía, diremos que ECMAScript es el lenguaje y

JavaScript, JScript y ActionScript 3 son dialectos de este lenguaje,
siendo JavaScript su dialecto más conocido y utilizado.

https://tc39.es
 15

ECMASCRIPT 6 ECMASCRIPT 7 ECMASCRIPT 8

Template Literales Includes Objects.entries
Let y Const Operador Objects.values
Operador de propagación exponencial Objects.keys
Destructuración padStart
Arrow Functions padEnd
Default Parms Async & Await
Promesas
Clases
Modulos
Generators
 16

ECMASCRIPT 9 ECMASCRIPT 10
Operador de reposo flat para arreglos
Promise.finally flatMap
Ejecución de Regex trimStart
trimEnd
Object.fromEntries
17
 18

Mientras más cosas sabemos,

más simple es el código
 19

TYPESCRIPT
 20

TypeScript es un lenguaje de programación de código abierto con

herramientas de programación orientada a objetos.

TypeScript convierte su código en Javascript común. Es llamado

también Superset de Javascript, lo que significa que si el navegador
está basado en Javascript, este nunca llegará a saber que el código
original fue realizado con TypeScript y ejecutará el Javascript como
lenguaje original.

Angular, uno de los frameworks más famosos de JavaScript, está

desarrollando en TypeScript, para lo cual conocer este lenguaje será
fundamental para entender y darle un mejor uso.
Los archivos TypeScript tienen la extensión “.ts” que necesitan ser
compilados a “.js” para que el navegador pueda entenderlo.

https://www.typescriptlang.org
 21

instalación de typescript
https://nodejs.org/en/ https://www.typescriptlang.or
g
 22

interface Type
Sirven para declarar que Sirven para declarar que
propiedades puede tener una propiedades puede tener
variable. una variable.
Las interfaces pueden No pueden ampliarce ni
ampliarce y extenderse extenderse

extends implements
Lo que se conoce como Lo que se conoce como
Herencia. Polimorfismo.
Sirve para poder heredar los Sirve para poder usar las
valores de las propiedades o propiedades o métodos de
métodos de un Interface, un Interface, Type o Class
Type o Class
 23

INSTALACIÓN DE ANGULAR
 24

Instalación de Angular CLI

Crear un nuevo proyecto

Compilar el proyecto
 25

Comandos principales para

usar con AngularCLI
 26

COMANDOS PRINCIPALES EN ANGULAR CLI

Crear un nuevo proyecto: ng new name-proyect

Levantar el proyecto: ng serve
Levantar el proyecto en un puerto: ng serve --port=4300
Generar un component: ng generate component ruta-name
Generar un service: ng g s ruta-name
Generar un module: ng g m ruta-name
Generar un interface: ng g i ruta-name
Generar un pipe: ng g p ruta-name
Compilar el proyecto y obtener archivos de desarrollo: ng build
Compilar el proyecto y obtener archivos de producción: ng build --prod
 27

DIRECTIVAS ESTRUCTURALES Y DE
ATRIBUTOS
 28

DIRECTIVAS
Las directivas estructurales son instrucciones que le dicen a la parte del
HTML que es lo que tiene que hacer.

DIRECTIVAS ESTRUCTURALES DIRECTIVAS DE ATRIBUTO

•Es aquella que administra una • Una directiva de atributo cambia
región del HTML la apariencia o comportamiento de
•*ngIf : Muestra / oculta un elemento, componente u otra
elementos del DOM. directiva.
•*ngFor : Ejecuta bucles sobre •Se pueden directivas
elementos del DOM customizadas

Se pueden aplicar muchas directivas de atributo a un elemento.

Sin embargo solo es posible aplicar una directiva estructural a un
elemento.
 29

*NGIF
Esta directiva toma una expresión booleana y hace que toda la porción
del DOM aparezca o desaparezca dada esa condición.
Algo muy importante, es que la directiva *ngIf hace que aparezca o
desaparezca el elemento del DOM, mejorando así la performance de
nuestra aplicación.
Adicionalmente, es posible utilizar operadores lógicos para evaluar la
condición booleana de *ngIf, tales como &&, ||, etc.
 30

*NGFOR
Esta directiva es un poco más compleja que *ngIf ya que *ngFor permite
generar iteraciones de elementos HTML.
Las partes obligatorias:
•Declaración de la variable que contiene el valor de la iteración
•Utilización de palabra of.
•Variable a iterar.
Las partes opcionales:
•Índice de la iteración
•Imprimir la variable que contiene el valor de la iteración con data binding.
 31

¿Qué son los Components,

modules & services?
 32

COMPONENTS
Un componente son pequeñas clases
que cumplen una tarea específica.
Puede ser una página, un header, un
botón, etc.
Contiene un archivo html con un ts y
algunas veces scss para crear un
elemento con características propias
tanto de comportamiento como de
apariencia que se puede mostrar en
un navegador.
Lo puedes pensar como en una pieza
de lego la cual vas juntando con otras
piezas de lego para formar algo
interesante para interactuar con un
usuario.
 33

SERVICES
Básicamente un servicio es un
proveedor de datos, que
mantiene lógica de acceso y
operativa relacionada con el
negocio y las cosas que se
hacen con los datos dentro de
una aplicación.
Los servicios serán consumidos
por los componentes, que se
delegarán en ellos la
responsabilidad de acceder a la
información para poder
manipularla.
 34

MODULES
Representan un concepto central y
juegan un papel fundamental en la
estructuración de las aplicaciones
Angular.
Un Módulo agrupa un conjunto de
artefactos, como son componentes,
directivas, pipes y servicios que
forman parte de ese mismo módulo.
Normalmente tendemos a
estructurar nuestra aplicación en
módulos de características
(contactos, órdenes,
administración) que contienen
componentes y servicios
compartidos que son utilizados por
otros módulos de características a lo
largo de la aplicación.
 35

LIFE CYCLES
COMPONENTS
 36

COMPONENTS
Un componente son pequeñas clases
que cumplen una tarea específica.
Puede ser una página, un header, un
botón, etc.
Contiene un archivo html con un ts y
algunas veces scss para crear un
elemento con características propias
tanto de comportamiento como de
apariencia que se puede mostrar en
un navegador.
Lo puedes pensar como en una pieza
de lego la cual vas juntando con otras
piezas de lego para formar algo
interesante para interactuar con un
usuario.
 37

Life Cycles
 38

ngOnChanges()
Responde cuando Angular establece o restablece las propiedades
de entrada vinculadas a datos.

El método recibe un objeto SimpleChanges de valores de propiedad

actuales y anteriores.

Tenga en cuenta que esto sucede con mucha frecuencia, por lo que
cualquier operación que realice aquí afecta significativamente el
rendimiento.

Llamado antes de ngOnInit () y cada vez que cambian una o más

propiedades de entrada enlazadas a datos.
 39

ngOnInit()
Inicializa la directiva o componente después de que Angular
muestre primero las propiedades enlazadas a datos y establezca
las propiedades de entrada de la directiva o componente.

Llamado una vez, después de los primeros ngOnChanges ().

 40

ngOnDestroy()
Justo antes de que Angular destruya la directiva o el componente.

Anule la suscripción de Observables y separe los controladores de

eventos para evitar pérdidas de memoria.

Llamado inmediatamente antes de que Angular destruya la

directiva o componente.
 41

PARENTS & CHILDS

COMPONENTS
 42

Angular está formado por muchos componentes.

Hay un componente raíz(padre) que sirve como componente
principal, todos los demás componentes pueden denominarse
Componente secundario(hijo) para el componente raíz.

Suponiendo que hay un componente raíz que alberga dos

componentes secundarios (componente-a y componente-b).
Simplemente podemos decir que el componente-a y el
componente-b son componentes hermanos.
 43

¿Cómo compartir datos entre componentes?

Para compartir datos entre componentes, tenemos que definir el

tipo de relación que existe entre los componentes. ¿Es una relación
de padre a hijo o una relación de hermanos?

El tipo de relación determinará la mejor manera de compartir

datos entre los componentes.
 44

Parent to Child

Comparta datos a través del decorador @Input: la forma más fácil

de pasar datos de padre a hijo es usar el enlace @Input que
permite compartir datos a través de la plantilla.

El componente secundario usa el decorador @Input para aceptar

datos que provienen de un padre.
 45

Child to Parent

Comparta datos a través de @Output Decorator y EventEmitter: El

decorador @Output se usa para emitir datos (eventos) de un
componente a un componente padre.

El padre está escuchando y pasa una devolución de llamada para

realizar la acción apropiada cuando se reciben los datos (evento).
 46

Parent to Child

Comparta datos a través de @ViewChild: ViewChild facilita el

acceso a los métodos de un componente secundario o las variables
de instancia de acceso que están disponibles en el componente
secundario.
 47

MODULES
 48

MODULES
Representan un concepto central y
juegan un papel fundamental en la
estructuración de las aplicaciones
Angular.
Un Módulo agrupa un conjunto de
artefactos, como son componentes,
directivas, pipes y servicios que
forman parte de ese mismo módulo.
Normalmente tendemos a
estructurar nuestra aplicación en
módulos de características
(contactos, órdenes,
administración) que contienen
componentes y servicios
compartidos que son utilizados por
otros módulos de características a lo
largo de la aplicación.
 49

Las aplicaciones de Angular son modulares y tiene su propio sistema de

modularidad llamado NgModules.

NgModules son contenedores para un flujo de trabajo o un conjunto de

capacidades estrechamente relacionadas.

Pueden contener componentes, proveedores de servicios y otros archivos de

código cuyo alcance está definido por el NgModule que lo contiene.

Pueden importar la funcionalidad que se exporta desde otros NgModules y

exportar la funcionalidad seleccionada para que otros NgModules la utilicen.

Cada aplicación Angular tiene al menos una clase NgModule, el módulo raíz, que
se denomina convencionalmente AppModule y reside en un archivo llamado
app.module.ts.

Si bien una aplicación pequeña puede tener solo un NgModule, la mayoría de las
aplicaciones tienen muchos más módulos de funciones.
 50

El decorador @NgModule () es una función que toma un solo objeto de

metadatos, cuyas propiedades describen el módulo.

Declarations: Los components, directives y pipes que pertenecen a este

NgModule.

Exports: El subconjunto de declarations que deberían ser visibles y utilizables

en las plantillas de componentes de otros NgModules.

Imports: Otros módulos cuyas clases exportadas son necesarias para las
plantillas de componentes declaradas en este NgModule.

Providers: Creadores de servicios que este NgModule contribuye a la

colección global de servicios; se vuelven accesibles en todas las partes de la
aplicación. (También puede especificar proveedores en el nivel de
componente o raiz).

Bootstrap: La vista principal de la aplicación, denominada componente raíz,

que aloja todas las demás vistas de la aplicación. Solo el NgModule raíz debe
establecer la propiedad bootstrap.
 51

ROUTES
 52

En una aplicación de una sola página, usted cambia lo que ve el

usuario al mostrar u ocultar partes de la pantalla que corresponden
a componentes particulares, en lugar de ir al servidor para obtener
una nueva página. A medida que los usuarios realizan tareas de
aplicación, necesitan moverse entre las diferentes vistas que ha
definido. Para implementar este tipo de navegación dentro de la
única página de su aplicación, utilice el enrutador angular.

Para manejar la navegación de una vista a la siguiente, utiliza el

enrutador angular. El enrutador permite la navegación
interpretando la URL de un navegador como una instrucción para
cambiar la vista.
 53

RUTAS PRINCIPALES
 54

RUTAS HIJAS
 55

LAZY LOADING MODULE

Usar la propiedad loadChildren en lugar de children. La propiedad loadChildren
toma una función que devuelve una promesa para que el código realice una carga
diferida mediante la importación dinámica.
 56

ROUTER LINK - ROUTER OUTLET

 57

CAN ACTIVATE
 58

Las aplicaciones a menudo restringen el acceso a un área en

función de quién es el usuario.

Puede permitir el acceso solo a usuarios autenticados o a usuarios

con un rol específico. Puede bloquear o limitar el acceso hasta que
se active la cuenta del usuario.

CanActivate Guard es la herramienta para administrar estas reglas

comerciales de navegación.
59
60
 61

SERVICES
 62

Básicamente un servicio es un proveedor de datos, que mantiene lógica de

acceso a ellos y operativa relacionada con el negocio y las cosas que se
hacen con los datos dentro de una aplicación.

Los servicios serán consumidos por los componentes, que delegarán en

ellos la responsabilidad de acceder a la información y la realización de
operaciones con los datos.

Un componente puede delegar ciertas tareas a los servicios, como obtener

datos del servidor, validar la entrada del usuario o iniciar sesión
directamente en la consola.

Al definir tales tareas de procesamiento en una clase de servicio inyectable

pones esas tareas a disposición de cualquier componente.

Angular lo ayuda a seguir estos principios al facilitar la factorización de la

lógica de su aplicación en los servicios y hacer que esos servicios estén
disponibles para los componentes a través de la inyección de dependencia.
63
 64

FIREBASE - HOSTING
 65

PREPARACIÓN DE ENTORNO
Para poder subir una página web al hosting de Firebase, primero
tenemos que instalar las herramientas de Firebase (firebase tools),
una utilidad que instalas para la terminal, a través de la cual
puedes ejecutar comandos para administrar tus proyectos de
Firebase, entre otras cosas, para subir una carpeta con un sitio web
al hosting.

> npm install -g firebase-tools

CREACION DE CUENTA FIREBASE

http://firebase.google.com/
 66

LOGIN EN FIREBASE TOOLS

Necesitas enlazar tu cuenta de Firebase con las firebase-tools que
previamente instalaste. Para eso debes ejecutar el siguiente
comando en la terminal:

> firebase login

PREPARAR ARCHIVOS DEL PROYECTO

Se debe realizar la compilación del proyecto

> ng build --prod

 67

SUBIR EL COMPILADO A FIREBASE

Para empezar la subida a firebase ejecuta > firebase init

Con las flechas bajar hasta la opción Hosting presionar la barra espaciadora y
darle enter
 68

Seleccionar la opción de usar un proyecto existente

Seleccionar el proyecto creado anteriormente

Colocar el directorio de la carpeta compilada

 69

Indicar con “N” que no queremos que reescriba nuestro index.html

Una vez realizado los pasos nos debe mostrar que se completó la
inicialización

Para una vez subir el deploy del proyecto al hosting, se debe ejecutar el
comando > firebase deploy , la respuesta debería ser como la siguiente
 70

FORMS & REACTIVE FORMS

 71

FORMS -HTML
 72

FORMS - COMPONENT
 73

REACTIVE FORMS

Reactive Forms es un módulo que nos provee Angular para definir

formularios de una forma inmutable y reactiva. Por medio de este módulo
podemos construir controles dentro de un formulario y asociarlos a las
etiquetas HTML del template sin necesidad de usar explícitamente un
ngModel.

A diferencia de Angular Forms, Reactive Forms hace uso de Observables y

Streams para mantener trackeada los datos del formulario, lo cual nos
permite interceptarla y transformarla por medio de operadores usando RxJs.
 74

FORMS -HTML
 75

FORMS - COMPONENT