1
00:00:00,210 --> 00:00:04,140
In this lecture, we going to add static data to our roots.

2
00:00:04,470 --> 00:00:06,689
Data can be associated with a root.

3
00:00:07,020 --> 00:00:12,480
They data we add to a root can be helpful for adding additional information about a root.

4
00:00:12,780 --> 00:00:17,080
Let's look at a practical example in the previous lecture.

5
00:00:17,250 --> 00:00:21,960
We redirected the user to the home page whenever they log out of the application.

6
00:00:22,230 --> 00:00:24,240
It works, but it's not perfect.

7
00:00:24,480 --> 00:00:31,080
The user is always being redirected, which is a behavior we may not want if they're on the about page.

8
00:00:31,230 --> 00:00:34,380
I don't see a reason as to why they should be redirected.

9
00:00:34,740 --> 00:00:37,590
The about page is accessible to all users.

10
00:00:38,070 --> 00:00:41,910
We should redirect the user if the route requires authentication.

11
00:00:42,270 --> 00:00:45,660
Our issue can be resolved by adding data to our roots.

12
00:00:45,810 --> 00:00:47,550
Let's explore how that's done.

13
00:00:47,880 --> 00:00:50,070
Open the video routing module.

14
00:00:52,570 --> 00:00:57,850
In the round object for the manage routes, we will add a new object called data.

15
00:01:00,330 --> 00:01:04,230
Inside this object, we can add static data to a route.

16
00:01:04,620 --> 00:01:09,810
This data will be exposed to other areas of our app by the router services.

17
00:01:10,140 --> 00:01:17,250
For example, we can add data to this route to specify if this route requires authentication inside

18
00:01:17,250 --> 00:01:18,100
this object.

19
00:01:18,150 --> 00:01:22,800
We will add a property called off only with an initial value of true.

20
00:01:25,280 --> 00:01:28,400
We don't need to have this same object to other routes.

21
00:01:28,670 --> 00:01:34,490
If the off only property is missing from other routes, we can safely assume the route doesn't need

22
00:01:34,490 --> 00:01:35,390
authentication.

23
00:01:35,780 --> 00:01:38,210
We can let users remain on the page there.

24
00:01:38,210 --> 00:01:42,050
On the next step is to retrieve data from the service.

25
00:01:42,290 --> 00:01:46,820
I wish I could say this is easy, but angular makes this task difficult.

26
00:01:47,090 --> 00:01:50,810
Let me show you why open the manage component class?

27
00:01:53,290 --> 00:01:58,420
At the top of the file, we are going to import a class called activated roots.

28
00:02:00,730 --> 00:02:06,610
The activated route class is a service we can inject into our components to gather information about

29
00:02:06,610 --> 00:02:08,620
the route the user is currently on.

30
00:02:08,949 --> 00:02:14,500
It's not to be confused with the route or service which provides methods for interacting with the router.

31
00:02:14,770 --> 00:02:18,820
Let's inject it into the component through the constructor function.

32
00:02:19,090 --> 00:02:21,820
We will refer to the service as route.

33
00:02:24,330 --> 00:02:32,160
Next, inside the nji on init function, we will subscribe to the this route data property.

34
00:02:34,790 --> 00:02:40,700
The data, property stores and observable that pushes the data from the current route, we can subscribe

35
00:02:40,700 --> 00:02:46,430
to this observable to grab the data we added to our roots inside the Subscribe function.

36
00:02:46,580 --> 00:02:49,610
We will pass in the console log function.

37
00:02:52,110 --> 00:02:57,240
Next, let's refresh the Manage page in the browser with the console opens.

38
00:02:59,640 --> 00:03:03,480
If we look in the console, we will find the object has been logged.

39
00:03:03,720 --> 00:03:06,060
It contains the op only property.

40
00:03:06,450 --> 00:03:08,070
Everything works as expected.

41
00:03:08,190 --> 00:03:09,300
So what's the problem?

42
00:03:09,570 --> 00:03:15,900
The router does not make the data easily accessible to services or components to find outside of the

43
00:03:15,900 --> 00:03:17,470
router outlet directive.

44
00:03:17,880 --> 00:03:24,870
Keep in mind the roundel outlet DIRECTV will manage the components for root components managed by this

45
00:03:24,870 --> 00:03:27,990
directive will be given the latest changes to a root.

46
00:03:28,380 --> 00:03:31,200
The story is different outside of the directive.

47
00:03:31,470 --> 00:03:33,150
Let's go back to our editor.

48
00:03:35,680 --> 00:03:38,170
The manage component doesn't need the data.

49
00:03:38,680 --> 00:03:42,910
The purpose of importing the route data was to examine it in the console.

50
00:03:43,180 --> 00:03:46,600
Typically, you will want to access data in this manner.

51
00:03:46,840 --> 00:03:49,240
However, we are in a different scenario.

52
00:03:49,720 --> 00:03:53,350
They want to access this data from our authentication service.

53
00:03:53,650 --> 00:03:56,890
Let's undo the changes we made to the manage component.

54
00:03:59,310 --> 00:04:02,460
Next, let's open the authentication service.

55
00:04:04,800 --> 00:04:07,290
We are going to replicate the same behavior.

56
00:04:07,530 --> 00:04:09,600
We are going to get different results.

57
00:04:09,810 --> 00:04:12,900
Let's see what happens at the top of the file.

58
00:04:12,930 --> 00:04:15,810
We will import the activated route class.

59
00:04:18,230 --> 00:04:23,720
Next, we will inject this service into the constructor function with the alias route.

60
00:04:26,270 --> 00:04:34,430
Lastly, we will subscribe to the this route data observable in the constructor function for our subscription.

61
00:04:34,490 --> 00:04:37,670
We will pass in the console log function.

62
00:04:40,330 --> 00:04:42,250
Refresh the page in the browser.

63
00:04:44,720 --> 00:04:47,810
I'm on the Manage page unlike before.

64
00:04:47,900 --> 00:04:49,880
The object is entirely empty.

65
00:04:50,090 --> 00:04:54,320
We aren't able to view data from our route, which is a huge problem.

66
00:04:54,470 --> 00:05:00,590
Without this information, we cannot conditionally redirect the user a based on the data in the route.

67
00:05:00,920 --> 00:05:06,740
It's completely possible to get the data, but it's going to require work before moving on.

68
00:05:06,860 --> 00:05:11,210
Let's remove the subscription from the constructor function of our service.

69
00:05:13,680 --> 00:05:18,480
We will not remove the activated route service from the authentication service.

70
00:05:18,720 --> 00:05:20,280
We are going to need it later.

71
00:05:20,550 --> 00:05:23,310
Let's work on the solution in the next lecture.