Angular Observables & RxJS Introduction
-
Upload
rahat-khanna-aka-mappmechanic -
Category
Technology
-
view
352 -
download
1
Transcript of Angular Observables & RxJS Introduction
![Page 1: Angular Observables & RxJS Introduction](https://reader034.fdocuments.in/reader034/viewer/2022050914/5aaacaa97f8b9ae5748b45d9/html5/thumbnails/1.jpg)
Angular2
Angular - Observables & RxJS
1
ngMeetup - RedMart India
![Page 2: Angular Observables & RxJS Introduction](https://reader034.fdocuments.in/reader034/viewer/2022050914/5aaacaa97f8b9ae5748b45d9/html5/thumbnails/2.jpg)
ngMeetup Angular2
Little about Myself
2
Rahat Khanna
@mappmechanic
Bangalore
Front End Dev Blogger Authorblog.pusher.comairpair.compacktpub.com/blogpluralsight.org
![Page 3: Angular Observables & RxJS Introduction](https://reader034.fdocuments.in/reader034/viewer/2022050914/5aaacaa97f8b9ae5748b45d9/html5/thumbnails/3.jpg)
ngMeetup Angular2
Agenda
3
• A new asynchronous programming concept: the stream
• A new primitive type: Observables
• Intro to RxJs in Angular
• Commonly used operators: map, filter, reduce, scan
• Common uses of RxJs in Angular: Forms and Http
![Page 4: Angular Observables & RxJS Introduction](https://reader034.fdocuments.in/reader034/viewer/2022050914/5aaacaa97f8b9ae5748b45d9/html5/thumbnails/4.jpg)
ngMeetup Angular2
Prior to this - Ajax
4
![Page 5: Angular Observables & RxJS Introduction](https://reader034.fdocuments.in/reader034/viewer/2022050914/5aaacaa97f8b9ae5748b45d9/html5/thumbnails/5.jpg)
ngMeetup Angular2
Callbacks
5
![Page 6: Angular Observables & RxJS Introduction](https://reader034.fdocuments.in/reader034/viewer/2022050914/5aaacaa97f8b9ae5748b45d9/html5/thumbnails/6.jpg)
ngMeetup Angular2
Promises
6
![Page 7: Angular Observables & RxJS Introduction](https://reader034.fdocuments.in/reader034/viewer/2022050914/5aaacaa97f8b9ae5748b45d9/html5/thumbnails/7.jpg)
ngMeetup Angular2
Streams
7
![Page 8: Angular Observables & RxJS Introduction](https://reader034.fdocuments.in/reader034/viewer/2022050914/5aaacaa97f8b9ae5748b45d9/html5/thumbnails/8.jpg)
ngMeetup Angular2
Streams
8
Stream is simply - sequence of events over a given time.Streams can be used to process any of type of event such as • mouse clicks, • key presses, • bits of network data, etc.
You can think of streams as variables that with the ability to react to changes emitted from the data they point to.
![Page 9: Angular Observables & RxJS Introduction](https://reader034.fdocuments.in/reader034/viewer/2022050914/5aaacaa97f8b9ae5748b45d9/html5/thumbnails/9.jpg)
ngMeetup Angular2
Example
9
V/S
![Page 10: Angular Observables & RxJS Introduction](https://reader034.fdocuments.in/reader034/viewer/2022050914/5aaacaa97f8b9ae5748b45d9/html5/thumbnails/10.jpg)
ngMeetup Angular2
New Primitive Type - Observables
10
An observer subscribes to an Observable. An Observable emits items or sends notifications to its observers by calling
the observers’ methods.
In other documents and other contexts, what we are calling an “observer” is sometimes called a
“subscriber,” “watcher,” or “reactor.” This model in general is often referred to as the “reactor pattern”.
![Page 11: Angular Observables & RxJS Introduction](https://reader034.fdocuments.in/reader034/viewer/2022050914/5aaacaa97f8b9ae5748b45d9/html5/thumbnails/11.jpg)
ngMeetup Angular2
Observables Concept
11
![Page 12: Angular Observables & RxJS Introduction](https://reader034.fdocuments.in/reader034/viewer/2022050914/5aaacaa97f8b9ae5748b45d9/html5/thumbnails/12.jpg)
ngMeetup Angular2
Intro to RxJS
12
Reactive Extensions for JavaScript
RxJS is a library that allows us to easily create and manipulate streams of events and data. This makes
developing complex but readable asynchronous code much easier.
RxJS in Angular
To get started with RxJS in Angular, all we need to do is import the operators we want to use. TRxJS is itself an
Angular dependency so it's ready to use out of the box.
![Page 13: Angular Observables & RxJS Introduction](https://reader034.fdocuments.in/reader034/viewer/2022050914/5aaacaa97f8b9ae5748b45d9/html5/thumbnails/13.jpg)
ngMeetup Angular2
Creating Observable in Angular
13
![Page 14: Angular Observables & RxJS Introduction](https://reader034.fdocuments.in/reader034/viewer/2022050914/5aaacaa97f8b9ae5748b45d9/html5/thumbnails/14.jpg)
ngMeetup Angular2
Using in http Service in Angular
14
![Page 15: Angular Observables & RxJS Introduction](https://reader034.fdocuments.in/reader034/viewer/2022050914/5aaacaa97f8b9ae5748b45d9/html5/thumbnails/15.jpg)
ngMeetup Angular2
UI Events in Angular
15
![Page 16: Angular Observables & RxJS Introduction](https://reader034.fdocuments.in/reader034/viewer/2022050914/5aaacaa97f8b9ae5748b45d9/html5/thumbnails/16.jpg)
ngMeetup Angular2
Forms in Angular
16
![Page 17: Angular Observables & RxJS Introduction](https://reader034.fdocuments.in/reader034/viewer/2022050914/5aaacaa97f8b9ae5748b45d9/html5/thumbnails/17.jpg)
Angular2 17
Thanks
mAppMechanic
twitter.com/mAppMechanic
linkedin.com/in/rahatkh
17
Sources https://dzone.com/refcardz/rxjs-streams https://auth0.com/blog/making-use-of-rxjs-angular/