Inside an angular project, there are a lot of files. Among them, we are going to discuss only a few files. So let’s discuss the file structure of an angular application
A few file structures of an Angular Application
As told we are going to learn about the file structure of the angular application one by one and step by step, below are the file and folder structures.
The first one is the package.json:
This file contains the dependency and the dev dependency, which are the libraries and the modules required to make an angular application work.
There are listed some scripts also like the ng-serve command which is used to make the angular application start or compiled.
Node module folder:
The packages are listed inside the package.json file and the packages are installed inside the node module folder.
The src folder:
The source folder contains the modules. components, and the assets of the application
The main.ts file:
The main.ts file is the entry point of the angular application.
The app folder:
Inside the previously described src folder, there is a folder called app, which contains the root module of the application.
app.module.ts file
the app.module.ts file is the root module file of the angular application.
app.component.ts file:
The app.component.ts file is the root component of the angular application.
*When we run the command ng-serve, the application first came to the main.ts file which bootstraps the app module.
Inside the app module, it makes bootstraps the angular applications app component.
The app component has two main things
- The HTML template and
- The class to control the view logic
The class contains the logic or data which is sent to the HTML.
After installation, you can see there is a property title = app in the app.component.ts class file.
And when you will go to the app.component.html file, you will find some HTML code with the title which contains {{ title }} property which is replaced with the value, which is defined in the class during the runtime.
There is some other HTML element also rendered during the runtime.
Now delete the other HTML tags except the h1 title tag and inside the h1 tag, just keep the {{ title }} and remove the “welcome to the …..” from the app.component.html file.
Now go to the app.component.ts file, and change the value of the title property to “Hellow World” from the class.
And go to the browser, and it will automatically load the title “Hellow World” without reloading the page in URL http://localhost:4200