Exploring the MEAN Stack Project Structure

In our previous section, we set up the MEAN stack components, installed the Angular CLI, created an angular project, and installed the IDE to make changes in the angular project. Now, in this section, we will explore the MEAN stack project structure.

After installing the required extension in Visual Studio Code, our project will look in the following way:

We will see a bunch of sub-folders and files in our project. Most of these files are completely for the configuration, and there is no need to worry about them.

1. The json file is interesting because this file has all the dependencies and development-only dependencies of the project. We will add some MongoDB dependencies there later.
2. We will also get the files for configuring the Typescript compilation, and we don't need to worry about that.
3. We will also get the json file that is for the Angular CLI, and we also don't need to worry about this.
4. The e2e folder is for end-to-end testing and node_modules stores all the dependencies that are listed in json.
5. In the src folder, our angular application lives in. Here, we will get more config files and an app
6. In-app folder, we will write the meet of our Angular application. Angular uses components which we will discuss later. We will create our whole application by composing our UI from such components.

The app.component.html file contains the code of the default application, and it looks like:

We remove this complete code and write the following line of code. As soon as we replace the code, the page will automatically recompile and reload. It is required that our ng server is running in our machine.

We create a Single Page Application and see that a single page in the index.html is present in the app folder.

This index.html file is served by the ng serve right now. This file doesn't contain a lot of content because our build workflow injects the script imports.

If we go back to our application, we can see that what we saw on the page is the content of the app.component.html file. In this file, we will build our components or html elements. In the index.html file, we see one html element in the body section. It is not a default html element; it is our custom component.

In the end, it detects this app-root element and swaps it with the content of our component.

There are other essential file name app.module.ts. This file is important for angular. Angular thinks in applications, and applications are split up in modules.

In this project, there is one module, and that module defines the building block of our applications. Components are not the only but probably the most important building block of an angular application. In the app.module.ts file, there will be a ngModule in which our AppComponent is declared. This is registering with angular. So, now angular is aware of the AppComponent. It alone would only allow us to use that component selector in another angular component, not in the index.html file. This is allowed by adding it to bootstrap array too.

There is another file name main.ts file. This file is executed first.

Angular components

Angular thinks in "Components". These components are one of the crucial things which we have to understand when working with angular. Essentially, we compose an entire page of these components. We build our application with these components because the advantages of this are that we have small, easy to maintain, and manage building blocks for our UI. We can even reuse it because some components appear more than once on a page.

In the next section, we will learn about the Angular front-end, and we will clear all the basics of it with implementation.