loading...

How ANGULAR Trigger index.html And Start Working

casperns profile image Zelimir Stefanovic ・1 min read

Angular start - start

When we use CLI tool, we can easily create and building angular application and start with developing after a few commands on the CLI.

But how angular start working and how trigger index.html?

This is generally how the angular starts with work.


main.ts
Angular main.ts - main.ts

The main.ts file, that is the first code which gets executed. The job of main.ts is to bootstrap the application. It loads everything and controls the startup of the application.

Most importantly here is the line where bootstraps start our angular app by passing app module to the method. AppModule refers to the app.module.ts file.


app.module.ts
Angular app.module.ts - app.module.ts

The most important part from a file, when angular starts, is bootstrap array in @NgModule.

It basically there is a list of all components which should be known to Angular at the point of time it analyzes our index.html file and here the circle closes.

It's closed because here, we reference our app component.

By default, angular does not scan all of our files. So, if we don't tell it that the new component exists, angular doesn't know it.

index.html
Angular app.component.ts - app.component.ts


SUMMARY

  • Angular started with main.ts.
  • Then we bootstrap an angular application and we pass app.module.ts as an argument. In app.module.ts we tell angular: "There is the app component which you should know when you try to start yourself".
  • And angular now analyze this app component, reading the set up we pass there and there is SELECTOR app-root.
  • Now, angular is enable to handle app-root in the index.html and knows rules for the SELECTOR.
  • SELECTOR should insert the app components and have some HTML code - a template attached to him - html component.
  • This is how Angular application starts.

Posted on Dec 3 '18 by:

casperns profile

Zelimir Stefanovic

@casperns

Passionate about IT, Travel and Adventure lover.

Discussion

markdown guide