In this lecture, we're going to learn about Angular's module system.
In the Main.ts file, we're importing an object called app module.
We didn't get the opportunity to discuss what this file does.
It's one of the most important files since it bundles our application.
Let's dive into what modules are first.
In JavaScript we have a module system.
The goal of the module system is to break code into separate files.
This structure keeps our code maintainable, reusable and testable.
We can freely import and export code.
Here is an example of the module system.
In JavaScript we have a file called a.
It imports a file called B.
The B file is a module.
It's exporting an object with a property called FOO.
This is a very basic example of how modules work.
They're very powerful and flexible.
We have complete freedom over how we structure an application with modules.
Of course, life is never that easy for small applications.
This system works great.
On the other hand, we can run into several problems with modules, just to name a few.
We can struggle with duplicate modules and circular dependencies.
Overall, it can be a struggle to keep track of everything.
The Angular team has designed an improved module system.
You shouldn't think of it as a replacement for JavaScript modules.
We will still need imports in our app.
Instead, you can think of it as an extension of the default module system.
It's a system for helping us manage multiple dependencies by grouping them by feature in a large app.
We can have different sections.
For example, let's imagine we were building an e-commerce application.
We can have a product feature.
This feature can comprise dozens of files.
We may have a file for displaying a single product, another for rendering a list of products and lastly,
a function for retrieving an image for a product.
Each of these needs to be imported along with other files.
Instead of importing these files into each other, we can import them into an angular module.
By centralizing the imports into one file, we can share code between files.
The Getimage function can be called inside the single product file, even if it's not directly imported.
Since they're both registered with the product module, the single product file has access to the Getimage
function.
Angular excels at handling our modules.
Every application has a module called an app.
We can consider this module the root module.
It can load other modules, which is something we'll be doing in a future lecture.
Let's check out the app module in our project.
In the source directory we have a folder called App.
It's common practice to store modules in folders to keep our app organized.
Inside this folder we have a file called App.module.ts.
The name of the file is another standard practice.
The name of the file is the name of the module with the module extension.
It's not required to add the word module in the file name.
Angular will not complain, however, it helps other developers identify module files.
Throughout this course, we're going to adopt this practice inside this file.
A lot is going on.
We will do what we did last time.
We're going to completely empty out the file.
We will rewrite the file from scratch.
This will help us understand what's going on.
It's going to temporarily break our app, but that's to be expected.
In the next lecture, we're going to begin recreating the file.