How an Angular App Gets Loaded

Angular is a single page application. Single page served by angular is index.html. Below is the structure of default index.html.

<app-root> is a tag present in index.html. How angular will know about this tag. That is taken care by main.ts which is the first script that will run. Below is the structure of main.ts

main.ts bootstrap AppModule

AppModule has declared a bootstarp array and AppComponent is added to it. So Angular should know this bootstrap component before trying to load index.html. Below is the AppComponent having <app-root> as the selector. So when angular see the same selector in index.html, it knows that the component to be loaded is app.component.html

Below is the code in app.component.html

So when we ran ng serve, the screen we see is app.component.html

Search the Web

Custom Search

Searches whole web. Use the search in the right sidebar to search only within javajee.com!!!

Quick Notes Finder Tags

Activities (1) advance java (1) agile (3) App Servers (6) archived notes (2) Arrays (1) Best Practices (12) Best Practices (Design) (3) Best Practices (Java) (7) Best Practices (Java EE) (1) BigData (3) Chars & Encodings (6) coding problems (2) Collections (15) contests (3) Core Java (All) (52) course plan (2) Database (12) Design patterns (8) dev tools (3) downloads (2) eclipse (9) Essentials (1) examples (14) Exceptions (4) exercises (6) Getting Started (18) Groovy (2) hadoop (4) hibernate (77) hibernate interview questions (6) History (1) Hot book (4) http monitoring (2) Inheritance (4) intellij (1) java 8 notes (4) Java 9 (1) Java Concepts (7) Java Core (4) java ee exercises (1) java ee interview questions (2) Java Elements (16) Java Environment (1) Java Features (4) java interview points (4) java interview questions (4) javajee initiatives (1) javajee thoughts (3) Java Performance (6) Java Programmer 1 (4) Java Programmer 2 (2) Javascript Frameworks (1) Java SE Professional (1) JSP (1) linked list (3) maven (1) Multithreading (16) NFR (1) No SQL (1) Object Oriented (9) OCPJP (4) OCPWCD (1) OOAD (3) Operators (4) Overloading (2) Overriding (2) Overviews (1) policies (1) programming (1) Quizzes (17) references (2) resources (1) restful web service (3) Searching (1) security (10) Servlets (8) Servlets and JSP (31) Sorting (1) source code management (1) spring (4) spring boot (1) Spring Examples (1) Spring Features (1) spring jpa (1) Stack (1) Streams & IO (3) Strings (11) SW Developer Tools (2) testing (1) troubleshooting (1) user interface (1) vxml (8) web services (1) Web Technologies (1) Web Technology Books (1) youtube (1)