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
})
  • In index.html has "<app-root></app-root>" is called selector.Gets loded into view.


Button Click And Grid: We have button and patient object, we want to add in internal collection and it should be display in table 

Its Input has mentioned in previous block click here

Output:


                          Must refer this videos for more details:


                                                 Thank You...!


ليست هناك تعليقات:

إرسال تعليق