Artful DI in Angular – Part 7: Presenting the Finished Application

In the previous parts of this series, you have seen

  • How a naive approach to application design can result in page-level components that try to do too much and become Big Balls of Wire as as result. (Part1)
  • How to create a mock HTTP service that returns RxJS Observables just like a real HTTP service that uses Angular’s HttpClient. (Part 2)
  • How to encapsulate design decisions in an abstract service, and why you would want to do so. (Part 3)
  • How to make an Angular attribute directive that listens for a browser event. (Part 4)
  • In the post that is really the heart of the series, how to inject an abstract, generically typed service into a component in a way that enables you to use a separate instance of one of its derived classes in each instance of the component. The benefit is better encapsulation and reusability. (Part 5)
  • How to create an attribute directive that modifies its DOM element, based on an Observable. (Part 6)

Let’s wind this up by seeing the finished application once more, courtesy of our favorite Angular hosts, StackBlitz.com. Feel free to change the application and experiment; you won’t change the original.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.