Тёмный

Angular Basics - Observables 

akotech
Подписаться 3,4 тыс.
Просмотров 12 тыс.
50% 1

Introducción a los conceptos básicos de los observables y su uso en angular. En la que hablamos de los distintos elementos que componen la librería de ReactiveX(RxJs), como son los observables, observadores, subscripciones o sujetos. Y vemos con ejemplos cómo usarlos en angular. Y también como combinarlos y transformarlos gracias con uso de operadores. Terminamos viendo como la combinación de observables y la pipe async, nos permite usar una estrategia de detección de cambios en los componentes más eficiente llamada OnPush.
Lista de contenido
00:00 Intro
00:19 ¿Qué son los Observables?
04:20 Operadores.
06:16 Sujetos y BehaviorSubject.
˅˅˅˅ Parte Práctica ˅˅˅˅
08:15 Pasos básicos para consumir un observable en un componente.
13:42 Usar la pipe Async.
15:24 Operador map().
17:08 Refactorización de ShoppingCartService y dependencias.
20:03 Refactorización de CatalogService.
20:33 Operador combineLatest().
23:47 Operadores switchMap() y tap().
26:18 Agrupar subscripciones en el template con ng-container.
27:51 Estrategias de detección de cambios Default y OnPush.
30:17 Outro
Enlaces de Interés
Código Fuente: github.com/ako-tech/angular-b...
ReactiveX para js: rxjs.dev/
Playlist de Angular Basics: • Angular Basics
Si deseas apoyar la creación de más contenido de este tipo, puedes hacerlo a través de:
· Paypal: www.paypal.com/donate/?hosted...
---
twitter: / _akotech
github: github.com/ako-tech

Наука

Опубликовано:

 

