Angular Structure

3 min readMay 13, 2020

Index.html : ( This is the entry file)

(index file load the main.ts)

Angular framework allows to use SPA(Single Page Applications) and here the index.html is the single page which is provided by server.
The <body> code is different from normal HTML code. Here, “<app-root>” tag which is provided by the CLI.
CLI(Command line interface)tool used for initialize, develop, and maintain Angular applications.
We can say that, whenever we create a project from CLI, by default, one component is created, i.e., “app component”.

When index.html is loaded, it injects angular.js , app.js , and controller.js into the browser per our defined script from index.html. As a result, angular.module is placed at root.element, and myApp become available for index.html.

Main.ts :

(Main.ts loads the Module (Group of components))

The main. ts file, that is the first code which gets executed. The job of main. ts is to bootstrap the application. It loads everything and controls the startup of the application.
This is the main ts file that will run; first, It is mainly used to define the global configurations.
This file bootstraps (starts) the AppModule from app.module.ts , and it can be used to define global configurations.
(Global Configuration mode mode allows users to modify the running system configuration)

Main.ts loads the Module using platform browser. Platform browser is a one type of Package which is usually used to run the angular app(We load the main Module)

Module :

Module is like a big container containing one or many small containers called Component, Service, Pipe

Main.ts loads the module where module is group of components.

After loading the Module tells or show which component store in the bootstrap. then it display the html file of the component.
Angular module just by using the NgModule decorator. The NgModule decorator requires at least three properties:
Imports : imports expects an array of modules
Declarations : declaration expects an array of components, directives and pipes that are part of the module.
Bootstrap : bootstrap property is where we define the root component of our module.

Components :

Components binds the model and UI(User Interface).
Basically, a component is anything that is visible to the end user and which can be reused many times within an application.
A component has a selector , template , style and other properties, using which it specifies the metadata required to process the component.
Template: A template is a form of HTML that tells Angular how to render the component(Angular templates are dynamic).
Selector: The selector has to be unique so that it doesn’t override already existing element or component.A selector is used to identify each component uniquely.

To create a component:

@Component({selector: 'greet', template: 'Hello {{name}}!'})
class Greet {
  name: string = 'World';
}

Model:

Model is application functionality containing business logic for generating response on data and binds response to view.
The model is responsible for managing application data. It responds to the request from view and to the instructions from controller to update itself.
Using objects which hold your data may be pretty useful.

ngModel:

ngModel provides a unique two-way-binding feature; it binds value to input.

{{expression}}
[target]=”expression”
bind-target=”expression”

In this above example [] this brackets shows the One-way from data source to view target

(target)=”statement”
on-target=”statement”

In this above example () this brackets shows the One-way from view target to data source

[(target)]=”expression”
bindon-target=”expression”

In this above example [()] this brackets shows the Two-way

To better understand this concept please do watch the below video.It will resolve your all doubts: