ANGULAR

Sergio Arturo Torres Ramírez

¿QUÉ ES ANGULAR?
Framework del Google el cual
se actualiza cada 6 meses:
 Angular != AngularJS.
 Framework para crear SPA.
 OpenSource y amplia documentación.
 Separa completamente el front end y el backend
comunicación (httpClient).
 Utiliza el patrón MVC.
 Basado en TypeScript.
 Basado en componentes.
 INSTALACIÓN
 Para trabajar con angular debemos
realizar algunas instalaciones previas,
las cuales se listan a continuación:

 NodeJs: Entorno de ejecución para

JavaScript.
 Angular-CLI: Interfaz de línea de
comandos de angular.
 INSTALACIÓN NODE
 Para realizar la instalación de NodeJs se deben seguir los
siguientes pasos:
1. Ir al sitio oficial de NodeJs (https://nodejs.org/en/) y descargar el
instalador.
INSTALACIÓN NODEJS
 2.- Una vez que se realizo la descarga, ejecutar el instalador y seguir los pasos de instalación( aceptar los
términos, seleccionar el directorio de instalación, seleccionar las funcionalidades a instalar y completar la
instalación)
 INSTALACIÓN ANGULAR - CLI
 Para realizar la instalación de consola de angular se deben
seguir los siguientes pasos:
1. Ejecutar el comando npm install -g @angular/cli en la consola.
INSTALACIÓN ANGULAR - CLI
 2. Una vez finalizada la instalación, podemos verificar la versión de Angular CLI instalado ejecutando el
comando ng version
 CREAR UN PROYECTO EN ANGULAR
1. Para crear un proyecto en angular se debe ejecutar el siguiente
comando en la consola:
“ng new <Nombre_Del_Proyecto>”

2. Para ejecutar un proyecto en angular se debe ejecutar el siguiente

comando:
“ng serve”
 CONFIGURACIÓN DE BOOTSTRAP
1.- Para realizar la configuración de Bootstrap en el proyecto, debemos
ejecutar el siguiente comando ‘npm install Bootstrap@<versión>’
 CONFIGURACIÓN DE BOOTSTRAP
2.- Una vez instaladas todas las dependencias, debemos agregar las
referencias de los archivos al proyecto, esto se hace en el archivo
‘angular.json’ agregando dichas referencias en las secciones ‘styles’ y
‘scripts’
 ESTRUCTURA DE DIRECTORIOS
1. node_modules: contiene todas las dependencias del proyecto.
2. src: contiene todo el código de la aplicación, aquí se va a trabajar.
3. app: contiene toda la implementación de componentes principales
que conforman la aplicación, módulos, servicios, etc.
4. enviroments: Contiene todas las configuraciones y variables de
entorno para poner el proyecto tanto en un ambiente de QA como
en PR.
5. favicon.ico: Icono de la aplicación.
6. index.html: Archivo de la página principal del proyecto.
7. main.ts: Archivo typescript del proyecto donde se podrán
configurar todas las configuraciones globales del proyecto.
8. angular.json: contiene la configuración de angular. Incluye rutas,
versiones, etc.
 MÓDULOS
Es un contenedor que agrupa los elementos que se utilizan en una parte de la
aplicación, permiten a angular saber las importaciones y exportaciones necesarias
para que cierto componente funcione. En un modulo se definen:

 bootstrap: indica el componente que será la raíz de la aplicación. Esta

configuración solo esta presente en el módulo raíz.
 declarations: recursos que el módulo declara, indica los componentes que se van a
utilizar en el ámbito del módulo.
 exports: recursos que el módulo exporta para que puedan ser utilizados por otros
módulos.
 imports: recursos que el módulo importa de otros módulos.
 providers: Recursos que pueden ser inyectados en un componente. Suelen ser
servicios.
 entryComponents: Permite cargar componentes de forma dinámica.
 COMPONENTES
Es un elemento reutilizable que agrupa una parte de nuestra aplicación
la cual puede estar conformada por una o varias funcionalidades las
cuales resuelven una parte de la misma. Para generar un componente
debemos utilizar el comando:

‘ng g c <nombre del componente> -m <modulo del componente>’

 COMPONENTES
Un componente se divide en varios archivos:

1. <nombre>.component.css: Contiene los estilos del componente.

2. <nombre>.component.html: Contiene la estructura html del
componente.
3. <nombre>.component.ts: Contiene el código TypeScript con el que
se define la funcionalidad del componente.
4. <nombre>.component.spec.ts : Para realizar las pruebas del
componente.
 ACTIVIDAD
 Modificar la aplicación de forma que exista un módulo
“Shared.module” el cual va a agrupar los componentes que se
comparten entre los distintos módulos de la aplicación.
 Generar los siguientes componentes “home”, “nav” los cuales se
agrupan bajo el modulo principal “app”.
 Generar el componente “binders” el cual se va a agrupar bajo el
modulo “shared” y se va a compartir con otros módulos.
 Incorporar el modulo “shared” para se utilizado por el modulo “app”.
 Modificarel componente principal “app” para desplegar el
componente “nav” y permitir el ruteo.
 Modificar el archivo de rutas para definir una ruta para ir a “home” y
otra ruta para ir al componente de “binders”
 DATABINDING
1. Característica de angular, que permite la comunicación de datos
entre el archivo TypeScript y el archivo HTML.
 INTERPOLACIÓN
1. Los datos viajan entre el componente hacia el DOM, se utiliza la
sintaxis ‘{{ <variable/instrucción/función>}}’
 PROPERTY BINDING
1. Los datos viajan entre el componente hacia el DOM, se utiliza la
sintaxis [<Propiedad>]=“<variable>”
 EVENT BINDING
1. Los datos viajan entre el DOM al componente, se utiliza la sintaxis
‘(<evento del control>)=“<método a ejecutar>”‘
 TWO WAY DATABINDING
1. Los datos viajan en ambos sentidos, se utiliza la sintaxis
‘[(ngModel)]=“<variable ligada al control>” ‘

2. Para poder utilizar este tipo de binding, debemos importar el módulo

‘FormsModule’ en el app.module.ts.
 DIRECTIVAS
Una directiva es un elemento de angular que nos permite modificar el
comportamiento del DOM.

Directivas

Componente Atributo Estructurales

ngClass ngIf

ngStyle ngFor

ngSwitch
 NGFOR
Permite crear nuevos elementos en el DOM a partir de una lista de
elementos. Se utiliza la sintaxis ‘*ngFor=“let x of <array>”’ donde ‘x’
tomara el valor de cada elemento del array que se esta iterando.
 NGIF
Permite controlar si se crea nuevos elementos en el DOM con base a
una condición. Se utiliza la sintaxis ‘*ngIf=“<condicion>”’, si la
condición se cumple, entonces el contendió es procesado y renderizado.
 NGSTYLE
Permite controlar los estilos que se asignan a un control con base a una
condición. Se utiliza la sintaxis ‘[ngStyle]=“{’<estilo a aplicar>’:
<condicion> ? ‘<valor verdadero>’ : ‘<valor_falso>’ }”’, si la
condición se cumple, entonces se asigna el valor verdadero en caso
contrario se asigna el valor falso.
 NGCLASS
Permite controlar las clases que se asignan a un control con base a una
condición. Se utiliza la sintaxis ‘[ngClass]=“ <condicion> ?
‘clase_verdadero’ : ‘clase_falso’ ”, si la condición se cumple, entonces
se asigna la clase verdadero en caso contrario se asigna la clase falso.
 NGSWITCH
Permite controlar con base a el valor de un campo el contenido que se
va a procesar y a renderizar. Se utiliza la sintaxis ‘[ngSwitch]=“<campo
a evaluar>”’ y para las opciones según el valor del campo se utiliza la
sintaxis ‘*ngSwitchCase=“<valor esperado>”, si el valor del campo a
evaluar es igual a el valor esperado, entonces, se procesa y se realiza la
renderización la sección de la página.
COMUNICACIÓN ENTRE COMPONENTES
Angular nos permite enviar y recibir datos entre componentes y
subcomponentes mediante las directivas @Input y @Output
respectivamente.
1. Input: para utilizar el componente Input, lo primero que debemos
hacer es importarlo desde el modulo @angular/core.

En el componente que recibe el dato, debemos generar la variable de tipo @Input.

COMUNICACIÓN ENTRE COMPONENTES
En el componente que pasa la variable al sub componente se debe
indicar mediante una propiedad por property binding según el nombre
de la variable que va a recibir el sub componente.
COMUNICACIÓN ENTRE COMPONENTES
1. Output: para utilizar el componente output, lo primero que debemos
hacer es importarlo desde el modulo @angular/core.

En el componente que retorna el dato, debemos generar la variable de tipo @Output que es
una referencia al método del componente padre que se va a ejecutar para el retorno de
información.
COMUNICACIÓN ENTRE COMPONENTES
Se debe definir el evento que va a invocar la referencia del método del
componente padre que se declaro en el paso anterior.

En el componente padre, se define el método que al cual va a hacer

referencia el componente hijo para el retorno de datos.
COMUNICACIÓN ENTRE COMPONENTES
Agregar la referencia al evento utilizando la sintaxis para el event
binding ‘(<Nombre de la referencia al método en el componente
hijo>)=‘<metodoAejecutarDelComponentePadre($event)>’’.

Donde $event es la referencia a los datos que se pasan desde el

componente hijo.
 SERVICIOS

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

‘ng g s <nombre_del_servicio>’
 SERVICIOS

Para utilizar un servicio desde un componente, debemos inyectarlo

mediante el constructor del mismo

Una vez inyectado en el componente, podemos acceder a los datos y

funciones del mismo de forma directa
 PASO DE PARÁMETROS CON OBSERVABLE

Un observable permite el paso de información a todos los componentes

que se encuentren subscritos al mismo. Lo primero que debemos hacer
es importar el componente ‘Subject’ para utilizar observables a nuestro
servicio

El siguiente paso consiste en declarar la variable de tipo ‘Subject(tipo

observable)’
 PASO DE PARÁMETROS CON OBSERVABLE

Una ves declarado el tipo observable, debemos declarar el método que

notifica y envía los datos a los componentes subscritos

El siguiente paso consiste en definir un método que permita a los demás

componentes acceder al observable para poder subscribirse
 PASO DE PARÁMETROS CON OBSERVABLE

Como ultimo paso, debemos subscribir a los componentes para que

estén escuchando a nuestro observable ante cualquier cambio en la
información
 PROMESAS Y OBSERVABLES

Sirven para trabajar procesos asíncronos, los cuales nos sirven para
realizar cualquier trabajo que queramos ejecutar y esperar una respuesta
que no llega de forma instantánea. También se pueden utilizar para estar
pendientes de ciertos cambios en nuestro código y ser notificados al
ocurrir algún cambio.
 COMPARACIÓN

PROMESAS Observables
*Trabajan con un único flujo de datos * Trabaja con un flujo continuo de datos.
*Se usan con una única data asíncrona de • Al fallar se pueden ejecutar comandos
respuesta. y reintentar continuar con el observer.
*No es muy simple cancelar. • Se pueden encadenar operadores
adicionales como el map, forEach,
reduce, filter y más.
• Existen otros operadores como retry y
replace.
• Pueden ser creados desde otras fuentes
como eventos.
• Son funciones a las cuales podemos
subscribirnos en múltiples lugares.
PROMESAS
 SINTAXIS

<referencia a promesa> = new Promise (

(<ref resolve>,<ref reject> ) => {
//Código
resolve(<respuesta resuelta>);
reject(<error>);
}).then((<resultado>) => {
//Código resultado correcto
}).catch((<error>) => {
//Código error
}).finally(() =>{
//Código que se ejecuta siempre
});
OBSERVABLE
 SINTAXIS

<ref Observable> = new Obsrvable<<tipo>>(

<ref observer> =>{
//Código que se ejecuta
observer.next(<valor a emitir>);
observer.complete();
observer.error();
}
);
 SINTAXIS

<ref Observable>.pipe(
take(<numero repeticiones>),
map(valor => { return <valor> }),
filter( valor => (<filro>) == 0)
).subscribe(
valor => {<valor next>},
(err) => {<valor error>},
() => {<valor complete>}
);
 PIPE

Operador que permite que un observable pueda

manipular la forma en la que maneja la información
que fluye a través de el.
 OPERADORES RETRY, MAP, FILTER Y TAKE

• Retry: Le indica al observable que debe intentar ejecutarse si llega a

ocurrir un error.
• Take: Indica la cantidad de emisiones que se requieren del observable.
• Map: Permite transformar la información que recibe el observable y
mutarla de la forma en que sea necesario.
• Filter: Permite realizar el filtrado de los datos que recibe el
observable y decidir si se emiten o no.
 UNSUBSCRIBE

Permite cancelar la subscripción a un observable y que este

no continue ejecutándose.
 RUTEO

Como habíamos comentado, las aplicaciones angulares

solamente tienen una página (index.html) y toda acción se
desarrolla dentro de esa página. Por lo que toda páginas o
vistas del sitio web se mostraran sobre ese índex
intercambiando el componente que se esté visualizando en
cada momento. Comúnmente a esto se le conoce como SPA.
 RUTEO

Para facilitar la navegación en un sitio donde solamente existe

un índex, existe lo que llamamos el sistema de routing, cuyo
objetivo es permitir que en el sitio web existan rutas internas.
 RUTEO

El sistema routing es el encargado de reconocer cuál es la ruta que el

usuario quiere mostrar, presentando la pantalla en cada momento. El
sistema de routing de angular se encuentra conformado de los
elementos:

• El módulo del sistema de rutas: RouterModule.

• Rutas de la aplicación: Array con un listado de rutas que nuestra
aplicación soportara.
• Enlaces de navegación: enlaces html en los cuales se incluirá una
directiva para indicar que debe funcionar usando el sistema de routing.
• Contenedor: donde colocar las pantallas de cada ruta. Cada pantalla
será representada por un componente.
 INCORPORAR RUTAS AL PROYECTO

Para la incorporación de rutas a nuestro proyecto debemos

seguir los siguientes pasos:
1. Generar un modulo app-routing.module.js en nuestro
proyecto.
2. Realizar los imports RouterModule y Routes:
1. RouterModule: módulo donde se define el sistema de rutas de
angular.
2. Routes: Declaración de un tipo de datos, correspondiente a un
array de objetos Route.
 INCORPORAR RUTAS AL PROYECTO

3. Crear la lista de rutas disponibles en la aplicación: se

deben definir el array de rutas que queremos generar en
nuestra aplicación, utilizaremos la declaración de tipo Routes
que como hemos mencionado es un array de objetos Route.
Donde cada objeto del arreglo define el path y el componente
para representar la ruta.
 INCORPORAR RUTAS AL PROYECTO

Es importante mencionar que cuando se acceda a las

diferentes rutas definidas, el motor de angular se encargara de
mostrar o eliminar los componentes correspondientes.
4. Declarar el sistema de routing en el imports del
decorador @NgModule: con esto indicamos al sistema de
rutas de angular(RoutingModule) las rutas que se van a
manejar, dicha configuración se carga en el método forRoot().
 INCORPORAR RUTAS AL PROYECTO

5.- Importar el modulo de rutas a el módulo principal de la

aplicación.
 MANEJO DE RUTAS

Para el manejo de las rutas en angular podemos hacerlo de

dos formas distintas:

1. Vía HTML: Para indicar al motor de ruteo de angular que

se desea acceder a una ruta en especifico desde la vista se
utiliza la directiva routerLink en la cual se especifica la
ruta a la cual se desea acceder.
 MANEJO DE RUTAS

2. Vía TypeScript : Para indicar al motor de ruteo de angular

que se desea acceder a una ruta en especifico desde el archivo
de TypeScript de la aplicación debemos:

• Inyectar el servicio de Angular Router:

• Utilizar el método navigateByUrl del servicio para acceder a la url

a la cual se quiere acceder:
 PASO DE PARÁMETROS MEDIANTE RUTAS

Para realizar el paso de parámetros por la URL debemos

utilizar una notación especial al definir la ruta en nuestro
módulo de ruteo indicando los parámetros mediante el
carácter “:” y separando cada uno de ellos con “/”

Por ejemplo, en la imagen se define la ruta subdos en la cual

se pasan los parámetros marca y modelo respectivamente
subdos/fiat/ibiza
 PASO DE PARÁMETROS MEDIANTE RUTAS

Es importan mencionar que las rutas definidas no aceptan ni

más ni menos de parámetros indicados en su definición por
ejemplo en el caso anterior, las rutas siguientes no serían
validas:
• subdos/fiat
• subdos/
Si queremos atender estas rutas, deberíamos crear una nueva
declaración en nuestro array de Routes para que acepte los
segmentos requeridos.
 PASO DE PARÁMETROS MEDIANTE RUTAS

Para acceder a las rutas con parámetros podemos hacerlo de la

siguiente forma:
 RECIBIR PARÁMETROS

Para recibir los valores de los parámetros en el componente al

que nos dirige la ruta tenemos que usar el objeto del routing
llamado “ActivatedRoute”. Este objeto nos ofrece diversos
detalles sobre la ruta actual, entre ellos los parámetros que
contiene, para utilizarlo se debe realizar la importación desde
el componente donde se van a recibir los parámetros:
 RECIBIR PARÁMETROS

El siguiente paso consiste en inyectar el objeto a con la

definición de la ruta activa a nuestro componente:

Una vez inyectado el objeto podremos utilizarlo para obtener

los parámetros de la ruta.
 LEER LOS VALORES MEDIANTE EL
SNAPSHOT

La manera mas sencilla de comenzar es usar el snapshot de

los valores de los parámetros, el problema a esta alternativa es
que no siempre funcionará. Una vez inyectada la ruta activa
podemos acceder a los parámetros en el método ngOnInit().

El snapshot nos da los parámetros del componente en el

instante que sean consultados.
 LEER LOS VALORES MEDIANTE EL
OBSERVABLE

Como sabemos, los observables nos permiten subscribirnos a eventos

que se recibirán de manera asincrónica, mediante programación
reactiva y manteniendo un alto rendimiento.
Básicamente, en el objeto de tipo ActivatedRoute tenemos una
propiedad llamada “params” que es un observable y que nos sirve
para subscribirnos a cambios en los parámetros enviados al
componente.
 RUTAS HIJAS

Muchas ocasiones es necesario el manejo de subrutas en las

aplicaciones ya sea para tener mayor orden en nuestra aplicación o
dividir funcionalidades en los distintos módulos, para solventar esta
necesidad se manejan las rutas hijas o child rutes.

• MiAutoSeguro/Cotizar
• MiAutoSeguro/Emitir
• MiAutoSeguro/Renovar

Podrían ser ejemplos de este tipo de rutas.

 INCORPORACIÓN DE RUTAS HIJAS

1. El primer paso para realizar la incorporación de rutas hijas en

nuestro proyecto consiste en definir un nuevo módulo de ruteo en
el cual vamos a definir nuestras rutas hijas “sub-
routing.module.ts”.
2. Realizar los imports RouterModule y Routes:
1. RouterModule: módulo donde se define el sistema de rutas de angular.
2. Routes: Declaración de un tipo de datos, correspondiente a un array de
objetos Route.
 INCORPORACIÓN DE RUTAS HIJAS

3. Crear la lista de rutas disponibles en la aplicación: se

deben definir el array de rutas indicando la ruta raíz en path y
posteriormente las rutas hijas en las cuales se subdivide
mediante el parámetro children:
 INCORPORACIÓN DE RUTAS HIJAS

4. Declarar el sistema de routing en el imports del

decorador @NgModule: con esto indicamos al sistema de
rutas de angular(RoutingModule) las rutas que se van a
manejar, dicha configuración se carga en el método
forChild().
 INCORPORACIÓN DE RUTAS HIJAS

5.- Importar el modulo de rutas a el módulo principal de la

aplicación.
 GUARDIANES

Un guardián en angular nos ayuda a asegurar rutas o realizar

diversas acciones antes de navegar en una ruta o salir de ella.
Entre las acciones que nos permiten realizar se pueden
mencionar las siguientes:

• CanActivate
• CanDesactivate
• Resolve
• CanLoad
• CanActivateChild
 GUARDIANES

Comúnmente los guardianes son

utilizados para controlar si el usuario
puede navegar hacia o desde la ruta
actual. Permitir que un usuario
navegue por todas partes de una
aplicación no es una buena idea, es
necesario restringir al usuario hasta
que realice algunas acciones
especificas por ejemplo iniciar sesión,
obtener permisos, etc.
 GUARDIANES

Uno de los escenarios mas comunes en los utilizamos los

guardianes es en la autenticación. Queremos que nuestra
aplicación impida que el usuario no autorizado acceda a la
ruta protegida, esto se logra mediante el uso de CanActivate
el cual se invoca cuando el usuario intenta navegar a la ruta
protegida. El guardián debe verificar si el usuario se
encuentra autorizado para acceder a dicha ruta y ,si no es así,
redirigir al usuario a la página de inicio de sesión.
 ALGUNOS OTROS USOS

• Para confirmar la operación de navegación.

• Preguntar si desea guardar antes de alejarse de una vista.
• Permitir el acceso a ciertas partes de la aplicación a usuarios
específicos.
• Validación de los parámetros de ruta antes de navegar a la
ruta.
• Obtener algunos datos antes de mostrar el componente.
 CANACTIVATE

Esta operación permite decidir si se puede activar una ruta (o

si se usa un componente). Esta protección es útil en las
circunstancias en las que el usuario no está autorizado para
navegar hasta el componente de destino. O es posible que el
usuario no haya iniciado sesión en el sistema. Este guardian
se ejecuta antes de que naveguemos a una ruta, lo que nos
permite cancelar la navegación.
 IMPLEMENTACIÓN CANACTIVATE

1. El primer caso consiste en crear un servicio de angular e

importar e implementar la interfaz CanActivate. Esta
interfaz se encuentra en el módulo “@angular/router”
 IMPLEMENTACIÓN CANACTIVATE

2. El método obtiene la instancia de

ActivatedRouteSnapshot y RouterStateSnapshot los cuales
podemos acceder para consultar la ruta o sus parámetros. El
guardian debe devolver verdadero/falso o un UrlTree. El valor
de retorno puede ser en forma de observable, promesa o valor
booleano simple.
 IMPLEMENTACIÓN CANACTIVATE

Es importante mencionar que una ruta puede tener más de un

canActivate:
• Si todos los guardianes regresan true, la navegación
continua.
• Si alguno de los guardianes regresa false, se cancela la
navegación.
• Si alguno de los guardianes regresa urlTree, se cancelará la
navegación actual y se iniciará una nueva navegación a la
urlTree.
 IMPLEMENTACIÓN CANACTIVATE

3. Asignar el guardián a la ruta que se quiere proteger:

para hacer esto se debe asignar la propiedad canActivate de la
definición de la ruta.
 IMPLEMENTACIÓN RESOLVER
Este guardián retrasa la activación de la ruta hasta que se completan algunas tareas. Puede utilizar la
protección para obtener previamente los datos de la API backend, antes de activar la ruta puede ser
utilizado para sustituir la función OnInit y evitar el despliegue de controles vacíos al acceder al
componente.
 IMPLEMENTACIÓN RESOLVER

1. El primer caso consiste en crear un servicio de angular e

importar e implementar la interfaz Resolver. Esta interfaz
se encuentra en el módulo “@angular/router”
 IMPLEMENTACIÓN RESOLVER

2. El guardián debe devolver un Observable<any>,

Promise<any> o solo datos. Dentro del guardián tenemos
acceso a ActivatedRouteSnapshot y RouterStateSnaptshot
que puede utilizarse para obtener los parámetros de ruta o de
consulta.
 IMPLEMENTACIÓN RESOLVER

3. Asignar el guardián a la ruta que se quiere proteger:

para hacer esto se debe asignar la propiedad resolve de la
definición de la ruta indicando el valor clave y el resolutor. La
clave es una variable definida por el usuario y el valor es el
servicio de resolución(resolver).
 IMPLEMENTACIÓN RESOLVER

El valor de retorno del resolver se asigna a la clave definida y

se pone a disposición del componente al cual se esta
accediendo mediante los parámetros de ruta. Si el valor de
retorno del resolutor es un Observable o una promesa, el
enrutador esperará a que se complete, una vez resuelto los
datos solo pueden ser leídos en el componente mediante
ActivateRoute.
 IMPLEMENTACIÓN CANLOAD
Este guardián previene la carga del módulo mediante lazyLoad. Generalmente se utiliza cuando no
queremos que un usuario no autorizado pueda ver el código fuente del módulo. Este guardián
funciona de manera similar al CanActivate con una diferencia, el CanActivate impide que se acceda
a una ruta en particular, el CanLoad evita que se descargue todo el módulo, por lo tanto, protege
todas las rutas dentro de ese módulo.
 IMPLEMENTACIÓN CANLOAD
Para incorporar el lazyLoad en la carga de los módulos de la aplicación es necesacio utilizar la
propiedad loadChildren al realizar la definición de la ruta.
 IMPLEMENTACIÓN CANLOAD

1. El primer caso consiste en crear un servicio de angular e

importar e implementar la interfaz CanLoad. Esta interfaz
se encuentra en el módulo “@angular/router”
 IMPLEMENTACIÓN CANLOAD

2. El guardian debe devolver verdadero/falso o un UrlTree. El

valor de retorno puede ser en forma de observable, promesa o
valor booleano simple.
 IMPLEMENTACIÓN CANLOAD

3. Asignar el guardián a la ruta que se quiere proteger:

para hacer esto se debe asignar la propiedad canLoad de la
definición de la ruta.
 IMPLEMENTACIÓN CANDEACTIVATE
Este guardián decide si el usuario puede abandonar el componente (navegar fuera de la ruta actual).
Esta ruta es útil cuando el usuario puede tener algunos cambios pendientes que no se guardaron.
Esto permite pedir la confirmación del usuario antes de abandonar el componente.
 IMPLEMENTACIÓN CANDEACTIVATE

1. El primer caso consiste en crear un servicio de angular e

importar e implementar la interfaz CanDeactivate. Esta
interfaz se encuentra en el módulo “@angular/router”
 IMPLEMENTACIÓN CANDEACTIVATE

2. El método obtiene la instancia del componente que se

desactiva como primer argumento, adicionalmente obtiene las
instancias del ActivatedRouteSnapshot, el estado actual de
RouteStateSnapshot y el siguiente estado
RouterStateSnapshot podemos utilizarlos para acceder a los
parámetros de ruta o parámetros de consulta.
 IMPLEMENTACIÓN CANDEACTIVATE

3. Asignar el guardián a la ruta que se quiere proteger:

para hacer esto se debe asignar la propiedad canDeactivate de
la definición de la ruta.
 IMPLEMENTACIÓN CANACTIVATECHILD
Este guardián se ejecuta antes de que naveguemos a una ruta secundaria, angular invoca esta
protección cada vez que el usuario intenta navegar a cualquiera de sus rutas secundarias. Este tipo
de guardián es útil cuando queremos que los usuarios puedan ver un componente padre
(canActivate) pero solo ciertos usuarios puedan ver cualquiera de sus rutas secundarias
(canActivateChild).
 IMPLEMENTACIÓN CANACTIVATECHILD

1. El primer caso consiste en crear un servicio de angular e

importar e implementar la interfaz CanActivateChild. Esta
interfaz se encuentra en el módulo “@angular/router”
 IMPLEMENTACIÓN CANACTIVATECHILD

2. El guardián debe devolver verdadero/falso o un UrlTree. El

valor de retorno puede ser en forma de observable, promesa o
valor booleano simple.
 IMPLEMENTACIÓN CANACTIVATECHILD

3. Asignar el guardián a la ruta que se quiere proteger:

para hacer esto se debe asignar la propiedad
canActivateChild de la definición de la ruta.
 ORDEN DE EJECUCIÓN

Una ruta puede tener varios guardias los cuales siguen el

siguiente orden de ejecución:

1. CanDeactivate y CanActivateChild.
2. CanActivate.
3. CanLoad.
4. Resolve

El ruteo de angular cancela la navegación si alguno de los

guardias devuelve falso.
 ASYNC Y AWAIT

Como nosotros sabemos la gran parte del tiempo el código

que se ejecuta en Java Script lo hace forma asíncrona
mediante procesos que se ejecutan en segundo plano. Es
debido a esto que surgen las funciones Async/await, las cuales
nos ayudan a escribir código completamente síncrono
realizando tareas asíncronas en segundo plano.
 ASYNC Y AWAIT

Anteriormente los problemas que se presentaban al manejar

código asíncrono eran resueltos mediante callbacks (llamadas
de retorno) y promises.
Uno de los problemas principales
con este tipo de llamadas es la
anidación en varios niveles lo que
puede llegar a dificultar la
comprensión y mantenimiento
del código.
 FUNCIONES ASYNC

Las funciones Async nos proporcionan una sintaxis limpia y

concisa que nos permite escribir menos código para conseguir
los mismos resultados. Una función asincrónica se define
anteponiendo la palabra async antes de la declaración de
función:
 FUNCIONES ASYNC

Las funciones asincrónicas permiten pausar el flujo del

programa mediante el uso de la palabra await la cual
devuelve el valor recuperado de la función asíncrona definida
dando una apariencia de ejecución de síncrono el cuál es mas
simple de comprender.
 EXAMEN FINAL

Crear una aplicación en angular que en donde se manejen 2

rutas distintas, un guardián que valide ambas rutas y solo
permita el acceso a una de ellas, la validación deberá
realizarse utilizando una función asyncronica que recibe como
parámetro la ruta y retorna true o false según sea el caso.
REFERENCIAS
 https://www.udemy.com/course/angular-10-fundamentos-8-app/learn/lecture/23767006#o
verview
 https://desarrolloweb.com/articulos/servicios-angular.html
 https://www.youtube.com/watch?v=J2tN5zG0k18
 https://www.youtube.com/watch?v=8yeDLfKUHCs