3. Basic project (Component) structure of first Angular project - Tutorial 3

Create a simple project and open in Visual Studio.

After opening you will see all files of your project on the left side.

Angular is a single-page application. It doesn't mean that there are no more html files in this project.

This project has several HTML pages based on components. but all other HTML pages are integrated with one HTML (index.html) file. That's why it's called a single-page application. We will learn all step by step.

What is a Component?

Components are the pieces of a complete web application. Like the top Menu, Header, Footer, etc. 

Components are reusable in different places at a time.

How to open a single file (index.html) file first?

After running the project. It first hit on the main.ts file.

1. Go to the main.ts file and check which modules are integrated. Like - appModule
2. Go to the app.module.ts file and check which components are added here. Like - appComponent
3. Go to the app.components.ts file. And check which selector(this selector basically binds different HTML files) is added. In this component, it mentions the specific HTML and CSS files. The selector is a tag which is like the name of that HTML and CSS file.
4. Angular locates where are added that selector. It finds out and embeds those specific HTML files.