Saturday, 30 January 2021

How Angular Applications are Boot strapped

 How Angular application is Bootstrapped?

Angular applications are single-page applications. Only one HTML file will be available. only the components will be replaced whenever navigate to different pages.

  1. Angular application's startup file is mentioned in angular.json as below
  2. "architect": {
            "build": {
              "builder": "@angular-devkit/build-angular:browser",
              "options": {
                "outputPath": "dist/Angular-fundamentals",
                "index": "src/index.html",
                "main": "src/main.ts",
                "polyfills": "src/polyfills.ts",
                "tsConfig": "tsconfig.app.json",
                "aot": true,
                "assets": [
                  "src/favicon.ico",
                  "src/assets"
                ],
  3. Module to be loaded will be mentioned in Main.ts as below
platformBrowserDynamic().bootstrapModule(EventAppModule)
  .catch(err => console.error(err));

Component to be loaded first will be mentioned in Module as below
 bootstrap: [EventsAppComponent]

Every component will have selector which will be used as an HTML tag in index.html

Also, it has content to be loaded for the component in template/templateUrl. the style also can be mentioned

Note: AppModule name can be changed to anything. Whichever module is mentioned in Main.ts will be the start-up module

 TypeScript Features


Static Typing:

It allows specifying data types for parameters and properties

let name: string

let age: number


Typescript Interfaces: 

interface ICat{

    name:string  //Required Property in derived objects

    age?:number //Optional Property

}

Objects implementing this interface should use properties of the same type

let fluffy: ICat

fluffy  = { name: 'Fluffy'}

Typescript Class Properties:

class Student

 {

private name: string

speak()

constructor(name)

{

}

}

Public-Private properties

In typescript, properties can be public/private. See above example. Below example also correct concerning class properties

class Student

{

    constructor(private name)

{

    

}

}



How Angular Applications are Boot strapped

 How Angular application is Bootstrapped? Angular applications are single-page applications. Only one HTML file will be available. only the ...