Posted in .NetCore, Angular, Angular CLI, Angular5

Application startup and Introduction to 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 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

1

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.

2

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.

4

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

 {{title}}

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

import {Component} from ‘@angular/core’;

@Component({
selector: ‘app-root’,
templateUrl: ‘./app.component.html’,
styleUrls: [‘./app.component.css’]
})
export class AppComponent {
title = ‘we are in the app component’;
}

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

5.jpg

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 Tag  here

6

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 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,

import { enableProdMode } from ‘@angular/core’;
import { platformBrowserDynamic } from ‘@angular/platform-browser-dynamic’;

import { AppModule } from ‘./app/app.module’;
import { environment } from ‘./environments/environment’;

if (environment.production) {
enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.log(err));

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

7

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,

import { BrowserModule } from ‘@angular/platform-browser’;
import { NgModule } from ‘@angular/core’;
import { AppComponent } from ‘./app.component’;
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule],
providers: [],
bootstrap: [AppComponent]
})
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

import { Component } from ‘@angular/core’;

@Component({
selector: ‘app-root’,
templateUrl: ‘./app.component.html’,
styleUrls: [‘./app.component.css’]
})
export class AppComponent {
title = ‘we are in the app component’;
}

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 .

8.PNG

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

ts is the entry point as its name suggests it starts the browser platform for executing and compiling the application
It loads the AppModule which again contains the bootstrap component array
AppModule loads the AppComponent and along with the selectors and templateURL it serves the html
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.

Author:

Tech lead with Mumbai based organization having 6 years of experience in Mostly in ASP.Net C# SQL Server, Angular , .Net Core. Blogger, Author and awarded DZone MVB and C# Corner MVP this year. You can reach me to Mangesh.g@outlook.com or 9960286737 On My Mobile

One thought on “Application startup and Introduction to Components

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s