Front-End Infrastructure Implementation

Modules & Components

We will be implementing the following project from GitHub; so let’s start by discussing the different folders/files that we’ll be using throughout the project.

In the GitHub project, there is a separate mean_frontend folder.

You can see that there are a bunch of files in there, most of which are configuration files. Our focus should be on the src folder, where the source code is. This is probably a good moment to introduce the terms Modules and Components, as they are the main units of every Angular application.

Angular applications are modular, and have their own modular system – NgModules. These modules help developers organize applications in blocks of functionality and to have a better separation of concerns.

Every Angular application has at least one module called the root module, which can be found in the project with the named – AppModule. Since our application is going to be a simple one, we will only use this module; you can find it in the file app.module.ts in the mean_frontend/src/app/ directory.

Each module can have one or more Angular Component.