1
00:00:00,080 --> 00:00:04,130
In this lecture, we're going to learn about Angular's module system.

2
00:00:04,130 --> 00:00:09,490
In the Main.ts file, we're importing an object called app module.

3
00:00:09,500 --> 00:00:13,550
We didn't get the opportunity to discuss what this file does.

4
00:00:13,580 --> 00:00:17,840
It's one of the most important files since it bundles our application.

5
00:00:17,840 --> 00:00:20,780
Let's dive into what modules are first.

6
00:00:22,020 --> 00:00:25,070
In JavaScript we have a module system.

7
00:00:25,080 --> 00:00:29,570
The goal of the module system is to break code into separate files.

8
00:00:29,580 --> 00:00:34,800
This structure keeps our code maintainable, reusable and testable.

9
00:00:34,800 --> 00:00:37,800
We can freely import and export code.

10
00:00:37,830 --> 00:00:40,080
Here is an example of the module system.

11
00:00:40,080 --> 00:00:43,440
In JavaScript we have a file called a.

12
00:00:43,440 --> 00:00:46,080
It imports a file called B.

13
00:00:46,110 --> 00:00:48,240
The B file is a module.

14
00:00:48,240 --> 00:00:51,930
It's exporting an object with a property called FOO.

15
00:00:51,960 --> 00:00:55,500
This is a very basic example of how modules work.

16
00:00:55,530 --> 00:00:57,810
They're very powerful and flexible.

17
00:00:57,810 --> 00:01:03,120
We have complete freedom over how we structure an application with modules.

18
00:01:03,150 --> 00:01:07,560
Of course, life is never that easy for small applications.

19
00:01:07,560 --> 00:01:09,450
This system works great.

20
00:01:09,480 --> 00:01:15,000
On the other hand, we can run into several problems with modules, just to name a few.

21
00:01:15,030 --> 00:01:19,320
We can struggle with duplicate modules and circular dependencies.

22
00:01:19,320 --> 00:01:23,260
Overall, it can be a struggle to keep track of everything.

23
00:01:23,290 --> 00:01:27,220
The Angular team has designed an improved module system.

24
00:01:27,220 --> 00:01:31,390
You shouldn't think of it as a replacement for JavaScript modules.

25
00:01:31,390 --> 00:01:34,030
We will still need imports in our app.

26
00:01:34,030 --> 00:01:38,770
Instead, you can think of it as an extension of the default module system.

27
00:01:38,770 --> 00:01:45,730
It's a system for helping us manage multiple dependencies by grouping them by feature in a large app.

28
00:01:45,730 --> 00:01:47,770
We can have different sections.

29
00:01:47,770 --> 00:01:52,270
For example, let's imagine we were building an e-commerce application.

30
00:01:52,270 --> 00:01:54,270
We can have a product feature.

31
00:01:54,280 --> 00:01:57,460
This feature can comprise dozens of files.

32
00:01:57,490 --> 00:02:04,780
We may have a file for displaying a single product, another for rendering a list of products and lastly,

33
00:02:04,780 --> 00:02:07,840
a function for retrieving an image for a product.

34
00:02:07,840 --> 00:02:11,830
Each of these needs to be imported along with other files.

35
00:02:11,830 --> 00:02:17,860
Instead of importing these files into each other, we can import them into an angular module.

36
00:02:17,890 --> 00:02:23,470
By centralizing the imports into one file, we can share code between files.

37
00:02:23,470 --> 00:02:30,130
The Getimage function can be called inside the single product file, even if it's not directly imported.

38
00:02:30,130 --> 00:02:36,640
Since they're both registered with the product module, the single product file has access to the Getimage

39
00:02:36,640 --> 00:02:37,390
function.

40
00:02:37,570 --> 00:02:40,810
Angular excels at handling our modules.

41
00:02:42,650 --> 00:02:46,050
Every application has a module called an app.

42
00:02:46,070 --> 00:02:49,140
We can consider this module the root module.

43
00:02:49,160 --> 00:02:53,660
It can load other modules, which is something we'll be doing in a future lecture.

44
00:02:53,690 --> 00:02:57,050
Let's check out the app module in our project.

45
00:02:57,080 --> 00:03:01,070
In the source directory we have a folder called App.

46
00:03:01,100 --> 00:03:06,150
It's common practice to store modules in folders to keep our app organized.

47
00:03:06,170 --> 00:03:11,870
Inside this folder we have a file called App.module.ts.

48
00:03:13,990 --> 00:03:17,110
The name of the file is another standard practice.

49
00:03:17,140 --> 00:03:22,040
The name of the file is the name of the module with the module extension.

50
00:03:22,060 --> 00:03:25,880
It's not required to add the word module in the file name.

51
00:03:25,900 --> 00:03:32,030
Angular will not complain, however, it helps other developers identify module files.

52
00:03:32,050 --> 00:03:37,270
Throughout this course, we're going to adopt this practice inside this file.

53
00:03:37,300 --> 00:03:38,600
A lot is going on.

54
00:03:38,620 --> 00:03:40,780
We will do what we did last time.

55
00:03:40,780 --> 00:03:43,570
We're going to completely empty out the file.

56
00:03:45,860 --> 00:03:48,490
We will rewrite the file from scratch.

57
00:03:48,500 --> 00:03:51,140
This will help us understand what's going on.

58
00:03:51,140 --> 00:03:55,550
It's going to temporarily break our app, but that's to be expected.

59
00:03:55,550 --> 00:03:59,780
In the next lecture, we're going to begin recreating the file.