Learn Angular Project Structure with Example

In this we will learn about the Angular Project Structure folder

Project Structure:

package.json:

→ It contains the name of the project and its version.

→ Contains a few scripts to run, build and test the project.

→ Contains dependencies under this defined all the dependencies and their version required to run the project.

→ Contains all the tools, libraries, and packages that are required to run the project.

→ It is just like “pom.xml” in the java maven project.

→When we run the command npm install then download all the dependencies under the “ node_modules ” folder.

tsconfig.json:

→ Browsers understand JavaScript but we write code in TypeScript in Angular then the configuration file helps to convert TypeScript to JavaScript.So that browser can able to compile and run the angular project.

node_modules:

→ This contains all the dependencies and packages that are required to run the project.

→ This will be generated when we create a project through angular CLI.

→ When we run npm install all the dependencies are downloaded into this folder.

src:

→ Under this all the developments related things.

src/main.ts:

→ This is the entry point of our angular project.

index.html:

→ This is the single file which is served in the browser and we are developing a single-page application. So we should have only one HTML file and update the HTML file.

→ <app-root></app-root> selector is configured in the “ app.component.ts “ file.

app.component.ts:

→ This is the component class having templateUrl and styleUrls.

→ It is the root component of our application.

app.component.html:

→ This is having HTML content for the view. In this, we can write HTML code for our project.

app.component.css:

In this file, we can write CSS code for our app.component.html.

app.component.spec.ts:

→ This file is for unit testing.

app.module.ts:

→ This is the root module of our application. In this we can configure components and dependent modules etc.

polyfills.ts:

This file is browser specific to support different browsers.

style.css:

In this file, we can globally configure CSS files.

test.ts:

This file is for the test case of our application.

assets:

This folder contains static files like images etc.

app.routing.module.ts:

→ This file is for routing configuration.

Control Flow of Angular Project:

Control comes first to the “main.ts” file and the “main.ts” file enters bootstrap and kickstarts AppModule using bootstrapModule() method. AppModule enters the “ app.modules.ts ” file, enters bootstrap and kickstarts “ AppComponent ‘’.Then Control goes to the “app.component.ts” file. AppComponent has a “ title ” property and this property renders into the “ app.component.html ” template.

Conclusion

This topic is explained:

• What is the use of the ng serve command?

• What is the use of the ng server — -open or -o command?

• What are the various files of the Angular project?

• Which files can we write code to develop the Angular project?

• How to execute the control flow of the Angular Project?