Learn Angular, MVC Core, EF Core, SQL Server Step By Step: BootStrapping Angular cycle

16th Day

Hey Guys, I hope that you are enjoying with my blogs writing and in previous blog we have created a project and used ngModel and Directives and today's we will see concepts of Bootstrapping Angular Cycle so let's see Introduction .

Angular is a binding framework that is used to create web application. Angular uses typescript to write our business logic and method but browser does not understand typescript. The browser understand JavaScript . so that's why Angular CLI come into picture.

Angular CLI is a command-line interface tool that use to initialize, develop, scaffold and maintain Angular application directly from a command shell. It help us to create projects easily and quickly.

Work of BootSrapping

As we know that about view , model and component.
View i.e. app.component.html
model i.e. app.model.ts
Component i.e. app.component.ts
Module i.e. app.module.ts
index.html: This is the first file which will run and this file run to main.ts and it is run to Module.
i.e. first will run index.html->it will run to main.ts-> it will run to module.
platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.error(err));
In main.ts, These above code run the module.

It is Called Decorator.
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]// Which will invoked first it has mentioned in bootstrap.
})
export class AppModule { }

In this Bootstrap , AppComponent will invoked first.
export class AppModule{} it is very simple TypeScript class
View and Component ,connected with template url. which is mentioned in below component.

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  //its ment to specify the html
  styleUrls: ['./app.component.css']
  //its ment to specify the html
})