How angular works.

Navigate to project folder and click on app.component.html file in <project-folder>/src/app/app.component.html

Write the below code inside the app.component.html file

<H2>Hello Angular</H2>

Now when you navigate to localhost:4200 you will see something like this.

  • Now lets see how the contents of app.component.html file is rendered.
  • Initially angular.json file which is a configuration file which is read by angular.
  • This json file has two properties named index and main.
  • index propery points to index.html file which will be loaded initially by localhost:4200 url is hit.
  • And main.ts is called to resolve the angular modules used in index.html file.
  • In the above index.html <app-root> tag is not a default html element but one of the angular component.
  • So what happens here is when angular is loaded, it loads main.ts file, which looks like below
  • Now /app/app.module is loaded via main.ts file
  • /app/app.module looks something like below
  • Now once app.module.ts file is loaded
  • It has 4 sections in it.
    • declarations – This property holds the array of components names which are used in the module
    • imports – This property holds the array of all the modules names required along with this module
    • providers – This property is again a string array which indicates the name of the services required for executing this module.
    • bootstrap – This property holds an array of name of the components which are required while starting(booting/bootstraping) this module.
  • Now since AppComponent class is bootstraped by the app.module.ts file It will load from file app.component.ts.
  • app.component.ts file will look something like below.
  • app.compnent.ts file has a class named AppComponent which is decorated with @Component decorator.
  • @Component decorator has 3 properties
    • selector – which is the name of the tag which this component is going to present.
      (remember <app-root> tag used in index.html file resolved from this file)
    • templateUrl – which points to the html file which has the content which is displayed instead of the tag <app-root>
      (This is how the content of app.component.html is displayed in index.html file)
    • styleUrls – this property takes an array of name of the css file which contains the css which will be applied to the html content displayed.
  • Thus the html content of app.component.html file is loaded instead of tag <app-root>

Leave a Comment