Post
Ask Question

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>
WorkFlow Of Angular Application Using VS Code And Node.JS
 

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.
 
WorkFlow Of Angular Application Using VS Code And Node.JS
 

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:
 
WorkFlow Of Angular Application Using VS Code And Node.JS
 
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.
WorkFlow Of Angular Application Using VS Code And Node.JS
 

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:
  1. Export class AppComponent{  
  2.    Title: string= “WorkFlow”;  
  3. }  
Metadata
 
Metadata is a decorator that has defined with a decorator.
 
Example
  1. @Component({  
  2.     Selector: ”App - Root”,  
  3.     TemplateUrls: ”. / app / Appcomponent.html”  
  4. });  
  5. Export class AppComponent {  
  6.     Title: String = ”Chaman Gautam”  
  7. }  

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.
 
WorkFlow Of Angular Application Using VS Code And Node.JS 
 
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
  1. <!doctype html>    
  2. <html lang="en">    
  3. <head>    
  4.   <meta charset="utf-8">    
  5.   <title>Creativity</title>    
  6.   <base href="/">    
  7.   <meta name="viewport" content="width=device-width, initial-scale=1">    
  8.   <link rel="icon" type="image/x-icon" href="favicon.ico">    
  9. </head>    
  10. <body>    
  11. <app-root></app-root>    
  12. </body>    
  13. </html>    
Main.ts 
  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.error(err));  
Module.ts
  1. import { BrowserModule } from '@angular/platform-browser';  
  2. import { NgModule } from '@angular/core';  
  3.   
  4. import { AppComponent } from './app.component';  
  5. import{ SlickCarouselModule } from 'ngx-slick-carousel';  
  6. @NgModule({  
  7.   declarations: [  
  8.     AppComponent  
  9.   ],  
  10.   imports: [  
  11.     BrowserModule,SlickCarouselModule  
  12.   ],  
  13.   providers: [],  
  14.   bootstrap: [AppComponent]  
  15. })  
  16. export class AppModule { }  
Appcomponent.ts
  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.     
  10. }  
Appcomponent.html
  1. <br>    
  2. <br>    
  3. <fieldset>    
  4.    <h2>WorkFlow of angular</h2>    
  5. </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,

WorkFlow Of Angular Application Using VS Code And Node.JS
I hope you enjoyed this article. To learn more technologies, follow C# corner and like and comment on my article.


Similar Articles