Hola qué tal amigos el día de hoy venimos con un vídeo corto y preciso como instalar angular en windows 10 lo primero que debemos entender es que angular funciona bajo la infraestructura de nou así que también tenemos que tener instalado no para poder hacer uso de angular vamos a ejecutar estos dos pasos en este vídeo vamos con el intro y continuamos [Música] ok que debemos hacer lo primero que debemos hacer ahora es dirigirnos a nuestro navegador y en google escribir angular clic te va a llevar a la página oficial de angular y por otro lado necesitamos también dirigirnos a la página de no podemos es que bien en google nos descargas y nos lleva al apartado en esta sección podemos ver lo que son todos los paquetes disponibles dependiendo de qué sistema operativo estés usando en mi caso como este vídeo es para instalar en windows vamos a hacer el uso del paquete de windows lo primero que debemos hacer es ubicar el paquete de windows en este caso me dice que es el nou versión 14 y luego seleccionar el sistema de arquitectura que nosotros usamos en este caso 64 bits luego de descargar que ya descargue el paquete pesa unos 30 megas lo vamos a instalar.
Visual Studio Code
Hola qué tal amigos y bienvenidos una vez más a el curso de angular en esta ocasión vamos a aprender a cómo configurar nuestro visual studio code con algunas extensiones que nos ayudará a hacer más rápidos y más eficientes [Música] una vez que tenemos instalado nuestro visual estudio cómo vamos escribir o bueno vamos a teclear control shift x y eso nos abre un apartado que nos muestra lo que son las extensiones que tenemos instaladas y las extensiones que nos recomiendan en este caso voy a enfocarme en las extensiones que hacen referencia a angular o que nos pueden ayudar a hacer más ágiles y eficientes en angular el primero o la primera de ellos es angular follows el lector que está lo que hace es que nos ayuda a que cuando tengamos un selector con un control marcando la tecla de control y haciendo clic en el selector nos lleva hacia su componente vamos a ver esto un poco más en acción así que nos vamos hacia hacia mí y hong kong ponen donde tengo varios componentes y si yo le marco control la tecla control y le doy clic me lleva automáticamente a mi componente volviendo con control shift x vemos que tengo una extensión que se llama auto import está para qué nos sirve esta nos sirve el momento en el que nosotros estamos por ejemplo estamos inyectando algún servicio que viene desde otro componente podemos ver como él ya nos está recomendando haciendo búsqueda de los archivos cual es la clase que nosotros queremos importar y cuando le damos clic automáticamente él nos importa el archivo en la parte superior esto también nos ayuda a agilizar el tiempo y a evitar errores al momento de nosotros importar el 3er la tercera extensión que yo recomiendo es la extensión de que nos marca en color todo lo que tiene que ver con los corchetes las llaves y los paréntesis donde vemos esto lo vemos aquí como podemos observar vamos a lección podemos observar que nos marca en amarillo donde el que cierra el que abre el que cierra de igual forma en morado y otro tipo de en este caso paréntesis y así sucesivamente para poder visualizar de forma más rápida cuál es la función o clase que nosotros estamos manejando así que estas zonas tres extensiones que yo recomiendo al momento de comenzar a trabajar con angular ya que nos facilitará el trabajo nos ayuda a ahorrar tiempo y hacer más eficiente también ten en cuenta que existen decenas o cientos de más extensiones pero tomar en cuenta qué cada extensión nos puede bajar el performance del visual studio khouja que cada una de ellas pues está haciendo uso del procesador de la memoria entre otras características.
Creación de Nuevo Proyecto
Hola qué tal a todos y bienvenidos a otro vídeo más donde continuaremos enseñando cómo crear una aplicación angular desde cero los primeros pasos en el vídeo anterior vimos cómo instalábamos angular y cómo instalamos angular y todas sus dependencias en lo que es windows 10 ahora en continuación a este vídeo vamos a aprender cómo crear una aplicación en angular así que vamos con el intro y volvemos [Música] ok estamos aquí y lo primero que debemos hacer es tener en cuenta que vamos nuevamente a la página de angular clic que fue la que utilizamos anteriormente para la instalación vamos a hacerles un y aquí nos dice básicamente que tenemos que hacer lo primero que hicimos fue instalar angulas de forma global ahora lo que vamos a hacer es crear una aplicación y eso se hace con el comando engine new de la aplicación que tú quieres en este caso nos dirigimos nuevamente al power chair y ya te ubicas en el directorio en el que tú trabajes en mi caso me voy a ir a nuestro y aquí voy a escribir o sales una al máximo vamos a escribir engine new y nuestra aplicación se va a llamar portafolio no portfolio portfolio guión damos enter y aquí nos empieza a preguntar ciertas cosas no como tú quieres tener un tipo estricto y demás en el en el world space o en el espacio de trabajo de angular y que si queremos compartir esta información con alguna le decimos que no dice tú quieres agregar el routing de angular le vamos a decir que si para el próximo vídeo mostrar de qué van las rutas de angular nos dice que si queremos trabajar con css esas o leerse cualquier pre compilador de estilos en este caso como la mayoría sabemos css lo vamos a hacer con css aunque recomiendo que si tienes experiencia en salas también uses el sas y y listo aquí comenzamos a lo que la instalación de los paquetes así que también te pido que por fans nos apoyes suscribiéndote al canal darle a la campanita para que estés pendiente de todos estos pequeños videotutoriales los cuales enseñamos a cómo crear fantásticas aplicaciones con angular volviendo en escena nos dice que el perfecto que ya está todo ok como vamos a hacer o como como revisamos esto bueno la mayoría de nosotros sabemos de visual studio code así que lo que vamos a hacer es abrir un un espacio de trabajo.
Creación de Componentes
Hola qué tal amigos nuevamente y seguimos con el curso de angular esta vez vamos a aprender cómo crear componentes vamos con el intro y volvemos [Música] ok que es un componente primero que todo un componente es un código que se puede reutilizar en una o más ocasiones de todo nuestro sistema este código html que a su vez está compuesto pero es un bloque realmente que está compuesto por tres archivos uno que es 1 punto de ese 1 que es punto html y 1 que es punto css también podemos conseguir uno que es punto spect punto t s que en este caso lo que nos quiere decir es que hace referencia a las pruebas aquí puedo mostrar lo que explicaba tenemos un vamos a generar un componente como lo generamos lo generamos con el comando en sí genera te componen y el nombre de nuestro componente entonces en este caso voy a crear un componente que se va a llamar salvar una vez que hace esto el general los archivos antes mencionados y puedes observar que se crea una carpeta con el nombre del componente interno internamente tiene los archivos que ya se mencionaron también puedes observar como en el adjunto módulo se ha importado de forma automática en la sección de declaraciones tu componente en este caso el sidebar componente para adelantar esto y que el vídeo no se haga tan largo yo ya he creado lo que es un componente llamado cart y otro llamado header ahora si volvemos a nuestro código inicial que hicimos en el primer vídeo en el app componen punto html si borramos todo y escribimos hola mundo podemos observar que en nuestro navegador tenemos un hola mundo que hice yo aquí me fui al index e importe una fuente de google fons para cambiar la fuente en ahora tengo el componente header que en este componente header lo que lo único que he hecho es crear un dip con una url y un logo de youtube para simular un poco lo que es la estructura.
¿Cómo pasar Datos entre Componentes?
Hola qué tal amigos nuevamente seguimos con el tutorial de angular y en esta ocasión vamos a aprender cómo pasar datos de un componente hacia otro componente vamos a hacer dos ejemplos de pasar datos de un componente padre de un componente hijo y vamos a hacer un ejemplo muy importante que es cómo pasar datos de un componente a cualquier otro componente sin necesidad de tener una jerarquía así que vamos con la intro y volvemos [Música] ok estamos aquí y nuevamente vamos a cambiar para la cámara hacia nuestro ejemplo este fue el último ejemplo que estábamos trabajando haciendo un poco de maquetación simulando de youtube y ahora lo que vamos a hacer es que vamos a colocar un botón en estos en estos componentes que ya lo vimos en el vídeo anterior y vamos a colocar el título el subtítulo así que comenzamos por sales un vamos a cerrar todo y nos vamos a ubicar en el at componen html donde anteriormente vimos vimos que colocamos un eje ford donde hacíamos referencia a un objeto que tenía los datos de la tarjeta entonces cómo pasamos los datos del componente padre at componen que estar en cars hacia dentro del componente acá entonces para no consumiendo mucho con la variable vamos a colocar lista lo vamos a colocar listing d videos y aquí vamos a colocar un detalle vídeo para tener unas variables un poco más clara y no confundirnos lo que vamos a hacer para esto angular tiene unos decoradores que se llaman input output en este caso vamos a hablar sobre el input nos vamos a dirigir al componente cart en app cards vamos a importar en angular core input y luego de donde se declara la clase vamos a decirle que incluye abra abre y cierra paréntesis el nombre de el input en sí vamos a llamarlo data entrante y en este caso le vamos a decir que es tipo en que puede ser un objeto un string un array cualquier tipo de data guardamos en este momento ahora nosotros copiamos este nombre nos vamos al app componente y en el la componen colocamos data entrante va a ser igual a detalle del vídeo sí de esta forma ya estamos pasando vamos aquí porque tenemos un error porque yo cambié el nombre de la variable en el at componen que se llama cars y en este caso le damos hacer que se llama lista de vídeos perfecto si damos f5 deberíamos tener todo exactamente igual y está muy bien ahora vamos a pintar los nombres si observamos nuestra lista de vídeo quedamos en que teníamos tres vídeos con un título un subtítulo y una imagen ahora si nos dirigimos al componente de caf en data entrante ya nos viene cada uno de estos objetos como podemos verificarlo por mirar entrando tarda dos puntos list data entrante si vamos a nuestra consola podemos observar vamos a cambiar nuestra cámara hacia arriba arriba abajo podemos observar que nos sale 3 con solo indicando el objeto si el vídeo 1 vídeo 2 vídeo 3 así que vamos nuevamente con la cámara hacia abajo y vamos a proceder a agarrar esta información nos vamos a nuestro html del componente card y en el título le vamos a decir que data entrante title y aquí le vamos a decir que data entrante chaytor vamos a copiar y pegar y en la imagen vamos a decirle que rata entrante es igual a ing si guardamos y actualizamos nuestro proyecto ya lo tenemos podemos ver como ya nos pinta vídeo 1 vídeo 2 el subtítulo etcétera y podemos observar que ya nos agarró unas imágenes para probar vamos a agarrar esta imagen de aquí le vamos a copiar la dirección nos dirigimos a nuestro box este no es nos dirigimos a nuestro app componen y la primera imagen la vamos a cambiar y vamos a colocar lo que acabamos porque no salen porque agarre la miniatura animada entonces de esta manera ya estamos pasando datos de un componente padre a un componente hijo ahora qué pasa si yo quiero colocar un botón de este componente de estos componentes cada uno individuales y pasarle esta información un botón que diga añadir a la lista de reproducción o añadir a favoritos y esa lista de favoritos quiero que se vea reflejada aquí en otro componente totalmente aparte que no tiene jerarquía están en la misma jerarquía para eso vamos a hacer uso de lo que serían servicios.
Pasar datos entre Componentes usando Servicios
Ok amigos volvemos y seguimos con el vídeo tutorial de angular y esta ocasión vamos a aprender cómo pasar datos desde un componente a otro sin importar su jerarquía así que vamos con el intro y volvemos [Música] ya estamos nuevamente y el último paso en el que quedamos fue pintando los títulos pasando datos de un componente padre al hijo ahora qué pasa ahora queremos colocar un pequeño botón que lo que quiero hacer es que cuando se le dé a este botón agregue a una lista que está en otro componente para ello nos vamos a dirigir a nuestro temple o html de nuestro kart componen colocamos un botón sencillo con una función clic que va a ser llamar o lo que hace es invocar a un método llamado agregar favorito pasándole la data entrante que bueno no es necesario incluso si hacemos esto nos dirigimos aquí y le decimos que va a ser igual a la data entrante estamos en cada componen así que si nos vamos a nuestra vista damos f5 y vamos a darle clic al botón del vídeo 3 podemos observar como en la consola nos pinta toda la información del vídeo 3 del vídeo 2 del vídeo 1 del vídeo 1 y así sucesivamente ahora vamos a crear un servicio como se crea un servicio si un servicio se crea con el comando engine genera 3 servais y el nombre de servicio en este caso le voy a colocar servicio de favoritos él nos crea un archivo que lo podemos ver aquí en el que es un archivo que lo único que tiene es un constructor entonces qué vamos a hacer este servicio lo vamos a usar de puente un el componente o las tarjetas lashkar que tienen los vídeos le van a decir a este servicio hazme una salida de data o hazme algo como hacemos esto pues lo que debemos hacer ahora es importar en nuestro card componen en nuestro constructor si no tenemos constructor lo creamos que le hicimos que prive y aquí colocamos un alias puedes escribir servicio favorito dos puntos y el nombre de nuestro servicio que se llama servicio favorito se llama a servicio de favoritos service le lo importamos y de esta manera card componen ya tiene acceso a los métodos públicos desde el servicio de favoritos ahora donde más necesitamos importar esto lo necesitamos importar en el componente que quiere recibir la información si nos vamos a nuestro apuntó componen podemos observar que el otro componente que está la parte de abajo que donde contiene la lista de los favoritos se llama up salvar así que vamos a este componente y en el constructor de igual manera que en la tarjeta vamos a inyectar el servicio de favoritos ok ya lo tenemos en los dos los tenemos donde vamos a enviar y dónde vamos a recibir ahora lo que vamos a hacer es que de donde nos vamos a dirigir a nuestro servicio y vamos a hacer uso de un decorador un decorador que se llama output de la misma forma como en el otro componente usamos el decorador decorador imputa aquí vamos a hacer uso de uno que se llama output lo importamos e importamos el evento de emisión y este evento es el disparador y lo vamos a llamar disparador.
¿Cómo usar HTTPCLIENT?
Hola qué tal amigos seguimos con el curso de angular y esta vez vamos a aprender a cómo comunicarnos con una api o una red así que vamos con el intro y volvemos [Música] ok estamos de vuelta y vamos a nuestro proyecto lo único que he hecho es colocar unas v reales de unas imágenes de capturadas de youtube para que tenga un poco más de contexto pero qué pasa imaginemos que nosotros queremos traer esta información de un servidor de un servicio de una app y para esto lo que necesitamos es crear un servicio así que de de igual forma como hace rato en el vídeo anterior vamos a hacer uso de kenji gonzález mazón en que genera tés herbales y colocamos redes red y él nos crea un archivo de servicio que se llama rest in este archivo nosotros vamos ahora a importar en la parte superior el http client de command http y vamos a importar en nuestro constructor él http quien es muy importante ahora en este momento si guardamos posiblemente nos dé error porque porque tenemos que irnos a nuestro al módulo nuestro módulo y en nuestra importación debemos importar el siguiente módulo que es el módulo que angular no vamos a copiar la documentación es el http client módulo así que le damos una vez más importar para que lo importe en la parte superior guardamos revisamos nuestro proyecto vamos a cerrar esto por acá cerramos esto y en este momento todo está ok exactamente igual muy bien qué vamos a hacer ahora vamos a nuestro red services y vamos a hacer uso de un llamado get es importante pues tener una api o algo en el que se consuma de donde vayamos a consumir los datos en este caso yo ya tengo una app y montada que lo único que tiene si vamos al local 23 min tengo un api montada en vos que lo que tiene es un objeto muy similar a una imagen un título un sub title y esta vez le coloque un autor así que yo me voy a conectar a esta app vamos nuevamente al código y en este caso lo que vamos a hacer es un método este método dentro de servicios nosotros lo vamos a llamar public y lo vamos a llamar ticket va a ser nuestro método 10 donde yo le voy a pasar como un argumento que la url a donde voy a llamar y que va a ser un stream y este me va a retornar lo que sería me va a retornar lo que sería la invocación del http haciendo get a la url es que en pocas palabras él me va a ser un get a mí [Música] a mi papi de vos por así decirlo va a ser un lápiz después ok como lo usamos ahora en donde queremos que nuestro caso va a ser en nuestro up componen vamos a ubicarnos aquí nosotros necesitamos llenar esta variable que se llama lista de vídeos con datos dinámicos que vienen desde nuestro servidor así que vamos a nuestro atc component y en nuestro constructor vamos a importar vamos a inyectar nuestro servicio que sería el red service y asegurarnos de que y asegurarnos de que se importa en la parte superior ahora está lista nosotros la vamos a borrar vamos a borrar todo vamos a crear una función aquí abajo y la vamos a llamar cargar data donde esté cargar data lo que va a hacer es el uso de reservas nuestra función míguez dónde vamos a pasar nuestra url y aquí nos vamos a suscribir a ese evento donde aquí le llamamos respuestas.
Routing
Ok amigos estamos aquí nuevamente en el curso de angular esta vez vamos a aprender a cómo crear rutas y a invocar un componente así que comenzamos [Música] perfecto estamos de vuelta y podemos observar el proyecto en donde quedamos ahora que queremos hacer queremos que cuando le demos click a uno de estas a una de estas tarjetas nos lleve a su pantalla de detalle en este caso lo que tenemos que hacer es crear un componente con el nombre que nosotros queramos en este caso yo ya creé un componente que se llama post beatle como lo cree con angie genera t company for retail de esta manera al dalt enter se te ejecuta un componente el componente está vacío perfecto ahora qué vamos a hacer vamos a dirigirnos vamos a hacer zoom y vamos a dirigirnos a un archivo que se llama a up whiting routing punto módulo ts este fue el archivo que automáticamente angular nos generó al momento de crear el proyecto si no sabes cómo crear un proyecto en angular da clic aquí arriba arriba y te llevará el vídeo de cómo crear un proyecto en ángulo así que nos ubicamos en el rose team módulo y nos ubicamos en la constante road hacemos un enter y vamos a comenzar a crear el objeto de nuestra ruta el objeto se compone por un atributo que se llama path este atributo va a ser la ruta que queremos crear en este caso yo creo que quiero que la ruta se llaman post y que sea localhost es las dos islas para ello colocamos ahí o colocamos variable o colocamos lo que tú quieras voy a dejar variables para romper los esquemas luego de esto hacemos enter y colocamos otro atributo que se llama componen este componente va a ser relación a la ruta con el componente que tú quieres en este caso el componente que acabamos de crear que se llama post detail componen de esta manera ya tenemos una ruta funcional pero qué pasa si vamos a nuestro proyecto y vamos a la ruta no pasa nada no pasa nada pero eso es una señal de que todo está bien porque porque ahora tenemos que irnos a nuestro componen punto html y el código que tenemos aquí lo vamos a cortar lo vamos a guardar lo vamos a cortar y vamos a incluir algo que se llama roadster outlet el roadster outlet va a ser como un componente que ya está establecido por angular donde se van a cargar la información de las rutas.
¿Cómo usar HTTP POST?
Hola qué tal amigos y continuamos con el curso de angular en esta ocasión vamos a aprender a cómo usar el servicio de http post para hacer envíos de información así que comenzamos [Música] estamos de vuelta y came en donde quedamos quedamos en el anterior vídeo que si no lo has visto ve a verlo para que aprendas a cómo crear rutas dinámicas quedamos en el apartado de cómo pasar información a una ruta y a su vez obtener esta información de la app y mediante la variable que se esté pasando en la ruta en este caso un y de cómo es el y de cuatro y de cuatro y de uno y de dos y así sucesivamente podemos observar cómo está haciendo las peticiones 4 1 2 perfecto esto ya lo aprendiste con los vídeos anteriores ahora lo que queremos hacer es escribir un comentario y que este comentario se envíe lo que he hecho en esta pantalla es simplemente para que el vídeo no sea tan largo para que te dé una imagen con un título un subtítulo o un text box elementos básicos html con css si no sabes de html css te dejaré aquí en las tarjetas unos vídeos recomendados de otros programadores que hablan precisamente sobre esto ahora que necesitamos hacer nos vamos a dirigir vamos a darle zoom [Música] nos vamos a dirigir a nuestro servicio el servicio que creamos que se llama red service aquí lo puedes observar re service donde en el vídeo de servicios de http get que también lo dejaré por aquí creamos el método get para hacer una petición jalar data de una api pero en esta ocasión vamos a crear un nuevo método que se va a llamar post que va a ser uso de él http post el cual nos sirve para enviar esta información de primer argumento vamos a pasar la url o el en point al cual nosotros vamos a enviar esta información y de segundo vamos a enviar el body o el cuerpo o un objeto que contenga la data luego de que declaramos este método en nuestro servicio res nos vamos a dirigir a nuestro componente del detalle que en este caso es el post-it el componente y vamos a hacer lo siguiente vamos a crear una función que se va a llamar enviar data que va a ser la que se ejecuta al momento de darle click a enviar y esta función va a llamar el método post que se encuentra en nuestro servicio de red service así que también como lo vimos en el vídeo anterior inyectamos en el constructor el servicio de red service y luego lo llamamos dentro de la función de enviar data donde el primer argumento como ya mencionamos vamos a pasar el endpoint vamos a enviar esta información y de segundo argumento vamos a pasar el body este body literalmente pudiéramos enviar algo así este es el comentario y de esta manera si yo voy ahora a la aplicación actualizo y le doy vale tenemos aquí ok vamos a ver estos detalle vamos a seguir en el componente con explicación y ahora volvemos a este apartado vamos a dejar el de este es el comentario ok ahora nos vamos hacia nuestro temple o el html donde tenemos la cajita donde escribimos el comentario en esta cajita vamos a empezar a hacer uso de formularios reactivos que en el siguiente vídeo explicaremos más a fondo de cómo funcionan los formularios.
¿Cómo usar Data Table?
Hola qué tal amigos bienvenidos una vez más a otro episodio de el curso de angular 11 en esta ocasión vamos a aprender a cómo implementar un data table en nuestros proyectos así que comenzamos [Música] ok estamos con nuestro proyecto que si quieres saber cómo llegamos hasta aquí te invito a que le describe uno de estos vídeos y aprende a crear vistas rutas componentes y demás perfecto qué vamos a hacer vamos a implementar un data table al estilo material en esta ocasión con data table como los siguientes que son muy útiles porque nos sirve para ordenar y para representar de forma gráfica datos cuando son múltiples datos no este esta librería de x data table al igual que la de material price bus track y demás se instalan por aparte en esta ocasión yo voy a usar esta porque esta es la que uso a diario y me ha funcionado perfectamente si tú tienes instalado todo el paquete de material pues usa la de material en este caso como estamos haciendo un curso desde cero y queremos tocar simplemente los componentes que realmente vamos a usar y no instalar demás pues vamos a hacer uso de esta que nos brinda esta librería bueno nos brinda manejo de miles de registros full screen all edición en línea vertical scrolling filtros buscadores y filtrar por buscador etcétera mil cosas más aquí pueden observar todos sus ejemplos dejar el link en la descripción por ahora nos vamos a enfocar en su instalación así que para esto nos pongo nada nos dirigimos a su kit hub y nos vamos al apartado de documentación en el apartado de documentación nos podemos posicionar donde comenzamos con la instalación que simplemente ejecutando este comando lo pegamos lo instalamos en nuestro proyecto guión shapes vamos a correr esto aquí para que no se tape vale efecto instalamos ya nuestro paquete luego de instalar nuestro paquete que vamos a hacer en mi caso yo quiero representar una pantalla que contenga una tabla para esto voy a hacer uso de dos cosas que hemos aprendido en esta serie de vídeos como crear componentes y cómo usar rutas así que yo ya creé un componente que se llama list biutz si quieres aprender a crear componentes dejar el vídeo por aquí así que vale una vez que tenemos nuestro componente luego nos vamos a nuestro archivo de routing módulo donde vamos a incorporar una nueva ruta que en mi caso se llama mis vídeos y vamos a hacer referencia al componente que hemos creado.
Formularios Reactivos Parte 1
Hola qué tal cómo andamos este vídeo ha sido muy corto para la gente del grupo de angula y me comentó acerca sobre manejar los estados de los formularios reactivo y como bueno cómo hacer otra forma de hacerlo un poco mejor tengo aquí básicamente el comentario la persona decía que está tratando de validar con un 1000 en ok validar el campo el input con 1000 én y bueno aquí se cree un hilo que todas las soluciones son válidas sólo vengo a aportar un poco de lo que sería como hacerlo con los formularios reactivos que a mi forma de parecer ahorita es una mejor forma de hacer esto entonces tengo un proyecto angular que acabé de crear totalmente desde cero en el cual tengo un formulario sin estilos y nada algo muy sencillo vamos a aplicarle aquí unas etiquetas para que se para que se logre ver aquí vamos a hacer que esto hacer un email y esto es el email vamos a contar esto y ya vamos a ver qué son las cosas que están por ahí que de repente no entendemos porque mi perfecto guardamos y actualizamos pero la palabra password perfectos tenemos email tenemos password que tenemos aquí tenemos un formulario típico sencillo de html el cual tiene la etiqueta form un elemento que va a hacer que el botón un elemento que es un input y otro elemento que es el otro inputs y donde básicamente aquí tenemos el input de email y que esto sirve tanto para email como para un text como para cualquier otro elemento que él se quiera y tenemos button que normalmente por defecto si no le colocamos el time él va a tomar por defecto tides admin que quiere decir que va a hacer énfasis en dentro de las etiquetas del formulario hacer el envío del sur que tenemos en el controlador en el componente bueno en el componente tenemos lo siguiente vamos a ocultar esto aquí y vamos a un poco de eso en el componente lo que tenemos es en el constructor el foro form wilder que esto hace referencia al módulo que vamos a conseguir en el módulo que debes tener reactiva forms módulo esto es básicamente lo que nos va a ayudar a gestionar los estados y todos los elementos y métodos que tienen que ver con los formularios y cómo fue cómo funcionan estos formularios lo primero que debemos hacer es declarar una variable que en este caso la podemos llamar font del login para para hacer esto un poco más el caso típico de login declaramos la variable con login al cual luego en el ng en el eje con y ni vamos a decirle que a éste con un login que debe ser pública porque la vamos a llamar aquí en este foro login vamos a construir un grupo de inputs o de valores que vamos a manejar en este caso vamos a hacerlo con dos valores uno que es el email y uno que es el password y luego que hacemos esto vamos a ir a la vista al html y en el atributo form group vamos a hacer llamado al fondo login que tenemos aquí y luego también tenemos el atributo submit que es el que va a ser el envío que básicamente lo que me va a llamar el send.
Formularios Reactivos Parte 2
Hola como están a todos vamos a sacar un segundo vídeo ya que mirando los comentarios de el grupo y en el vídeo de youtube que vamos a darle like me han comentado que quieren saber más de los formularios reactivos y cómo ver los errores a detalles he hecho una búsqueda rápida en el grupo sobre todo lo que tiene que ver con los formularios reactivo y hay un par de cosas interesantes común la validación es bueno validaciones dinámicas y está allá afuera en dinámicas lo vamos a ver y también por aquí y bueno me comentaron acerca de que quieren ver el detalle del error si una contraseña o un campo requiere un mínimo cantidad de caracteres decirle al usuario oye debes enviar mínimo de 3 a 6 caracteres o no cumples con los caracteres válidos entonces vamos a esto para esto yo uso un paquete que se llama error taylor de nate el vacío lo instalamos sí yo recomiendo instalarlo la versión 1.3 punto 1 y sé que en el paquete de él él recomienda hacerlo con engine hd pero en ocasiones da error a mí me ha pasado a otros compañeros le han pasado entonces lo que yo hago es instalarlo en fm el nombre del paquete 1.3 punto 1 y ya funciona correctamente que es lo segundo que vamos a hacer seguir ya el tutorial básicamente importar en nuestro módulo el error taylor módulo en que lo podemos ver que yo aquí ya lo tengo importado le decimos error taylor modo donde este campo que está aquí sería por defecto en inglés que dice el campo es requerido es un mensaje que va a salir en todos estos input donde el formulario esté donde el formulario celeste usando este paquete no porque ahorita vamos a ver que en la etiqueta de formulario nosotros decimos quiero que los errores de los campos lo maneje con este paquete y aquellos campos que nosotros no vamos a definir un error detallado el por defecto para pintar este error si no se cumple si la validación no se pasa correctamente así que con amor [Música] vamos a finalizar esto aquí esto ya instaló ok vamos a el server para asegurarnos de que todo está correcto está generando el bild que hacemos aquí nuevamente perfecto sin errores todo bien todo correcto lo que hacemos es incluir este este atributo en nuestros formularios en el error taylor y ya con el simple m con el simple hecho de colocar error taylor podemos ver que en nuestro campo input de email que le tenemos una validación que sea requerida y sea email si yo me voy y hago clic y no hago nada ya me pinta un mensaje que dice este campo es requerido este mensaje de dónde viene viene desde el módulo que podemos colocar campos requeridos y ahí vemos campo requerido.
Proteger Rutas (Guard)
Hola qué tal amigos y bienvenidos una vez más al curso de angular en esta ocasión vamos a aprender a cómo crear una pantalla de login y proteger rutas que sean libres y rutas que necesitamos la autentificación del usuario así que comenzamos ah [Música] perfecto como saben esto es una toma directa así que pueden surgir ciertos errores pero son errores buenos ya que nos ayuda a arreglarlos arreglándose al momento entonces donde quedamos en el anterior vídeo creamos una ruta que se llama lista de vídeos y implementamos los data tables los data tables nos ayuda a organizar de forma alfabética o de forma de mayor a menor dependiendo de los datos que se están expresando si quieres aprender cómo implementamos el data table te voy a dar un vídeo por aquí en una tarjetita perfecto ahora que se ha realizado bueno he creado aquí un ningún link que me lleva a una página o una ruta que se llama login y en la cual he creado un pequeño formulario que pide dos valores el email y el password este formulario se utilizó lo que son los formularios reactivos de angular que nos ayuda a validar a validarse un campo es email y si un campo está vacío si un campo es número etcétera si quieres aprender a cómo realizar estos formularios te dejo dos vídeos uno explicando la forma básica y otro hablando más a detalle de qué tanto se puede hacer con estos formularios recomendados vayan a verlo luego de terminar este vídeo así que tenemos aquí la idea de hoy en unos 10 minutos que queríamos hacer este vídeo es que esta vista que actualmente 50 se encuentra libre o sea que cualquier persona sin necesidad de estar logueado puede visitar esta pantalla yo la quiero proteger y sólo se la muestre si el usuario tiene una sesión iniciada para esto tener en cuenta de que nos vamos a conectar a un back-end a una api y es una app que posteriormente es ustedes ya deben de tener si es un servicio de app y reyes etcétera cómo se hace esto para esto angular tiene unas características que se llaman los guard los protectores los vigilantes estas estos guard se encargan de proteger las rutas dependiendo de del uso que nosotros le vamos a dar si existen cuatro tipos de métodos con el que podemos proteger estas rutas uno de ellos es el can active y que básicamente para un proyecto simple como el que estamos haciendo es el más sencillo el más usado como como funciona en si esto el car active y por cada ruta que nosotros tenemos si tenemos una que se llame blog si tenemos una que se llame home dashboard etcétera nosotros vamos a ir al archivo de las rutas y vamos a hacer uso de implementando el can active y el car activa y child que es el segundo es cuando tenemos una nuestra aplicación es un poco más grande y la cual tenemos una familia de rutas que van por módulos.
Generar Filtros
Hola qué tal amigos y bienvenidos una vez más al curso de angular en este episodio vamos a hablar sobre cómo funcionan las pipetas y cómo generar las además pues obviamente para qué sirven las pipetas así que a darle [Música] bien quedamos en nuestro proyecto hablando sobre el login y la protección de vistas cuando un usuario está autentificado no hablando de los vigilantes de los protectores de rutas si quieres aprender a esto que por aquí por aquí en las tarjetitas perfecto que son las pipetas bueno vamos a buscar en un concepto de google qué son las pipetas o las facebook perfecto vamos aquí para ver qué nos dicen los conceptos dice las recetas son una herramienta de angular que nos permite transformar visualmente la información por ejemplo cambiar un texto de mayúsculas o minúsculas o darle formato de fecha y hora si se puede usar para eso claro está y como nosotros conseguimos o que es una tripleta a nivel de código es cuando conseguimos un pedacito de código y conseguimos el famoso símbolo de país luego lo que viene es el nombre de la pipeta así que en este caso el ejemplo nos dice que cuando una variable se llama hold on y está en minúscula y le colocamos el país de cooper case nos la transforma en mayúscula eso está muy bien es un ejemplo súper básico nosotros vamos a ir un poco más allá y para aquí no empezará a inventar tanto vamos a buscar algo que se usa mucho así que vamos a implementar una una pipeta que se encarga de mostrarnos las famosas miles millones o billones de seguidores de views etcétera aquí está el link que los dar en la descripción habla un poco sobre más a fondo y más técnicamente pero con nuestros son vídeos cortos que quieren ir al detalle para aprender rápidamente nuestra funcionalidad código nos vamos a enfocar en el código.
¿Cómo genera Directivas?
Subir Imágenes
Hola qué tal amigos y bienvenidos una vez más al curso de angular en este episodio vamos a aprender a cómo hacer uso de las directivas así que comenzamos [Música] bien estamos en nuestro proyecto donde anteriormente quedamos en cómo proteger las rutas cuando un usuario está autentificado no si quieres aprender sobre esto te dejo un enlace por aquí en las tarjetas y vamos a aprender qué son qué son las directivas hay un blog muy interesante que lo tenemos aquí que nos habla de qué son las directivas en angular bueno las directivas en angular básicamente extienden las funcionalidades de nuestro html hace que nuestro html o elemento en particular sea componente o sea una etiqueta html nativa tenga un comportamiento más adaptado a nuestras necesidades para poder brindar una mejor experiencia de usuario una mejor experiencia de usuario al usuario o también que nos nos provea de nuevas funcionalidades a mostrarnos nuevas funciones que nosotros queramos mostrar en nuestra aplicación así que existen varios tipos de directivas dejaré el link para que entren más en fondo pero en este caso vamos a hablar de las más usadas o digamos las más básicas que son las directivas de tipo atributo que nos van a servir para ciertos casos muy muy muy usados como por ejemplo en el caso ahorita de que se me está reventando una imagen qué pasa cuando una imagen se revienta y no quiero que aparezca este símbolo así feo de que el navegador me dice que la imagen no funciona entonces para esto vamos a crear una directiva cómo se genera una directiva una directiva se genera con los comandos aquí a bajadas vamos a limpiar una directiva se genera con el comando en general y aquí va a ir el nombre de la directiva en este caso vamos a llamarlo imagen rota y le damos inter así que te voy a pedir por favor que te suscribas y le des a la campanita una vez que se nos crea la imagen la directiva vamos a quitarle un poco de eso para trabajar bien una vez que se quitan una vez que se crea la directiva la buscamos la buscamos aquí la tenemos imagen rota es importante de que cuando se genera una directiva el ángulo automáticamente nos la importa en la sección de declaraciones así que si tenemos más de un módulo hay que estar pendiente con eso en este caso sólo manejamos un módulo y no tenemos problemas nuestra directiva que se llama vamos a cerrar esto se llama imagen rota el atributo con la etiqueta que nosotros no usa es a imagen rota y que va a ser esta que va a hacer esto pues mira vamos a empezar y vamos a copiar el a imagen rota y nos vamos a ir al elemento este elemento que contiene la imagen que eso está en el carro y lo vamos a colocar así no dentro en la etiqueta de img que es la de la imagen voy a colocar mi directiva qué pasa aquí pues no pasa nada porque simplemente la he colocado así que si vamos pues vemos que todo sigue igual pero qué sucede cuándo nosotros colocamos la directiva en un elemento y ya podemos hacer uso de sus métodos nativos.
Compilar y Desplegar Servidor compartido
Hola qué tal amigos y bienvenidos una vez más al curso de angular y aproximó a concluirlo en este episodio vamos a hablar sobre cómo crear un componente que nos sirva para subir archivos o imágenes desde nuestra aplicación angular a nuestro servidor así que comenzamos [Música] ah y en lo primero que debemos hacer para este episodio es uno tener una api o un servidor a donde nosotros vamos a enviar estas imágenes en mi caso ya tengo uno montado que está corriendo por el puerto 3000 uno con un tiempo en que se llama un log esto para el ejemplo recuerda que cada uno tendrá su servicios o servidor su app y su servicio en la nube etcétera lo importante es tener el empeine al cual nosotros vamos a enviar esta información a los clientes que debemos tener es una ruta en mi caso yo tengo una ruta que se llama blog y es una ruta que está protegida para que sólo se pueda acceder si yo tengo una sesión iniciada si quieres aprender a cómo proteger tus rutas en angular de un vídeo hacia arriba perfecto que debemos hacer una vez que queda claro ya el apartado sobre la ruta vamos a hacer un repaso rápidamente y nos vamos a ubicar sobre el archivo de routing donde tengo una ruta que se llama tour lo que es la que acabo de mencionar es la ruta funciona con el componen un lugar es componer y el este un loud pace componente es donde nosotros vamos a trabajar tenemos este can active que es el que se encarga de proteger las rutas que anteriormente en mencionado perfecto vamos hacia él es el cloud page componer bien vamos hacia el html y vamos a quitar esto que tenemos aquí nos queda el heller el after es el que hace referencia al general de nuestra aplicación bien ahora aquí nos toca hacer pues ahora lo que vamos a hacer es simplemente vamos a definir componente the fire lo que vamos a hacer es que vamos a crear un beat y dentro de este día vamos a declarar un input este input baxter tipo de baile y si guardamos que vamos a observar que tenemos ya el típico input file para subir una imagen eso está perfecto vamos con el siguiente paso queremos capturar este esta imagen o este archivo para esto angular nos provee de un método que se llama change que detecta cuando el input tiene un cambio.
Compilar y Desplegar Servidor compartido
Hola amigos que tal un saludo nuevamente y bienvenidos al curso de angular capítulo de conclusión capítulo en el que aprenderemos a cómo compilar una aplicación de angular y subirla o desplegarlo en un servidor compartido en este caso va a ser un servidor plex o que también de igual manera se puede subir a un servidor si panel antes continúa quiero dar las gracias a todos los que se han suscrito al canal darle mucho like gracias por todo por todo y también para hacer la limitación aproximadamente dentro de unos 15 días o 22 días estaré empezando a subir una serie de vídeos de un curso de angular pero más enfocado a un stage de junio haciendo una aplicación que manejará elementos en tiempo real con sockets notificaciones push progress y web entre otras cosas bien así que iniciamos y nos vemos en un segundo [Música] bien bien bien ok estamos aquí nuevamente y qué vamos a hacer como mencioné vamos a compilar nuestra aplicación para subirla a un servidor compartido hay que tener en cuenta que este curso se ha enfocado en todo lo que es el front end o en la parte visual no hemos tocado back-end porque esto será en otro curso así que tener en cuenta que antes de subir tu aplicación a producción hay que tener ya un back-end o una app y en producción perfecto vamos a ver un resumen de la aplicación que nosotros hemos desarrollado es una aplicación cual es una aplicación que nos ha permitido obtener todos los conocimientos referente desde cómo está la gran angular cómo crear una aplicación en angular como crear componentes cómo comunicar estos datos entre componentes sin importar la jerarquía hablamos de rutas hablamos de proteger rutas para cuando un usuario tiene la sesión iniciada todas estas cosas y más hemos aprendido en este curso de angular desde cero si quieres ir y está llegando a este capítulo te dejo una descripción el link de toda la playlist de vídeos desde que comenzamos a hacer esta aplicación bueno el resultado es un resultado que visualmente es agradable y que ya como lo hemos visto en todos los vídeos tiene unas funciones interesantes.
¿Qué es una Aplicación Web progresiva PWA?
Hola que tal amigos bienvenidos una vez más mi nombre es la y fernández y en esta ocasión a dar inicio a una serie de videos en los cuales aprenderemos sobre qué es una aplicación web progresiva o una progresión web y cómo implementar estas características en nuestra aplicación de angular sea así que vamos a listo y comenzamos [Música] sí claro que sí gracias por suscribirte gracias por dar las gracias por comentar y qué es una aplicación web progresiva bien una aplicación web progresiva es un tipo de software que se entrega a través de la web utilizando las tecnologías comunes las tecnologías que ya conocemos como html javascript y css que está destinado a funcionar en cualquier plataforma que use un navegador web compatible en resumen una aplicación de angula perfectamente completa características una aplicación de abriaquí es perfectamente cumple estas características incluyendo funcionalidades que ojo permita crear experiencias de usuarios similares a aplicaciones nativas una vez más permita crear experiencias de usuario similares a aplicaciones nativas qué es esto como lo logramos boom esto lo logramos combinando series cosas varias cosas una serie de cosas número 1 interfaz de usuario y experiencia de usuario imagina que tú estás haciendo una aplicación web en la cual el 90% de los usuarios ingresan desde un móvil desde un celular que vas a hacer pues buscarte una buena interfaz de usuario una buena experiencia de usuario que esté enfocado en dispositivos de este tipo esto quiere decir que los eventos tous van a tener su en su buena brecha de espacio para que el usuario fácilmente pueda dar clic iconos amigables iconos que relacionen rápidamente la función que el usuario espera en pocas palabras un poco de diseño todo muy bien de la mano haciendo énfasis como si fuera una aplicación nativa pero nosotros vamos a entrar más en términos de servicios workers y qué es esto son características que nos brindan los navegadores web compatibles que básicamente hoy en día es casi el 90% de los navegadores excepto de ellos que por ahí está un poco primitivo en esta cuestión y estos seres el worker nos brindan las siguientes características número uno poder enviar notificaciones push a nuestros usuarios sin que tengan la aplicación abierta número dos tener un cachet de nuestra aplicación para evitar la sobrecarga o sobre petición de archivos número 3 manejo de actualizaciones los navegadores ya son capaces habilitando esta característica de saber si la versión que está viendo el usuario es distinta a la última que está en producción y de esta manera disparar un evento al usuario diciéndoles ojo tienes una nueva actualización quieres aceptarla cuarto acceder al hardware del dispositivo y esto es limitado claro está no vamos a poder acceder a los contactos y hay más cosas allá de nuestro dispositivo móvil pero sí vamos a poder acceder a su cámara siempre y cuando pidiéndole los permisos al usuario a su galería una vez más viendo los permisos al usuario el envío de notificaciones que termina siendo algo un poquito más del hardware una vez más también pidiéndole los permisos al usuario y ya se experimenta en algunos navegadores casi en todos los que son compatibles el poder disparar el evento de vibración en el celular puedes hacer que el teléfono vibre como si estuviera entrando una notificación una llamada además de esto también nos brinda la posibilidad de obtener un instalador o este agregar a home screen.
Instala web como app nativa
Y qué tal amigos bienvenidos a otro vídeo mi nombre es ley fer méndez y en esta ocasión vamos a continuar con el curso en el cual nosotros estamos aprendiendo las características de una progressive web app y llegó el momento de comenzar a echar código así que empecemos vamos al intro y comenzamos [Música] e muy bien gracias por suscribirte gracias por continuar en esta serie de vídeo vamos a quitarnos esto y comenzamos recuerda que todo esto vamos a estar haciendo enfocado en angular ya que el canal lleva a su trayectoria en angular y si bien es del primer vídeo te comenté que íbamos a aplicar todos estos conocimientos y características de una progresión web en el proyecto en el cual desarrollamos para crear nuestra por nuestro portafolio web si tú viste este vídeo te recomiendo que lo veas y además aprovecha y descarga el portafolio úsalo modificarlo a tu gusto está totalmente libre para la comunidad y vamos a agregarle las características de una progresía web a este portafolio y cuáles son estas características recuerda que una progresía web app es básicamente un software una aplicación web que utiliza las tecnologías comunes como html javascript y css que son servidas a funcionar en un servicio en un navegador web y que lo importante de esto es que debe incluir funcionalidades que permita crear experiencias de usuarios similares a la de una aplicación web en pocas palabras vamos a tratar de replicar toda la funcionalidad o lo más que se pueda de una aplicación nativa en un navegador en una aplicación web y ya hablamos cuáles son esas en ese conjunto de características que forman esto tanto la interfaz de usuario como la experiencia de usuario que es un tema aparte porque más de diseño vamos a omitir esta parte vamos a enfocarnos en los servicios worker y el primer service es work que nosotros vamos a hacer a implementar es el instalador este icono que nos permite agregar nuestra aplicación como si fuera una aplicación nativa en los celulares android o en él computadores de escritorios en windows lo vamos a ver también así que comenzamos para esto que vamos a hacer nos vamos a dirigir a la página de angular escribimos en google angular ángulo pp w angular p doble a y nos lleva a la primera resultado de búsqueda en el cual nos indica cómo agregar los servicios worker a tu proyecto 1 si estás iniciando un proyecto de angular o si ya tienes iniciado un proyecto de angular vas a correr el siguiente comando bien yo yo estaba corriendo en ese momento pero voy a hacer un distinguir que va a ser para borrar todo ahí lo tenemos vamos a cerrar todo esto y vamos a limpiar forzadamente para borrar los archivos que se han creado bien vamos pegar el comando que acabamos de ver y vamos a colocar el nombre de nuestro proyecto si tú no sabes cuál es el nombre de tu proyecto ve al archivo angular jason y te vas a ir al apartado que dice default project y vas a encontrar que tu nombre de proyecto en este caso es portafolio guión web.
PWA modo offline
Hola qué tal amigos bienvenidos a otro vídeo mi nombre schleifer méndez y en esta ocasión continuamos hablando sobre las progress y with heart y cómo hacer uso del modo offline así que continuamos [Música] gracias por suscribirte gracias por comentar y gracias por estar presente en este vídeo y vamos a hablar sobre el modo offline de una progresía web apliques esto pues es básicamente brindar la máxima funcionalidad en la lógica que se pueda a un usuario cuando no tiene conexión a internet como lo hacemos pues lo hacemos de la siguiente manera recuerda que este vídeo forma parte del primer vídeo en el cual hablamos que es una progresión web y cómo implementar una progresía web app en angular recuerda que en angular se nos crea el archivo de ese w jason que es el archivo de configuración de los service desk worker y quiero que tengas en cuenta el primer el primer título o primer nombre que tenemos aquí que es el apps scrum porque lo vamos a ver y que es el access group el art set cruz es básicamente va a estar conformado por el grupo de archivos que se consideran estáticos y que quiero decir con esto cuando nosotros compilamos una aplicación en angular ésta se resume en un archivo index en varios archivos javascript y en algunos archivos de estilo css básicamente es lo básico de todas las páginas html javascript y css estos archivos se le consideran estáticos ya que luego que se compilan estos archivos no van a cambiar lo subimos a un servidor los desplegamos y ya está no cambian entonces son archivos entran en el grupo de los after sur al igual que el icono de favorito y al igual que otro par de archivos y en el access group el caché o el service worker tiene dos estrategias para hacer uso del caché y está el prefecto está el racing el prefecto se asegura de solicitar todo y que sea esto esto lo resumía aquí en una dos tres cinco palabras aseguran asegurarnos de solicitar todo el siguiente vamos a ver una imagen tengo una imagen de ahora lo vamos a ver en este vídeo esta es un pedazo del engine s&w con fit donde tenemos el after group y tenemos un array que si lo puedes hacer observar dice de soft y files donde dentro de files tenemos el index el icono del favorito el archivo manifiesto un comodín haciendo referencia a todos los archivos css y otro comodín haciendo referencia a todos los archivos javascript y si vemos aquí arriba vemos que dice instalamos defecto qué quiere decir con esto que los archivos que se encuentran dentro de la raíz de files el services worker los va a descargar en su caché sí o sí así el usuario lo necesite o no los va a descargar esto tiene sus pros y éstos tienen sus contras lo que nos aseguramos de que el usuario siempre va a mantener en su caché pues con los archivos necesarios si llegara a utilizarlos todos el contras es que si abusamos y agregamos demasiados archivos o archivos muy pesados el gasto de banda ancha va a ser mayor y además que el caché vamos a estar haciendo uso de un caché y que ciertamente termina siendo limitado y esto puede repercutir en el performance de la aplicación por otro lado tenemos el modo lazy el modo ley si se usa sobre todo y lo vamos a ver en un momento en este vídeo.
Enviar notificaciones push en web PWA
Y qué tal amigos bienvenidos a otro vídeo tutorial mi nombre es ley fernández y en esta ocasión vamos a aprender a cómo enviar notificaciones push hacia nuestra progresía web comenzamos [Música] gracias por suscribirte gracias por dar light y si es primera vez que estás aquí mucho gusto mi nombre es ley fernández y como puedes observar tengo cursos de nuevo cursos de angular cursos de soccer cursos de mongodb cursos de notificaciones cursos cursos cursos y más cursos totalmente gratis ahora vamos a pasar directamente a lo que son las notificaciones push que son las notificaciones push déjame cambiar la cámara porque me veo mejor walt de este lado las notificaciones push es básicamente estas alertas que salen tanto en las aplicaciones nativas como en las progress y wake up o incluso en las web app los navegadores y que cuál es su funcionalidad su funcionalidad es básicamente avisar al usuario alertar al usuario de que algo está sucediendo para que él proceda a abrir la aplicación y crearon engagement hacer que el usuario entre vea y quiere el mayor tiempo posible dentro de tu aplicación pero cómo funciona esto vamos a verlo más a detalle las notificaciones push realmente es la unión de dos características que nos brindan los service worker o propiedades de los navegadores una de ellas es el push y otra es la notificación que es la notificación la notificación en sí es esta parte visual que nosotros observamos es lo que vemos en nuestro computadora en nuestro celular las notificaciones push no necesariamente tienen que ser disparadas desde un back end incluso tú puedes disparar notificaciones push de forma local puedes colocar un set time out o un una un script que cada minuto te dispare una notificación local ahora que es el push el push se trata de esta propiedad que el services worker nos brinda para poder enviar o asignar un aviso enviar un mensaje desde nuestro back-end hacia el navegador de nuestro cliente para que posteriormente éste levante una notificación por eso se llaman push notification o notificaciones push y nosotros la vamos a aplicar en un proyecto de angular.
