Skip to content

Day 3 Services

Kobi Hari edited this page Feb 3, 2020 · 5 revisions

Day 3 - Services, Dependency Injection and async development

Projects:

fun-with-di Angular Dependency Injection
fun-with-promises Creation and usage of Promises, async - await
movies-browser-ex2 The sulution for Exercise 2
fun-with-rxjs Introduction to Observables, Subjects, And Reactive X

Introduction to Dependency Injection

  • We talked about the motivation to use a dependency injection infrastructure
  • We saw how to create a service - an object encapsulating a bit of logic and perhaps data
  • We defined the terms:
    • Injection request - A consumer that asks for a dependency (service) in the constructor
    • Injector - An object responsible for resolving (providing, injecting) the injection request
    • Provider - The algorithm, or logic, used to resolve the injected object
  • We saw how to define injecter and provider using the providers property of a Module, or Component
  • We understood the effect of defining a component as injector, and how to use the component hierarchy as injector hierarchy
  • We saw that we can not use an interface as injection request and used an abstract class instead
  • We saw how to define a provider that used another class instead of the requested class
  • Finally, we saw how to define a service as Injectable so it can also consume dependencies

Introduction to Promises and Async Development

  • We defined a promise as an object that tells us if an action that takes time has completed, and what is the result
  • We saw that we can not "pull" that information, but rather have to use the .then and .catch methods and provide callbacks that will be called when the promise completes
  • We saw how to create a promise using the Promise Constructor.
  • We understood what async and await keywords do and how do they affect the compilation
  • We understood that the .then method, and the async keywords, also create promises, out of other promises
  • We saw how to ue Promise.resolve to create a promise that is already completed when it is created
  • We saw how to use Promise.all to group promises together and wrap them in a single promise that returns all the results from all the promises

Exercise 2 - Movies Browser - Part 1

Introduction to RxJS

  • We understood the meaning of a Stream
  • We defined what an Observer<T> is and understood that it has 3 methods
    • next(T)
    • complete()
    • error(err)
  • We understood that Observable<T> is an object that allows observers to subscribe
    • subscribe(Observer<T>)
  • We saw how to define an observer explicitly by supplying the 3 methods and their implementation
  • We saw how to create an observable using the interval operator
  • We saw that 2 observers that subscribe on different times, get different sets of events that are not synchronized
  • We understoof the difference between cold observables and warm observables
  • We saw how to create a custom observable using the observable constructor
  • We got familiar with the Subject object and understood that it is basically an event...
  • We learned about BehaviorSubject and understood that it is just a subject that sends the latest event to a new observer on the moment of subscription
  • We learned how to develop stateful services using BehaviorSubject and expose it as an observable using the .asObservable() method
  • We understood that if we subscribe to an observable we must also unsubscribe from it when we are done with it to avoid memory leaks
  • We saw that we can bind directly to an observable using the async pipe in the html

Next week, we will

  • Repeat the Observable, Subject and BehaviorSubject example, becuase it requires a bit of repeating :-)
  • Continue the movie-browser example using reactive X and understand how to develop a fully reactive application
  • Understand how to use reactive X operators - which are the heart of reactiveX
  • become familiar with the HttpClientModule to communicate with servers over http