1
00:00:00,120 --> 00:00:04,019
In this lecture, we going to talk about our problem with our model.

2
00:00:04,230 --> 00:00:07,410
It has to do with a concept called single tents.

3
00:00:07,710 --> 00:00:14,820
Before we talk about singletons, let's check out the problem in my ED. I have the mobile component

4
00:00:14,820 --> 00:00:22,350
class and navigation component class files opened inside the constructor function of both components.

5
00:00:22,530 --> 00:00:25,470
We are injecting the modal service object.

6
00:00:25,860 --> 00:00:30,270
The object being injected is the same instance in both components.

7
00:00:30,600 --> 00:00:35,130
If the objects were two separate instances, our model wouldn't work.

8
00:00:35,550 --> 00:00:40,470
Every time we inject the modal service object, it'll be the same instance.

9
00:00:40,770 --> 00:00:44,280
It doesn't matter how many times the object gets injected.

10
00:00:44,970 --> 00:00:48,900
By having the same instance, we can toggle the same property.

11
00:00:49,290 --> 00:00:53,640
The changes to their property are communicated to both components.

12
00:00:54,060 --> 00:00:57,600
This behavior works great, but it does present a problem.

13
00:00:57,930 --> 00:01:01,380
Let's open the authentication model template file.

14
00:01:05,300 --> 00:01:09,170
I will minimize the first model below the first model.

15
00:01:09,230 --> 00:01:12,380
We will create another app model component.

16
00:01:14,990 --> 00:01:20,390
Inside this component, we will pass in a paragraph element with some dummy text.

17
00:01:22,900 --> 00:01:28,420
We have two models, which model do you think will appear when we click on the login link?

18
00:01:28,750 --> 00:01:29,800
Let's find out.

19
00:01:30,070 --> 00:01:32,110
Refresh the page in the browser.

20
00:01:34,700 --> 00:01:38,280
If we click on the logon link, both models will appear.

21
00:01:38,660 --> 00:01:40,910
This behavior isn't what we wanted.

22
00:01:41,480 --> 00:01:43,700
Models should open independently.

23
00:01:44,060 --> 00:01:46,190
The problem lies with our service.

24
00:01:46,610 --> 00:01:52,730
The models rely on the same instance of the model service class to understand why.

25
00:01:52,760 --> 00:01:54,590
Let's talk about singletons.

26
00:01:56,260 --> 00:01:59,920
A singleton is a design pattern in the programming world.

27
00:02:00,250 --> 00:02:06,880
It's when a single instance of a class is given to an application, it's a programming practice adopted

28
00:02:06,880 --> 00:02:08,500
from various languages.

29
00:02:08,919 --> 00:02:13,420
Technically, nothing is stopping us from creating multiple instances.

30
00:02:13,780 --> 00:02:20,140
If we want to follow the singleton pattern, we must always make sure there's one instance of a class

31
00:02:20,140 --> 00:02:20,800
available.

32
00:02:21,070 --> 00:02:24,280
Luckily, we don't have to develop such a system.

33
00:02:24,580 --> 00:02:28,750
By default, Angular will treat services as single tens.

34
00:02:29,260 --> 00:02:34,870
If our app needs an instance of a service, Angular will check if one exists already.

35
00:02:35,260 --> 00:02:37,030
It will return the instance.

36
00:02:37,240 --> 00:02:40,060
Otherwise, it'll create a new instance.

37
00:02:40,390 --> 00:02:44,620
Therefore, our components will always use the same service.

38
00:02:45,010 --> 00:02:50,950
This is why we never have to worry about working with two separate instances in our components.

39
00:02:51,520 --> 00:02:56,920
In some cases, you may hear services described as a single source of truth.

40
00:02:57,340 --> 00:03:03,910
Services are great for storing data components can reliably retrieve data from services.

41
00:03:04,300 --> 00:03:08,920
If the data is updated, the changes are reflected in all components.

42
00:03:09,130 --> 00:03:13,510
We have one reliable source of information, while convenient.

43
00:03:13,540 --> 00:03:15,430
We will run into some problems.

44
00:03:15,700 --> 00:03:18,040
Our model should have separate data.

45
00:03:18,340 --> 00:03:21,250
We have two solutions for solving this issue.

46
00:03:21,490 --> 00:03:26,950
We can force angular to create multiple instances of the modal service object.

47
00:03:27,250 --> 00:03:30,040
However, I don't think that will be necessary.

48
00:03:30,340 --> 00:03:34,810
Instead, we should continue to have one model service object.

49
00:03:35,320 --> 00:03:38,740
The object should be able to manage an array of models.

50
00:03:39,070 --> 00:03:43,150
I think that's more feasible and simpler in the next lecture.

51
00:03:43,330 --> 00:03:45,970
We will get started on this implementation.