1
00:00:00,180 --> 00:00:04,950
In this lecture, we were going to talk about services throughout this course.

2
00:00:05,130 --> 00:00:08,940
I've mentioned services dozens of times without an explanation.

3
00:00:09,240 --> 00:00:12,690
It's time to go over what they are and why we should use them.

4
00:00:13,050 --> 00:00:15,720
They're one of the most interesting features in angular.

5
00:00:15,960 --> 00:00:20,100
So what is a service in the simplest terms possible?

6
00:00:20,250 --> 00:00:26,730
A service is an object for managing your data instead of managing our data inside a component.

7
00:00:26,880 --> 00:00:30,870
We can have a separate class dedicated to managing our data.

8
00:00:31,260 --> 00:00:36,480
The idea of a service is to be able to share data across multiple components.

9
00:00:37,050 --> 00:00:40,440
I mentioned the GNBC pattern in an earlier section.

10
00:00:40,770 --> 00:00:46,380
The idea of the MVC pattern is to split our components into separate files.

11
00:00:46,710 --> 00:00:48,630
One file for the HTML.

12
00:00:48,810 --> 00:00:50,700
Another for the component logic.

13
00:00:50,850 --> 00:00:53,280
And lastly, a file for the data.

14
00:00:53,610 --> 00:00:57,750
Up until now, we've been partially following the MVC pattern.

15
00:00:58,020 --> 00:01:02,120
We haven't had the opportunity to separate our data from the component.

16
00:01:02,450 --> 00:01:05,580
We've always defined the data inside the class.

17
00:01:06,180 --> 00:01:12,600
The goal of the MVC pattern is to decouple our data from the component class by doing so.

18
00:01:12,780 --> 00:01:15,480
Data can be accessible to other components.

19
00:01:15,780 --> 00:01:22,050
This is the main reason why we would want to create a service if we need to access data in multiple

20
00:01:22,050 --> 00:01:22,770
components.

21
00:01:22,980 --> 00:01:24,810
Services are the way to go.

22
00:01:25,320 --> 00:01:31,020
However, services are not always necessary if we have data for one component.

23
00:01:31,230 --> 00:01:35,820
Defining the data inside the component class is perfectly acceptable.

24
00:01:36,180 --> 00:01:41,400
Services become useful once data needs to be available to multiple components.

25
00:01:41,880 --> 00:01:44,670
In our case, we will be creating a model.

26
00:01:44,880 --> 00:01:48,840
We may have multiple components that will need to open a model.

27
00:01:49,200 --> 00:01:54,840
Therefore, a service will allow any component to toggle the visibility of a model.

28
00:01:55,410 --> 00:02:02,010
Alternatively, we have the option of sharing data between components with inputs and outputs.

29
00:02:02,340 --> 00:02:05,700
Unfortunately, this solution does not scale well.

30
00:02:06,000 --> 00:02:12,900
Imagine if we had dozens of components constantly writing inputs and outputs can become challenging

31
00:02:12,900 --> 00:02:13,650
to manage.

32
00:02:13,980 --> 00:02:16,860
We would need to constantly pass down data.

33
00:02:17,130 --> 00:02:18,450
It can be exhausting.

34
00:02:18,990 --> 00:02:21,210
Services don't have this issue.

35
00:02:21,450 --> 00:02:26,550
As you'll see, services can be added to a component with a single line of code.

36
00:02:26,990 --> 00:02:33,660
They'll be accessible to every component, regardless of where the service was declared before we create

37
00:02:33,660 --> 00:02:34,380
a service.

38
00:02:34,500 --> 00:02:37,980
I want to quickly touch on the topic of state management.

39
00:02:38,370 --> 00:02:42,930
If you have a background with Vue or react, you may have heard of this phrase.

40
00:02:43,200 --> 00:02:48,210
The concept of state management is to manage data from a centralized location.

41
00:02:48,540 --> 00:02:51,510
It sounds very similar to angular services.

42
00:02:51,900 --> 00:02:56,640
Services and state management are two different patterns for managing data.

43
00:02:57,210 --> 00:03:01,740
In most cases, you can manage data without a state management library.

44
00:03:02,040 --> 00:03:08,190
Most developers agree that services can fulfill the needs of sharing data across components.

45
00:03:08,490 --> 00:03:12,060
That's not to say you can't install a state management library.

46
00:03:12,480 --> 00:03:18,780
There are third party packages for integrating a state management solution into an angular project.

47
00:03:19,350 --> 00:03:23,640
For this project, we're not going to install a state management library.

48
00:03:23,970 --> 00:03:28,140
Services will suffice for the entire app in the next lecture.

49
00:03:28,170 --> 00:03:30,990
We are going to create our first service.