Scribd
Upload
25 views

Angular Application WorkFlow

Uploaded by

Sai Tehith
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
25 views

Angular Application WorkFlow

Uploaded by

Sai Tehith
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 9

Introduction

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

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:

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.

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,

You might also like