2 июл 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 85   
@cristiandavid7577
@cristiandavid7577 2 года назад
No es justo, que estas explicaciones no lleguen a más personas. Deberías tener más público, porque explicas increíblemente genial y todas las animaciones hacen que realmente se entienda el tema
@akotech
@akotech 2 года назад
Muchas gracias por tus palabras Cristian! 😁
@daguttt
@daguttt Год назад
Totalmente de acuerdo bro 🙏🏼🔥
@juandavidsaldarriagachavar9250
Lo acabo de ver y me hizo entender algo que venia hace meses tratando de entender, tenes toda la razon
@carlosescobar2900
@carlosescobar2900 Год назад
Este video es nivel DIOS, es lo mejor de lo mejor que he visto en didactica para fijar conocimientos. Definitivamente genial en calidad.
@akotech
@akotech Год назад
No creo que sea para tanto... 😅 pero muchísimas gracias por tus palabras Carlos! un saludo
@MartinGeremiFlores
@MartinGeremiFlores 2 года назад
Una de las mejores explicaciones de Observables que he visto.
@akotech
@akotech 2 года назад
Gracias!
@irancho2
@irancho2 Год назад
He visto muchos videos sobre angular y observables, pero eres por mucho el que mejor lo ha explicado, felicitaciones me ha ayudado muchisimos tus videos.
@akotech
@akotech Год назад
Un placer haberte ayudado Pedro. un saludo y gracias por tu comentario
@shinigamy14
@shinigamy14 Год назад
Tus explicaciones y la forma en que lo haces son geniales, muchas gracias por compartir la informacion.
@akotech
@akotech Год назад
Muchas gracias a ti por tus palabras! Un saludo
@Joseph_David_
@Joseph_David_ Год назад
Sólo me queda decir gracias Bro.
@DavidSanchez-dj9ku
@DavidSanchez-dj9ku Год назад
Me están ayudando mucho estos videos para entender de manera correcta todo el potencial de Angular, muchas gracias, sigue subiendo videos.
@akotech
@akotech Год назад
Gracias a ti por tus palabras. Y tranquilo que aquí seguiremos. un saludo 😉
@maurowasil3744
@maurowasil3744 2 года назад
Muy bueno! Gracias por compartir
@jjav1978
@jjav1978 Год назад
Me quito el sombrero. Mira que he visto videos, y no he aprendido tanto como en este!! Un abrazo Crack!!
@akotech
@akotech Год назад
Otro para ti y gracias por tus palabras 😊
@ahmansavthorbatistac.6216
@ahmansavthorbatistac.6216 Год назад
Que contenido de calidad, muchas gracias.
@akotech
@akotech Год назад
Gracias a ti por tus palabras! 😊 un saludo
@lucianomangiaterra880
@lucianomangiaterra880 2 года назад
Este es el mejor video de observables que vi en mi vida, me encanta como explicas de forma clara, concisa y simple los temas. Encontré tu canal hace unos días y ya me vi casi todos los videos, esperando con ansias los próximos! Excelente trabajo y muchísimas gracias por compartir!!
@daguttt
@daguttt Год назад
Así es. De los mejores canales de Angular
@solsito9999
@solsito9999 2 года назад
El mejor video de observables que he visto. Gracias!
@mayramagiaratefunes3304
@mayramagiaratefunes3304 Год назад
La verdad es que explicas de lujo! Ojala cuente con un curso pago, donde podamos retriubirle, la dedicacion, los ejemplos, mucho mejor que cursos que he pagado. Sinceramente gracias!
@akotech
@akotech Год назад
Joe... muchísimas gracias por tus palabras Mayra 😊 un saludo
@jandresi
@jandresi Год назад
Diossss qué video tan bueno, llevo tiempo trabajando con Angular y es la primera vez que entiendo realmente qué es lo que hago cada que uso un observable Te ganaste un like poderosísimo
@akotech
@akotech Год назад
Un placer haberte podido ayudar 😊 un saludo y gracias por tu comentario.
@messismo10
@messismo10 Год назад
Este es el mejor vídeo sobre Observables, ya se ingles o de habla hispana, que grande es usted. Por cierto, le agradecería que me dijera que usa para editar sus vídeos, en la parte teórica me gusto mucho como hace las transiciones.
@akotech
@akotech Год назад
Muchísimas gracias! 😊 Los clips de la parte teórica los hago en After Effects. un saludo
@messismo10
@messismo10 Год назад
@@akotech Pfff eso responde el porque de la altísima calidad de sus vídeos.
@agritecnology4105
@agritecnology4105 Год назад
Estuve como 4 días intentando entender al respecto, pero este video es lo mejor que he visto, agradecido, eres muy bueno explicando
@akotech
@akotech Год назад
Muchas gracias por tus palabras! Un placer haberte podido ayudar. un saludo
@brunoakun
@brunoakun Год назад
Está genial. Gracias por compartirlo👏
@akotech
@akotech Год назад
Gracias Bruno por tu comentario! un saludo
@krlosarthur
@krlosarthur 2 года назад
Me ha venido muy bien estos videos, pues trabajar con Angular y entenderlo como aquí se muestra son dos cosas diferentes, ojalá sigan haciendo más vídeos de Angular. Gracias
@akotech
@akotech 2 года назад
Un placer haberte podido ayudar y tranquilo que seguiremos haciendo más videos de Angular. Un saludo y muchas gracias por tu comentario.
@jonasromanespaillat9566
@jonasromanespaillat9566 Год назад
Hermoso Video bro!
@enriqueruiz320
@enriqueruiz320 Год назад
Que explicación tan chingona 👍
@akotech
@akotech Год назад
Gracias 😁
@paputec
@paputec Год назад
wow, simplemente genial, te ganaste un subscriptor mas!
@akotech
@akotech Год назад
Muchas gracias y bienvenido! 😊
@pedrovila7306
@pedrovila7306 Год назад
El contenido de tú canal es extremadamente bueno, muy claro y conciso. !!! Nunca habia visto una explicación sobre Observables tan buena. Eres un crack !! Gracias por tus videos. !!!
@akotech
@akotech Год назад
Muchísimas gracias por tus palabras Pedro! 😊 un saludo
@juandavidsaldarriagachavar9250
Excelente explicacion, nunca habia visto tutoriales de este canal, inclusive dude si el canal era original o si el video habia sido sacado de algun otro curso, excelente explicaciones, tienes un nuevo seguidor, que buen trabajo haces!!!
@akotech
@akotech Год назад
Muchísimas gracias por tus palabras Juan! 😊 un saludo
@eduarsanchez1851
@eduarsanchez1851 Год назад
Excelente contenido
@akotech
@akotech Год назад
Muchas gracias 😊!
@diegostanleypedrazassilva5454
@diegostanleypedrazassilva5454 2 года назад
Gracias por el video, bastante informativo! Subscriptor ganado!
@MrTubber44
@MrTubber44 2 года назад
Excelente gracias!
@pieroalejandropajaresorihu9716
@pieroalejandropajaresorihu9716 2 года назад
Este vídeo vale oro!
@hamiltonpajares6336
@hamiltonpajares6336 2 года назад
Exacto
@odonml
@odonml 2 года назад
llevo mucho tiempo ocupando los observables sin entender que son, y de igual manera mucho tiempo leyendo y viendo videos sin entender al cien lo que eran, pero con tu video me quedo super claro todo, muchas gracias
@akotech
@akotech 2 года назад
Muchas gracias por tu feedback 🙂. un saludo
@diegosalvana3572
@diegosalvana3572 2 года назад
Genial la explicación! Muchas gracias.
@jeidimel
@jeidimel 2 года назад
Me vi el curso entero! Muy bueno! Gracias :)
@rodrigoalave9323
@rodrigoalave9323 2 месяца назад
Excelente video. Muchas gracias. Ya me susbcribi.
@akotech
@akotech 2 месяца назад
Muchas gracias Rodrigo 😁 un saludo
@silverbell6160
@silverbell6160 2 года назад
Me he suscrito inmediatamente! Excelente! Muy buena estructura y contenido y la explicación muy detallada 🌟🌟🌟🌟🌟
@danielfh
@danielfh 2 года назад
muy buena explicacion
@ferlezcano
@ferlezcano Год назад
No me puedo imaginar lo que sería un curso completo en udemy, por ejemplo, hecho por akotech. Excelentes videos TODOS!
@akotech
@akotech Год назад
Muchas gracias una vez más Fernando. Lo del curso no eres el primero que me lo dice y en algún momento terminaré haciéndolo. El problema que crear un curso completo requiere de mucho tiempo, tiempo del que por suerte o desgracia ahora mismo no dispongo. Pero está en mi lista de futuribles. un saludo 😉
@ferlezcano
@ferlezcano Год назад
@@akotech me imagino lo mucho que ha de demandar realizar un curso completo. Igual, tus videos tienen demasiada calidad y me faltan palabras para agradecerte. Éxitos! 💪🏼
@kewindanielguzmandiaz3381
@kewindanielguzmandiaz3381 2 года назад
Por fin encuentro el mejor video, crack!
@akotech
@akotech 2 года назад
gracias 😅.
@Pokepasa
@Pokepasa 5 месяцев назад
Yo pensaba que controlaba algo de Angular, pero viendo este vídeo de Observables, veo que no, que aún me queda mucho camino. Excelente explicación. Lo que más me ha llamado la atención es que la aplicación ya funcionaba bien como estaba, pero cambiándola a "reactiva" con los observables, ha mejorado en rendimiento. ¿Se debería tender, entonces, a trabajar así, en búsqueda del mejor rendimiento? Porque con la sintaxis tradicional, todo se entiende más fácil y cualquiera puede tocar el código, pero con la sintaxis de observables, si metes a un novato al proyecto ya comenzado, no se va a enterar de nada.
@akotech
@akotech 5 месяцев назад
Es cierto que los observables pueden tener una curva de aprendizaje inicial pronunciada, pero una vez pasada esa primera etapa inicial, te permiten crear un código más fácil de entender y mantener (se que si recién estás empezando con ellos te parecerá imposible, pero a mi también me lo pareció en su día). A partir de ahí, la decisión de usarlos o no depende totalmente del contexto del proyecto y, como bien dices, de la gente que vaya a trabajar en el. Al final es algo que tendrás que valorar tu personalmente. De todas formas si estás trabajando con La v16 o posterior de Angular, tienes disponibles las señales, que te permiten manejar el estado local de la aplicación también de manera reactiva de una manera mucho más intuitiva que los observables y con los mismos beneficios en términos de rendimiento. (angular.io/guide/signals) un saludo y gracias por tu comentario😉
@welkan1701
@welkan1701 9 месяцев назад
que genial, lo entendi mejor que el curso que lleve en udemy(no explica de forma correcta lo que es un observable, y en que se diferencia en suscribe y pipe )
@akotech
@akotech 9 месяцев назад
Un placer haberte podido ayudar a entenderlo. 😊 un saludo y gracias por tu comentario.
@nghawx
@nghawx 2 года назад
Cuando utilizaste el operador tap y en él incluiste la logica de product === null && this.router... tuve que volver a leer el operador AND jaja hasta ahora me entero que al evaluar una condición AND y en el caso de que ambos sean verdaderos devuelve el valor del segundo operando. Aveces estas cosas pasan desapercibidas mientras programamos.
@akotech
@akotech 2 года назад
En este caso no está devolviendo el valor de la segunda, lo que ocurre es que al usar el AND como para que sea true ambas condiciones tienen que ser true, si la primera devuelve false, la segunda directamente ya no la evalúa. Por lo que en este caso esa parte del código es equivalente a: if(product === null) { this.router.navigate(['catalog']); } un saludo
@damiancisneros7140
@damiancisneros7140 Год назад
Genial explicacion de los observables. Si recargas la pagina desde el navegador, se pierde el authService.loggedIn$, entonces no se sabría si tiene que mostrar el navbar con las herramientas o no. Cual es la mejor solución para guardar esa info?
@akotech
@akotech Год назад
La opción más sencilla es usar el localStorage del navegador para guardar el token y al volver a cargar la página recuperarlo de ahí. También puedes hacer uso de las cookies para implementar una solución que obtenga automáticamente un token al iniciar, pero es algo más compleja de explicar por aquí. En google seguramente puedas encontrar una explicación más detallada de ambas soluciones, con sus ventajas y riesgos. un saludo 😉
@crazymacer
@crazymacer Год назад
Excelente video. Solo tengo una duda por favor, hay alguna diferencia en inicializar el id$ (el observable) directamente en la declaración, en el constructor o en el ngOnInit?, cuál es lo recomendable?, por lo general yo aprendí de otros videos a hacerlo todo en el ngOnInit, gracias de antemano.
@akotech
@akotech Год назад
Iniciarlo directamente en la propiedad o en el constructor al compilar resulta en el mismo código. Y ngOnInit solo es necesario usarlo si el observable depende del valor de algún @Input, ya que sino no está garantizado que ese input este inicializado. Dicho esto, no hay una convención propiamente dicha, ni tampoco hay una diferencia enorme entre usar la primera o segunda opción. Así que puedes usar la que más rabia te dé. Yo normalmente uso la inicialización directa porque me resulta más cómoda de leer, pero es 100% preferencia personal. un saludo y gracias por tu comentario
@crazymacer
@crazymacer Год назад
@@akotech Muchas gracias por tu respuesta
@enriqueruiz320
@enriqueruiz320 Год назад
Y solo es la introducción 😱
@andresescorcia6587
@andresescorcia6587 2 года назад
Por que colocas un signo de admiracion al final del estado en la linea 16 tiempo 11:12 [ isUserLoggedIn! ]
@akotech
@akotech 2 года назад
Lo pongo porque con el modo estricto de Typescript, cuando declaras una propiedad en una clase, tienes dos opciones: 1.- o la inicializas en la propia declaración o en el constructor 2.- o tienes que declararla como posible undefined. En este caso como no va a ser undefined, sino que simplemente he movido la inicialización al ngOnInit, el _non-null assertion operator_ ( ! ), me permite de algún modo decirle a TS eso, que tranquilo, que esa propiedad si se esta inicializando, aunque en otro lado, y por tanto no va a ser nunca undefined. un saludo
@andresescorcia6587
@andresescorcia6587 2 года назад
@@akotech Gracias por tan valiosa explicación. Me suscribo. Feliz día y que continúe tan buen canal.
@james3456ful
@james3456ful 2 года назад
Why not english ?
@akotech
@akotech 2 года назад
This channel is aimed at the Spanish speaking community, so it'd be weird to make the videos in English 🙂. I don't rule out the possibility of making a secondary channel with an English version of the videos but right now i don't have the time for it. cheers.
@james3456ful
@james3456ful 2 года назад
@@akotech Ok. so I need to take time to learn Spanish first for your superior content !. :)
@akotech
@akotech 2 года назад
😂
Далее
What is Observable | Observables | Angular 12+
14:16
Просмотров 146 тыс.
Zoneless Angular Applications in V18
14:00
Просмотров 11 тыс.
Angular Basics - Componentes
19:20
Просмотров 6 тыс.
Observables en #ANGULAR y #RxJS
31:42
Просмотров 8 тыс.
switchMap in Rxjs | switchMap in Angular
10:24
Просмотров 22 тыс.
Signals Unleashed: The Full Guide
1:39:24
Просмотров 16 тыс.
OBSERVABLES, OBSERVERS & SUBSCRIPTIONS | RxJS TUTORIAL
17:40