1
00:00:00,390 --> 00:00:04,320
In this lecture, we are going to create two of the five components.

2
00:00:04,620 --> 00:00:08,189
It's not completely necessary to create multiple components.

3
00:00:08,430 --> 00:00:12,900
If we wanted to, we could create everything inside the app components.

4
00:00:13,140 --> 00:00:15,870
However, that wouldn't be the wisest idea.

5
00:00:16,140 --> 00:00:18,480
It defeats the purpose of using angular.

6
00:00:18,750 --> 00:00:22,830
We should split our code into separate files for manageability.

7
00:00:23,370 --> 00:00:25,980
We will start with the navigation components.

8
00:00:26,250 --> 00:00:31,750
Let's use the angular Seelye to generate this component inside the command line.

9
00:00:31,800 --> 00:00:34,400
Run the following command energy.

10
00:00:34,440 --> 00:00:36,420
Generate component nav.

11
00:00:39,060 --> 00:00:42,840
The component we've created will be declared inside the app module.

12
00:00:43,080 --> 00:00:44,670
Sounds strange, right?

13
00:00:45,090 --> 00:00:48,540
Shouldn't we declare this component inside the user module?

14
00:00:48,840 --> 00:00:53,280
The truth is the navigation component will be rendered on multiple pages.

15
00:00:53,610 --> 00:00:59,970
It contains links for the video system to it, shares a relationship with multiple parts of our app.

16
00:01:00,510 --> 00:01:04,440
Therefore, it makes sense to declare it inside the app module.

17
00:01:04,739 --> 00:01:07,980
The navigation component will hold the header of our app.

18
00:01:08,280 --> 00:01:10,350
Let's grab it from the app template.

19
00:01:12,990 --> 00:01:17,430
Previously, we pasted the entire static template into this component.

20
00:01:17,730 --> 00:01:23,190
It has about 300 lines of code by breaking this template into smaller components.

21
00:01:23,490 --> 00:01:27,720
Our app will become more manageable at the top of the template.

22
00:01:27,990 --> 00:01:30,090
The first section is for the header.

23
00:01:30,420 --> 00:01:36,690
You can find it by searching for a comment that says Header cut this entire section from the template.

24
00:01:39,230 --> 00:01:42,200
Next, open the nav template file.

25
00:01:44,800 --> 00:01:48,720
Replace the contents of this file with the code we copied earlier.

26
00:01:51,220 --> 00:01:57,760
There's one last step we need to load this component inside the app template before we do, we should

27
00:01:57,760 --> 00:02:01,780
verify these selector open the navigation class file.

28
00:02:04,400 --> 00:02:07,670
The selector option is being set to app now.

29
00:02:08,120 --> 00:02:14,930
The Seelye Prefix, the word app, which is considered good practice, switched back to the app template

30
00:02:14,930 --> 00:02:15,440
file.

31
00:02:15,770 --> 00:02:19,490
We will add the app nav component in the same location.

32
00:02:22,000 --> 00:02:28,780
As a reminder, we don't have to declare the navigation component inside the app module if we created

33
00:02:28,780 --> 00:02:30,190
the component manually.

34
00:02:30,340 --> 00:02:33,820
We would have to declare the component in the module ourselves.

35
00:02:34,120 --> 00:02:36,280
Let's refresh the page in the browser.

36
00:02:38,900 --> 00:02:40,880
The app is functioning as usual.

37
00:02:41,270 --> 00:02:45,080
We can verify the component with the angular dev tools.

38
00:02:47,630 --> 00:02:54,650
Under the Components tab, the navigation component is listed as a child component of the app components.

39
00:02:55,100 --> 00:03:00,650
If we hover our mouse over this component, the tool will highlight the component on the page.

40
00:03:00,860 --> 00:03:03,290
We've successfully moved the header section.

41
00:03:03,560 --> 00:03:05,570
Next, let's work on the model.

42
00:03:05,900 --> 00:03:10,610
Presently, the model is un viewable, but it is available in our template.

43
00:03:10,850 --> 00:03:15,980
By default, we want the model to be hidden until the link in the header is clicked.

44
00:03:16,370 --> 00:03:20,630
It'll be easier to toggle the model by storing it in a separate component.

45
00:03:20,930 --> 00:03:22,250
Go back to the editor.

46
00:03:24,780 --> 00:03:32,550
And the command line, we will run the following command energy generate component user slash off modal.

47
00:03:35,090 --> 00:03:40,850
The command we've entered is slightly different from before the mobile component should be declared

48
00:03:40,850 --> 00:03:46,250
under the user module as we saw components are registered with the app module.

49
00:03:46,580 --> 00:03:53,000
We can force these seelye to declare components in a different module by creating a component any modules

50
00:03:53,000 --> 00:03:53,720
directory.

51
00:03:54,170 --> 00:04:00,560
The Seelye is smart enough to understand we want the component to be declared inside the user module

52
00:04:00,860 --> 00:04:01,790
just in case.

53
00:04:01,940 --> 00:04:08,450
Let's verify the component was declared in the correct module by opening the user module file.

54
00:04:11,070 --> 00:04:16,140
The authentication moral component is being imported directly inside this module.

55
00:04:16,529 --> 00:04:17,070
Awesome.

56
00:04:17,250 --> 00:04:24,150
We can move on to transferring the template, switch back to the app template file in this file, scroll

57
00:04:24,150 --> 00:04:25,170
to the very bottom.

58
00:04:25,470 --> 00:04:28,620
The template for the model should be the last section.

59
00:04:28,890 --> 00:04:33,240
We can find it by searching for a comment that says Authentication Modal.

60
00:04:35,740 --> 00:04:37,750
Cut this section from the template.

61
00:04:40,310 --> 00:04:44,150
Afterward, open the authentication model template file.

62
00:04:46,730 --> 00:04:50,450
Replace the contents of this file with the code we copied earlier.

63
00:04:52,910 --> 00:04:59,420
We're almost finished the last step is to load this component in the app component, switch back to

64
00:04:59,420 --> 00:05:01,790
the template file for the app components.

65
00:05:02,120 --> 00:05:04,760
We will add the component in the same location.

66
00:05:04,760 --> 00:05:05,930
We cut the template.

67
00:05:06,260 --> 00:05:09,980
The name of the component is called app authentication modal.

68
00:05:12,530 --> 00:05:18,200
You can verify the name by opening the class file of the respective component and checking the value

69
00:05:18,200 --> 00:05:19,670
for the selector option.

70
00:05:19,970 --> 00:05:21,410
Let's refresh the page.

71
00:05:23,980 --> 00:05:26,140
The application is not working anymore.

72
00:05:26,440 --> 00:05:29,350
The message is telling us the app failed to compile.

73
00:05:29,620 --> 00:05:33,010
Let's discuss this error in detail in the next lecture.