How angular starts

How angular starts executing?

There is file name called angular.json which act like a configuration for the whole application.

Its looks like this

  "build": {
    "builder": "@angular-devkit/build-angular:browser",
    "options": {
        "outputPath": "dist/angular-starter",
        "index": "src/index.html",
        **"main": "src/main.ts",**
        "polyfills": "src/polyfills.ts",
        "tsConfig": "tsconfig.app.json",
        "aot": false,
        "assets": [
        "src/favicon.ico",
        "src/assets"
        ],
        "styles": [
        "./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",
        "src/style.css"
        ]
    }
}

The entry point will be mentioned in the “main” section.
Which is “main.ts” here.

The main.ts file creates a browser environment to run the app.

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

Along with this it called a function called “bootstrapModule“

platformBrowserDynamic().bootstrapModule(AppModule)

In the above code AppModule is getting bootstrapped.

AppModule is looks like this

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule
    ],
    providers: [],
    entryComponents: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

If you see in the AppModule AppComponent is getting bootstrapped.

The AppComponent is defined in app.component.ts file.
Which looks like below

import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    title = 'angular';
}

These file interacts with the webpage and serves data to it.

After this its calls index.html which looks like this

  <!doctype html>
  <html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Angular</title>
    <base href="/">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
    <app-root></app-root>
  </body>
  </html>

The html template of the root component is displayed inside the <app-root></app-root>

Print Share Comment Cite Upload Translate

APA

sibaspage | Sciencx (2024-04-18T16:00:02+00:00) » How angular starts. Retrieved from https://www.scien.cx/2021/12/10/how-angular-starts/.

MLA

" » How angular starts." sibaspage | Sciencx - Friday December 10, 2021, https://www.scien.cx/2021/12/10/how-angular-starts/

HARVARD

sibaspage | Sciencx Friday December 10, 2021 » How angular starts., viewed 2024-04-18T16:00:02+00:00,<https://www.scien.cx/2021/12/10/how-angular-starts/>

VANCOUVER

sibaspage | Sciencx - » How angular starts. [Internet]. [Accessed 2024-04-18T16:00:02+00:00]. Available from: https://www.scien.cx/2021/12/10/how-angular-starts/

CHICAGO

" » How angular starts." sibaspage | Sciencx - Accessed 2024-04-18T16:00:02+00:00. https://www.scien.cx/2021/12/10/how-angular-starts/

IEEE

" » How angular starts." sibaspage | Sciencx [Online]. Available: https://www.scien.cx/2021/12/10/how-angular-starts/. [Accessed: 2024-04-18T16:00:02+00:00]

rf:citation

» How angular starts | sibaspage | Sciencx | https://www.scien.cx/2021/12/10/how-angular-starts/ | 2024-04-18T16:00:02+00:00

https://github.com/addpipe/simple-recorderjs-demo

Related Posts