Learn Angular's Folder Structure And Execution Flow For Beginners - Part Two

Introduction

 

This article is a continuation of here. Before reading the below article, I suggest you read my previous article as provided in the link.

 

As we know, Angular is a Javascript Framework for developing Single Page Applications. It is a Component-based web development framework. It uses various Components for the development of web applications. Components are the building blocks of the application. We can have a parent or root component which is nothing but appComponent and many child components or user-defined components. If our application contains Header, Footer, Navigation, ArticlesPage, Profile page, and Content then for all this we will have separate components to maintain their individual logic, where the code can be easily maintained and tested without disturbing the other functionalities.

 

In order to work with Angular below are the pre-requisites:

• Node.js latest version.
• Npm
• Visual Studio Code or any editor of your choice
• Basic understanding of HTML, CSS, Javascript.

Please do refer to my previous article  for the installation of Node and npm. To learn about components we will create a new Angular application. In order to create a new Angular application, we use the below command:

 

ng new ProjectName

 

Here you can use any name of your choice, as we are working with Components I will create a new project with the name AngularComponents like below,

 

C:\MyNewAngularApps\NewAngularProjects> ng new AngularComponents

 

 

In the above left side is the folder path where we want to create the Angular application, and the right side is the command for creating the new application. After entering click the enter button, with this a new Angular application will be created.

 

 

Folders or File Structure

 

 

Dist

 

When we build the Angular application using ng build, a new folder will be created with name dist, which internally converts all typescript files to javascript which can be used for the deployment.

 

e2e

 

This folder contains  an app.e2e-spec.ts file, which can be used for testing the Angular application with the help of protractor.

 

node_modules

 

This folder contains all the libraries required for the development of Angular applications,  such as bootstrap, typescript, angular/core, angular/forms, angular/router etc.

 

src

 

This folder contains the app folder which is the source for the development, that means all the components, modules will be part of src folder. The main component is appComponent which is created when we create the new project. If we are creating child components by using the command like ng generate component, ComponentName, or ng g c ComponentName,  then the src/app folder will contain the folder with the componentName with the files such as componentname.component.html.

• componentname.component.css
• componentname.component.ts
• componentname.component.spec.ts

app.Module.ts is the root module for all the components, which have any entry for all the components.

 

Assets

 

This folder can used for placing the icons, image files etc.

 

Index.html

 

This is the main HTML file, from where the application starts, here we have <app-root></app-root> defined in the body which matches with the selector of appComponent, and renders the appComponent in the body section. If the appComponent selector is different from the <app-root></app-root> which is defined in body section, it throws an error.

 

 

Main.ts

 

Main.ts bootstraps the module AppModule class defined in app.module.ts using the below code.

platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.error(err));

style.css

 

This is for if we want to define the global CSS which is applied for all the components that we defined it in style.css file.

 

angular.json

 

It contains the default configuration for the development of Angular applications.

 

Package.json

 

This file contains the dependencies and devDependencies with the versions with the available libraries or packages in node_modules for the development of Angular applications.

 

tslint.json

 

It is a process of checking syntactical error while we write typescript code.

 

As we know Angular is used for the development of Single Page Applications. Index.html is the starting page when we run the Angular application using ng serve command.

 

From the above Index.html image we can see the <app-root></app-root> element which is declared inside the body tag which is not an HTML element but a selector of AppComponent.

 

If the selector doesn't match with the tag declared inside the body of Index.html then the Angular application throws an error message.

 

Main.ts

 

It is the starting point of the application. Here in the code we can see AppModule gets imported by the './app/app.module' path and from the below code we can see the Main.ts

platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.error(err));

bootstraps or kickstarts the AppModule which is a root module for all the components in Angular applications.

 

 

App.Module.ts

 

 

As we know, whenever we create a component by using the CLI commands like,

 

ng generate component ComponentName (OR)

ng g c ComponentName

 

Then a new component will be created with the name specified while creating the component using CLI command, and as we can see in the above image we have three components, that is the root component; i.e., AppComponent, and child components; i.e., TestComponent and Test1Component.

 

These three components are created using the CLI commands mentioned above. Whenever we create components by using CLI commands then a registery will be done in App.Module.ts like

import { AppComponent } from './app.component';
import { TestComponent } from './test/test.component';
import { Test1Component } from './test1/test1.component';

As well as AppComponent,TestComponent,Test1Component will be declared in the declaration array of @ngModule. If we are creating the components manually by creating the files without using CLI commands the user needs to register  and manually import the components as well as declare it in the declaration array.

 

Under the providers array we can see the bootstrap which bootstraps or kickstarts the component declared in the bootstrap array. In order to work with an Angular application in Index.html, we should use the same selector name as the one which is declared in bootstrap array of App.Module.ts. If Index.html contains the AppComponent selector and in App.Module.ts the bootstrap array bootstraps to Test1Component then the application throws an error.

 

In the next article we will learn about the Components in Angular.

 

Conclusion

 

In this article we learned about the Files or Folder Structure in Angular applications as well the execution flow of Angular applications. Also we learned how the registry is done whenever we create a new component using the CLI commands.

 

In my next article, I am going to work with Components. 

 

Thanks I hope this helps you.