Dependency Injection, Services, and HttpClient

Chapter learning outcomes

In this chapter, we are going to start looking at some more advanced topics of Angular development. So far, we have looked at how an Angular application is structured, how Angular components are created, and how we use the Angular CLI for almost everything we need to do in order to build an application. We’ve explored how to add a UI to an application and how we can add Angular Material to give a polished look and feel to the application. Now, we need to start looking at how we can add data to an Angular application.

Over the next few chapters, we will be looking at how Angular manages data, how it loads external data, and how it manages the concept of the state within an application.

In this chapter, we will start by looking at services, what they are, and how to make use of them in our Angular applications.

By the end of this chapter, you will have learned the following topics:

• What is Dependency Injection?
• Why we use Dependency Injection in Angular.
• What services and providers are in Angular.
• How services are used in Angular and how components make use of services.
• How to load data from an external source using the built-in services that Angular provides.

Client contacts manager application

We will also be expanding on our demo application to make use of services in order to save and manage data within the application.