In this lecture, we were going to talk about services throughout this course.
I've mentioned services dozens of times without an explanation.
It's time to go over what they are and why we should use them.
They're one of the most interesting features in angular.
So what is a service in the simplest terms possible?
A service is an object for managing your data instead of managing our data inside a component.
We can have a separate class dedicated to managing our data.
The idea of a service is to be able to share data across multiple components.
I mentioned the GNBC pattern in an earlier section.
The idea of the MVC pattern is to split our components into separate files.
One file for the HTML.
Another for the component logic.
And lastly, a file for the data.
Up until now, we've been partially following the MVC pattern.
We haven't had the opportunity to separate our data from the component.
We've always defined the data inside the class.
The goal of the MVC pattern is to decouple our data from the component class by doing so.
Data can be accessible to other components.
This is the main reason why we would want to create a service if we need to access data in multiple
components.
Services are the way to go.
However, services are not always necessary if we have data for one component.
Defining the data inside the component class is perfectly acceptable.
Services become useful once data needs to be available to multiple components.
In our case, we will be creating a model.
We may have multiple components that will need to open a model.
Therefore, a service will allow any component to toggle the visibility of a model.
Alternatively, we have the option of sharing data between components with inputs and outputs.
Unfortunately, this solution does not scale well.
Imagine if we had dozens of components constantly writing inputs and outputs can become challenging
to manage.
We would need to constantly pass down data.
It can be exhausting.
Services don't have this issue.
As you'll see, services can be added to a component with a single line of code.
They'll be accessible to every component, regardless of where the service was declared before we create
a service.
I want to quickly touch on the topic of state management.
If you have a background with Vue or react, you may have heard of this phrase.
The concept of state management is to manage data from a centralized location.
It sounds very similar to angular services.
Services and state management are two different patterns for managing data.
In most cases, you can manage data without a state management library.
Most developers agree that services can fulfill the needs of sharing data across components.
That's not to say you can't install a state management library.
There are third party packages for integrating a state management solution into an angular project.
For this project, we're not going to install a state management library.
Services will suffice for the entire app in the next lecture.
We are going to create our first service.