DEV Community

Cover image for How angular starts
Sibaram Sahu
Sibaram Sahu

Posted on

How angular starts

#angular #javascript #programming #typescript

How angular starts executing?

  1. 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" ] } }
Enter fullscreen mode Exit fullscreen mode

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';
Enter fullscreen mode Exit fullscreen mode

Along with this it called a function called "bootstrapModule"

platformBrowserDynamic().bootstrapModule(AppModule)
Enter fullscreen mode Exit fullscreen mode

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 { }
Enter fullscreen mode Exit fullscreen mode

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'; }
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)