Post
Ask Question

Angular Day 2 - Angular Bootstrap And Components

All right! We have seen how we can set up the project, in a previous application. If you have not, you can visit the link Angular Basics and Quickstart with CLI. Now, it’s time to see how the application gets bootstrapped (or loaded) and the basics of the components.

So, the first step would be to add the Project.

  1. Add Project

At this point, we are expecting the Angular CLI is set up on your computer. So, it is pretty simple to add the new project and start the new application in order to add the project.

  1. Go to the command prompt.
  2. Move to the location where you want to add the project.
  3. In the command prompt, execute the command >> ng new [Project name ] (In my case, it is ngBootstrap).
  4. You will see the following output when you fire the command - ng new ngBootstrap

    Angular CLI

We can see the final message is Project ‘ngBootstrap’ is successfully created. So far, we are good with the new project creation. Now, it’s time to see the folder structure and understand what it contains to open the project. Just follow the below steps.

  1. Go to Visual Studio Code.
  2. Go to File>> Open folder >> Browse to the folder where you have created the folder using CLI and open the folder.
  3. When you open the project, you will see the following application structure.
    Angular CLI

Now, we have added the project. It is time to run the application and  CLI has made our life easier. We have the command prompt running on the PC. OK, so to run the application, move to the app directory and then, just execute the command ng serve. The following screenshot will explain the details of how we can run the application.

Angular CLI

When you browse the application, you will see the output on the browser. What you see in the browser is some default content offered by CLI and it is shown in the browser.

So far, we have seen the project setup and the project output in the browser. So, moving to our main topic of the article - how does the application get bootstrapped?

OK. So, proceeding with this first thing, we will replace the content from the app.component.html with the following content.

File name :: Src>>app.component.html

  1. <div style="text-align:center;color:blueviolet">  
  2.     <h1> {{title}} </h1>  

And change the content of the src>>app.component.ts to

  1. import {  
  2.     Component  
  3. } from '@angular/core';  
  4. @Component({  
  5.     selector: 'app-root',  
  6.     templateUrl: './app.component.html',  
  7.     styleUrls: ['./app.component.css']  
  8. })  
  9. export class AppComponent {  
  10.     title = 'we are in the app component';  
  11. }  

So, when we save the file and see the output, we can see the following output.

Angular CLI
As we know, Angular is a framework which allows us to create the Single Page Application (SPA)

When we look at the Index.html we  have the following code

  1. <!doctype html>  
  2. <html lang="en">  
  3.   
  4. <head>  
  5.     <meta charset="utf-8">  
  6.     <title>NgBootstrap</title>  
  7.     <base href="/">  
  8.     <meta name="viewport" content="width=device-width, initial-scale=1">  
  9.     <link rel="icon" type="image/x-icon" href="favicon.ico"> </head>  
  10.   
  11. <body>  
  12.     <app-root></app-root>  
  13. </body>  
  14.   
  15. </html>  

We can see the this is the normal html file with the title and head and meta tag and the body tag. One of things to notice is the  contents of the <body> Tag  here

Angular CLI

But when we see the output we don’t see this loading right so somehow the index.html file is changed so when we see the <app-root> </app-root> this is  not the default tag for the html instead it is one of the components. So where does the application start? If you look at the main.ts this is the First code which gets executed looking at the main.ts code,

  1.  import { enableProdMode } from '@angular/core';  
  2. import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';  
  3.   
  4. import { AppModule } from './app/app.module';  
  5. import { environment } from './environments/environment';  
  6.   
  7. if (environment.production) {  
  8. enableProdMode();  
  9. }  
  10.   
  11. platformBrowserDynamic().bootstrapModule(AppModule)  
  12. .catch(err => console.log(err));  

When we see this file it has some important statements if we look at the following line

Angular CLI

This code creates the browser platform for dynamic compilation and starts the module whichever is passed as an argument to the bootstrapModule () it sets up the execution environment.

In our case the we are bootstrapping the module AppModule Which is present at the

Src>> app.module.ts when we see the code it is like,

  1. import {  
  2.     BrowserModule  
  3. } from '@angular/platform-browser';  
  4. import {  
  5.     NgModule  
  6. } from '@angular/core';  
  7. import {  
  8.     AppComponent  
  9. } from './app.component';  
  10. @NgModule({  
  11.     declarations: [  
  12.         AppComponent  
  13.     ],  
  14.     imports: [  
  15.         BrowserModule  
  16.     ],  
  17.     providers: [],  
  18.     bootstrap: [AppComponent]  
  19. })  
  20. export class AppModule {}  

It has the decorator like @NgModule and declarations statement and one thing which is needed for bootstrap is the bootstrap array which contains the [Appcomponent] which is been imported from the ‘./app.component’

Again Moving to the Appcomponent from the ‘./app.component’  Appcomponent we can see the code

  1. import { Component } from '@angular/core';  
  2.   
  3. @Component({  
  4.    selector: 'app-root',  
  5.    templateUrl: './app.component.html',  
  6.    styleUrls: ['./app.component.css']  
  7. })  
  8. export class AppComponent {  
  9.    title = 'we are in the app component';  
  10. }  

Here we can see the Decorator @Component which contains the selector property which assigns the string value to the selector which is ‘app-root’ which is the same text we used in the index.html. This is the part which will be needed by the Angular to replace the part in the index.html with the template of the component which has selector ‘app-root’ which has the templateURL of the ‘app.component.html.’ So completing the flow we can imagine the flow will be somewhat like below diagram .Angular CLI

To sum up, this is how the angular project gets started

  1. ts is the entry point as its name suggests it starts the browser platform for executing and compiling the application
  2. It loads the AppModule which again contains the bootstrap component array
  3. AppModule loads the AppComponent and along with the selectors and templateURL it serves the html
  4. Finally the template/template URL associated with the component gets loaded with the index.html

Note

Node_Module is removed from the source code beacause of the size of the source code  makes sure we are installing the node packages before running this project.

This was all about the Bootstrapping the Angular application and loading the first component. In the next article we will see the component and its details.


Similar Articles