Exploring Modules

In Angular, there’s a concept called modules. The idea of modules in Angular is similar to ES6 modules in JavaScript/TypeScript. For example, let’s look at a module in vanilla JavaScript.

const foo = 5;
const chocolate = 'dark';

export { chocolate };

In the example above, we have two variables: foo and chocolate. The chocolate variable is exported, which makes it public for other modules to use. The foo variable is private, which makes it inaccessible outside of the module.

The idea of modules in JavaScript is to split, share, and organize code within your project. Angular expands on this idea by building its own module system for sharing and organizing code. Angular’s module system is much more comprehensive because it allows you to isolate, export, and group code by feature.

The app module

By default, every project you work on will have a root module. The root module is what will be used to start the application and tie everything together. The CLI will create the root module for you. It’s called the app module.

Let’s open the app.module.ts module file in the src directory.