Creating the Component in Angular:
----------------------------------
- Simple Typescript class called as Component.
- Component Acting as interface between "Presentation Layer" and "Business
Processing Layer".
*********************************
firstApp
src
app
first.component.ts
first.component.html
app.module.ts
index.html
**********************************
first.component.ts
------------------
import { Component } from "@angular/core";
@Component({
selector : "first-app",
templateUrl:"./first.component.html"
})
export class FirstComponent{
private sub_one:string;
private sub_two:string;
private sub_three:string;
constructor(){
this.sub_one = "Angular6";
this.sub_two = "NodeJS";
this.sub_three = "MongoDB";
}
public getSubOne():string{
return this.sub_one;
}
public getSubTwo():string{
return this.sub_two;
}
public getSubThree():string{
return this.sub_three;
}
}
first.component.html
--------------------
<h1 style="color:red">{{getSubOne()}}</h1>
<h1 style="color:green">{{getSubTwo()}}</h1>
<h1 style="color:blue">{{getSubThree()}}</h1>
index.html
----------
----
----
----
----
<body>
<first-app></first-app>
</body>
-----
-----
-----
-----
app.module.ts
--------------
import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { AppComponent } from "./app.component";
import { FirstComponent } from "./first.component";
@NgModule({
declarations:[AppComponent,FirstComponent],
imports:[BrowserModule],
providers:[],
bootstrap:[FirstComponent]
})
export class AppModule{
}
- Component is the predefined class in angular and avaialble
in @angular/core package.
- Component class used to convert the TypeScript Standards to
Equalent HTML Standards.
- Using the Predefined classes with the "@" symbol called as
Decorator
- "selector" is the predefined json key used to define the
custom HTML Element.
- "templateUrl" is the predefined json key used to define the
external template to the component.
- "export" is the keyword in Typescript, used to export the
classes,functions, json objects,.....
- {{}} (expressions) used to display the result in templates.
- "index.html" file called as main template in angular project.
- we must call the "selector" in "index.html" file.
- As a angular developer we can create the objects to angular
applications.
- Angular Framework will create the Objects to the Angular Applications
with the help of "app.module.ts"
- "app.module.ts" file called as configuration file.
- "app.module.ts" file used to register the components,directives,
services,pipes,....
- "BrowserModule" is the predefined module in angular.
- "BrowserModule" supports the execution of angular applications in browser.
- "NgModule" is the Predefined Module used to create the modules
in angular applications.
- "declarations" is the array used to register the components,pipes
and directives,.....
- "imports" is the array used to register the modules.
- "providers" is the array used to register the services.
- "bootstrap" is the array used to bootstrap the particular component
in angular application.
----------------------------------
- Simple Typescript class called as Component.
- Component Acting as interface between "Presentation Layer" and "Business
Processing Layer".
*********************************
firstApp
src
app
first.component.ts
first.component.html
app.module.ts
index.html
**********************************
first.component.ts
------------------
import { Component } from "@angular/core";
@Component({
selector : "first-app",
templateUrl:"./first.component.html"
})
export class FirstComponent{
private sub_one:string;
private sub_two:string;
private sub_three:string;
constructor(){
this.sub_one = "Angular6";
this.sub_two = "NodeJS";
this.sub_three = "MongoDB";
}
public getSubOne():string{
return this.sub_one;
}
public getSubTwo():string{
return this.sub_two;
}
public getSubThree():string{
return this.sub_three;
}
}
first.component.html
--------------------
<h1 style="color:red">{{getSubOne()}}</h1>
<h1 style="color:green">{{getSubTwo()}}</h1>
<h1 style="color:blue">{{getSubThree()}}</h1>
index.html
----------
----
----
----
----
<body>
<first-app></first-app>
</body>
-----
-----
-----
-----
app.module.ts
--------------
import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { AppComponent } from "./app.component";
import { FirstComponent } from "./first.component";
@NgModule({
declarations:[AppComponent,FirstComponent],
imports:[BrowserModule],
providers:[],
bootstrap:[FirstComponent]
})
export class AppModule{
}
- Component is the predefined class in angular and avaialble
in @angular/core package.
- Component class used to convert the TypeScript Standards to
Equalent HTML Standards.
- Using the Predefined classes with the "@" symbol called as
Decorator
- "selector" is the predefined json key used to define the
custom HTML Element.
- "templateUrl" is the predefined json key used to define the
external template to the component.
- "export" is the keyword in Typescript, used to export the
classes,functions, json objects,.....
- {{}} (expressions) used to display the result in templates.
- "index.html" file called as main template in angular project.
- we must call the "selector" in "index.html" file.
- As a angular developer we can create the objects to angular
applications.
- Angular Framework will create the Objects to the Angular Applications
with the help of "app.module.ts"
- "app.module.ts" file called as configuration file.
- "app.module.ts" file used to register the components,directives,
services,pipes,....
- "BrowserModule" is the predefined module in angular.
- "BrowserModule" supports the execution of angular applications in browser.
- "NgModule" is the Predefined Module used to create the modules
in angular applications.
- "declarations" is the array used to register the components,pipes
and directives,.....
- "imports" is the array used to register the modules.
- "providers" is the array used to register the services.
- "bootstrap" is the array used to bootstrap the particular component
in angular application.
No comments:
Post a Comment