How application work means the flow of application. Flow here is
how the files are called and in which sequence of files the app gets executed
when we are developing it.
So here I am providing the files detail who are comes under application work
flow.
1. Angular.Json
Every Angular app
consists of a file named angular.json. It is the file which has various
properties and configuration of your Angular project. While building the app,
the builder looks at this file to find the entry point of the application.
Following is an image of the angular.json file:
|
|
1.
Inside the build
section, the main property of the options object defines the entry point of the
application which is main.ts.
2. Main.ts
This file acts as the
entry point of the application. The main.ts file creates a browser environment
for the application to run, and, along with this, it also calls a function
called bootstrapModule, which bootstraps the application. These two steps are
performed in the following order inside the main.ts file:
|
import { platformBrowserDynamic }
from ‘@angular/platform-browser-dynamic’; |
|
platformBrowserDynamic().bootstrapModule(AppModule) |
In the above line of
code, AppModule is getting bootstrapped.
3. AppModule.Ts
From the main.ts file,
it is very clear that we are bootstrapping the app with AppModule. This
AppModule is defined in APP.MODULE.TS file which is found in
|
/src/app/app.module.ts |
This is the module,
created with the @NgModule decorator, which has declarations of all the
components we are creating within the app module so that angular is aware of
them. Here, we also have imports array where we can import other modules and
use in our app. Below is an example of app.module.ts file with a test component
declared and two modules imported.
Below is an example of
app.module.ts file:
|
import { BrowserModule } from
‘@angular/platform-browser’; |
As one can see in the
above file, AppComponent is getting bootstrapped. This component is defined in
app.component.ts file.
4. App.Component.Ts
This is the file which interacts with the html of the webpage
and serves it with the data. The component is made by using @Component
decorator which is imported from @angular/core.
Each component is declared with three properties:
1. Selector – used for accessing the component
2. Template/TemplateURL – contains HTML of the component
3. StylesURL – contains component-specific stylesheets
Below is an example of
app.component.ts file:
|
import { Component } from
‘@angular/core’; |
By this time, compiler
has all the details about the components of the app and now they are ready to
be used.
5. Index.html
Here, the index.html
file is called. It is found in the src folder of the app. Compiler dynamically
adds all the javascript files at the end of this file. Since all the components
are now known, the html file calls the root component that is app-root. The
root component is defined in app.components.ts which targets
app.component.html. This is how index.html file looks like :
|
// <!doctype html> |
When this angular app
is served and opened in the browser, the scripts injection is done by the
compiler .
6. App.Component.Html
This is the file which contains all the html elements and their binding which are to be displayed when the app loads. Contents of this file are the first things to be displayed.
0 comments:
Post a Comment