1
00:00:00,360 --> 00:00:06,270
In this lecture, we are going to begin sending a request to Firebase, we're able to render a player

2
00:00:06,270 --> 00:00:07,080
on the page.

3
00:00:07,290 --> 00:00:10,110
However, the same video will always be played.

4
00:00:10,410 --> 00:00:15,480
We need to dynamically render a different video based on the URL in the URL.

5
00:00:15,690 --> 00:00:18,360
We're storing the ID as a root parameter.

6
00:00:18,660 --> 00:00:23,430
This ID is going to help us query the database for the clip the user wants to watch.

7
00:00:23,940 --> 00:00:27,390
There are different ways we can retrieve data from our database.

8
00:00:27,600 --> 00:00:31,170
For this page, we're going to use a feature called Resolvers.

9
00:00:31,530 --> 00:00:33,780
This feature is available from the router.

10
00:00:34,080 --> 00:00:38,070
A resolver is a function for retrieving data for a page component.

11
00:00:38,430 --> 00:00:41,850
The router will run this function before loading the components.

12
00:00:42,420 --> 00:00:45,540
We're going to define a resolver in the eclipse service.

13
00:00:46,020 --> 00:00:48,690
Open the eclipse service file in your editor.

14
00:00:51,170 --> 00:00:55,910
In some cases, you may see developers to find a resolver in a separate file.

15
00:00:56,240 --> 00:00:59,030
It'll be much faster to define it in our service.

16
00:00:59,300 --> 00:01:02,150
Our service has access to the eclipse collection.

17
00:01:02,480 --> 00:01:06,950
We can skip some of the initial steps of connecting to our database collection.

18
00:01:07,370 --> 00:01:14,300
The first step to using a resolver is to implement the interface at the top of the file import the resolve

19
00:01:14,300 --> 00:01:17,480
interface from the angular slash router package.

20
00:01:19,960 --> 00:01:23,110
Next, implement this interface on the class.

21
00:01:27,470 --> 00:01:33,230
By implementing this interface, we'll be forced to define a function called resolve in the service

22
00:01:33,530 --> 00:01:35,180
before we define this method.

23
00:01:35,420 --> 00:01:39,650
The compiler is not satisfied with our implementation of this service.

24
00:01:39,980 --> 00:01:42,980
The purpose of the resolve function is to return data.

25
00:01:43,310 --> 00:01:47,720
TypeScript would like to know the type of data that will be returned by our function.

26
00:01:48,110 --> 00:01:54,020
We can add the types with generics in a generic at the I clip and null types.

27
00:01:56,610 --> 00:02:00,210
Our function can return a clip object or no value.

28
00:02:00,510 --> 00:02:03,960
Keep in mind, it's possible for a clip not to exist.

29
00:02:04,230 --> 00:02:06,690
We should return null for these scenarios.

30
00:02:07,020 --> 00:02:12,300
The next step is to define the resolve function will define it at the end of the class.

31
00:02:14,830 --> 00:02:19,840
The result function can accept two arguments before we had these arguments.

32
00:02:19,900 --> 00:02:26,620
We're going to need to import some classes to annotate them back at the top of the file import the activated

33
00:02:26,620 --> 00:02:32,560
route snapshot and router state snapshot classes from the angular slash router package.

34
00:02:35,050 --> 00:02:39,820
Back in the function, let's add to arguments called root and state.

35
00:02:42,470 --> 00:02:47,180
The root argument will be annotated with the activated route snapshot class.

36
00:02:49,660 --> 00:02:53,350
This class will store information on the current route being visited.

37
00:02:53,740 --> 00:02:57,520
We'll be able to access the routes parameters through this argument.

38
00:02:57,910 --> 00:03:02,710
The state argument will be annotated with the router state snapshot class.

39
00:03:05,280 --> 00:03:09,420
This argument will store the current representation of our roots in a tree.

40
00:03:09,840 --> 00:03:14,370
We aren't going to be using this argument, but I thought I would mention it just in case.

41
00:03:14,670 --> 00:03:18,870
As for the return value of the function, we have three options.

42
00:03:19,170 --> 00:03:23,250
We are allowed to return a promise observable or raw data.

43
00:03:23,580 --> 00:03:28,350
In most cases, you will either want to return a promise or observable.

44
00:03:28,680 --> 00:03:32,700
These types of values allow for asynchronous operations.

45
00:03:33,180 --> 00:03:39,780
For this example, we're going to return in observable inside the function return the following function.

46
00:03:40,110 --> 00:03:43,740
This eclipse collection dot document.

47
00:03:46,250 --> 00:03:51,140
The goal of defining a resolver is to grab a document from the clips collection.

48
00:03:51,470 --> 00:03:55,790
We can perform a query for a document by calling the document function.

