WorkFlow of Angular Application using VS Code and Node.JS

Introduction

This article shows how angular applications work with their components and modules. The following diagram shows the process of an Angular application.

WorkFlow Of Angular Application Using VS Code And Node.JS

There are a few basic steps that tell us how Angular applications perform their work. In a normal Angular application, we have 1 Index.html, Module, Component, Main. These are the most important parts of Angular application.

Why use index.html in an Angular application?

The Index.html file is an important file for every angular application. Because when the user hits “localhost: 4200” on browser then angular run index.html file. The index.html file has contained a selector of a component. The selector is registered in the body tag in the index file.

Example

<body>

<app-root></app-root>

</body>

What is the process of a Main.ts file in your Angular application?

Main.ts file is an important part of Angular Application, Angular application can’t work without Main.ts file. In Angular application has only one Main.ts file. The Main.ts file has a Bootstrap Section. The Bootstrap section has registered a Module, which the user wants to execute first.

What is the work of Module in Angular Application?

The module is the third most important part of an Angular application. The module is a user-dependent part. That means that users have the right to add several Modules in your Application. The Module contains a few sections. Those are very important in Angular Applications. The user has to import all components, modules, and Services in the Module. These Sections are:

Declarations:[]

The declarations section is used for registered all components.

Example:

Declarations: [AppComponent

Imports:[]

Imports are used to import all Modules that the user wants to add in the Angular Application.

Example

Imports:[ FormsModule, BrowserModule

]

Providers:[]

Providers are used to register all Services used in the Application.

Example

Providers:[ UserService, LoginService,

]

Bootstrap:[]

Bootstrap is used to register the component that the User wants to display first on the Browser.

Example

Bootstrap:[ AppComponent]

Why we used Component in Angular?

A component is a logical part of an Angular Application. The component has contained Template, Class, and Metadata.

Template

The template also includes directives and Binding. The template is used to render one view to another view in Angular Application. That contains the Html code that is used to rendering one view to another view in Angular Application. The user uses two types of templates in a Component.

Template:” ”

In the template, we have to write HTML code.

Example

Template: ‘ <html>

Hello world

</html>’

TemplateUrls:” ”

In TemplateUrls, we define the path of the HTML component.

Example

TemplateUrls: ’ ./app/AppComponent’

Class

Class contains Property and methods. Class is defined in Typescript. The class has the following syntax:

Export class AppComponent{
Title: string= “WorkFlow”;
}

Metadata

Metadata is a decorator that has defined with a decorator.

Example

@Component({
Selector: ”App - Root”,
TemplateUrls: ”. / app / Appcomponent.html”
});
Export class AppComponent {
Title: String = ”Chaman Gautam”
}

Why we use HtmlComponent in Angular

Angular Applications use HtmlComponent for the design application, such as Design Form, etc. Angular supports a few HTML tags. In other words, we can say that Angular supports some HTML, but not all.

This is how all components and module work together:

Step 1

When the user hits “Localhost:4200” on browser then browser run index.html file. Then in Index.html file, check the selector name to see which is presented in the Index.html file

Step 2

After checking the Selector name, it will be called/executed in the Main.ts file. It then checks which Module is registered in Main.ts. Then it calls to the Registered Module.

Step 3

After calling the Module, it will check how many components are registered in this module. Then it checks which component is registered in the Bootstrap.

Step 4

Then it will check the registered component. Then it will check the Selector name because each component has an associated Selector name.

Step 5

Then it will find the Selector name. It will display which component selector is registered in the index.html file. The component is run on the Index.html

Example

index.html

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Creativity</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
</html>

Main.ts

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.error(err));

Module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import{ SlickCarouselModule } from 'ngx-slick-carousel';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,SlickCarouselModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

Appcomponent.ts

import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
}

Appcomponent.html

<br>
<br>
<fieldset>
<h2>WorkFlow of angular</h2>
</fieldset>

Now compile this example by "ng serve". And after Compilation, run the project on the browser to hits " localhost:4200". After run this project output will display like,

I hope you enjoyed this article. To learn more technologies, follow C# corner and like and comment on my article.

8 Comments

Join the conversation! Your thoughts help the community grow.

Vijender Akula1y ago
Nice article yexplained well
Palanisamy A6y ago
I do have one question... the output/screenshot shows "hello appcomponent" but nowhere in any of the source file that text is found. From where does "hello appcomponent" come from?
- Chaman Gautam6y ago
  You can see the appcomponent.html file which I show am show in the foam of image. Because I will give this sentence in the appcomponent.html.
Palanisamy A6y ago
Good article.
jubula samal6y ago
This is beautiful
- Chaman Gautam6y ago
  Thanks dear
Dipa Mehta6y ago
Nice article Chaman.. on Angular app and Node.js...
- Chaman Gautam6y ago
  Thankyou dear