49
00:03:56,210 --> 00:04:00,320
This function has one argument, which is the aid of the document.

50
00:04:00,680 --> 00:04:04,010
We have access to the ID through the root argument.

51
00:04:04,310 --> 00:04:08,900
Let's pass in the following value route params that ID.

52
00:04:11,770 --> 00:04:16,839
After creating the query, we can initiate the request by chaining the get function.

53
00:04:19,430 --> 00:04:25,400
After chaining B get function, you would imagine we're done TypeScript is not happy with the return

54
00:04:25,400 --> 00:04:25,940
value.

55
00:04:26,180 --> 00:04:29,670
To understand why, let's hover our mouse over the function.

56
00:04:30,020 --> 00:04:35,240
Technically, the get function returns and observable that pushes the documents data.

57
00:04:35,540 --> 00:04:40,850
However, the data gets wrapped with an object called a document snapshot.

58
00:04:41,390 --> 00:04:47,810
We need to unwrap the data from the snapshot to satisfy the function after the get function chain,

59
00:04:47,820 --> 00:04:48,980
the pipe function.

60
00:04:51,570 --> 00:04:54,250
We're going to keep things simple by adding the map.

61
00:04:54,270 --> 00:04:59,350
Operator This operator is already imported inside the pipeline.

62
00:04:59,370 --> 00:05:00,780
Add the map function.

63
00:05:03,300 --> 00:05:07,320
Next pass in a function to accept these snapshot arguments.

64
00:05:09,860 --> 00:05:13,130
Inside the function create a variable called data.

65
00:05:13,430 --> 00:05:16,850
Its value will be the snapshot data function.

66
00:05:19,380 --> 00:05:22,050
All snapshots have a function called data.

67
00:05:22,650 --> 00:05:25,770
We're unwrapping the data by storing it in a variable.

68
00:05:26,070 --> 00:05:28,170
It's possible the data could be empty.

69
00:05:28,440 --> 00:05:32,160
If that's the case, we should redirect the user to the home page.

70
00:05:32,430 --> 00:05:36,300
There isn't a point in completing the navigation if there isn't data.

71
00:05:36,630 --> 00:05:42,990
First, we should inject the router service at the top of the file import the router class from the

72
00:05:42,990 --> 00:05:45,240
angular slash router package.

73
00:05:47,660 --> 00:05:52,280
Next in the constructor function and get the service into the component.

74
00:05:54,770 --> 00:06:01,100
Lastly, let's go back to the resolve function in this function, create a conditional statement to

75
00:06:01,100 --> 00:06:03,890
check if the data variable is empty.

76
00:06:06,390 --> 00:06:11,370
If it is, we're going to redirect the user with the router dot navigate function.

77
00:06:13,970 --> 00:06:16,820
You're more than free to redirect them wherever you'd like.

78
00:06:17,030 --> 00:06:20,690
For example, you can redirect them to the 404 page.

79
00:06:20,930 --> 00:06:27,440
In this example, I'm going to redirect them to the home page by passing in an array with a forward

80
00:06:27,440 --> 00:06:30,770
slash character as the first item in the array.

81
00:06:33,250 --> 00:06:38,320
Lastly, will return null from the function to prevent it from running further.

82
00:06:40,820 --> 00:06:47,120
If we were able to find a document, we can return the data variable after the conditional statement.

83
00:06:49,590 --> 00:06:55,740
After making those changes, the function is ready, we can begin accepting this data in our component.

84
00:06:56,160 --> 00:07:00,240
By default, resolvers are not automatically registered with A.

85
00:07:00,960 --> 00:07:07,020
We must manually register a resolver open the app routing module file.

86
00:07:09,510 --> 00:07:15,600
This was the module where we registered the roots at the top of the file import, the clip service.

87
00:07:18,010 --> 00:07:22,900
Next, search for the clip root in the roots array in the object.

88
00:07:22,930 --> 00:07:27,670
We're going to add a property called resolve with an initial value of an object.

89
00:07:30,250 --> 00:07:33,460
In this object, we can add a list of resolvers.

90
00:07:33,730 --> 00:07:36,310
We're going to have one resolver called clip.

91
00:07:36,670 --> 00:07:38,950
Its value will be the clipped service.

92
00:07:41,450 --> 00:07:46,520
Angular will search for a function called resolve in our service if it's available.

93
00:07:46,760 --> 00:07:50,210
This function will be called whenever the user visits this route.

94
00:07:50,600 --> 00:07:56,540
The data returned by the resolve function can be accessed through the property's name in this object.

95
00:07:56,870 --> 00:08:00,830
In this example, we are going to reference the data as clip.

96
00:08:01,430 --> 00:08:04,580
The next step is to grab this data from our component.

97
00:08:04,790 --> 00:08:08,480
Let's begin handling this process in the following lecture.