Angular Service என்றால் என்ன?

service என்பது ஒரு component-ல் இருந்து மறறொரு component-க்கு data-வை அனுப்ப உதவுகிறது.

முதலில் service-யை create செய்ய வேண்டும்.நான் Add Operation பண்ணுவதற்காக சேவை create பண்ணுகிறேன்.

Services Command:
ng g s service_name

ex:

ng g s Addition





இந்த command-யை கொடுத்த உடன் கீழே கொடுக்கப்பட்டுள்ள இந்த இரண்டு service file உருவாக்கப்படும்.

CREATE src/app/addition.service.spec.ts 

CREATE src/app/addition.service.ts 

addition.service.ts:
import { Injectable } from '@angular/core';



 @Injectable({     //@Injectable() decorator->இந்த keyword இருந்தால் தான் நீங்கள் எழுதிய service-யை மற்ற component-ல் பயன்படுத்த முடியும்.இல்லையென்றால்,பயன்படுத்த முடியாது.

  providedIn: 'root'

})

export class AdditionService {



  constructor() { }



  add(First:any,Second:any):number

  {

    return parseInt(First)+parseInt(Second);

  }

}

இங்கு add என்பது method ஆகும்.இதனுள் இரண்டு parameter கொடுக்கப்படுகிறது.இந்த இரண்டு parameter-ம் any என்ற data type ஆகும்.
parseInt என்பது கொடுக்கின்ற மதிப்பை integer-ஆக convert செய்வது ஆகும்.
மேலே (First:any,Second:any) என்று கொடுத்து இருப்பதால் அதனை integer-ஆக convert செய்யும்.பிறகு,இரண்டு மதிப்பையும் add செய்து number type-ஆக return செய்யும்.


நீங்கள் உருவாக்கிய service-யை app.module.ts-இல் register செய்ய வேண்டும்.

app.module.ts:

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import {FormsModule} from '@angular/forms'; 

import { AppRoutingModule } from './app-routing.module';

import { AppComponent } from './app.component';

import { AddFivePipe } from './add-five.pipe';

import { FirstComponent } from './first/first.component';

import{AdditionService} from './addition.service';





@NgModule({

  declarations: [

    AppComponent,

    AddFivePipe,

    FirstComponent

  ],

  imports: [

    BrowserModule,

    AppRoutingModule,

    FormsModule 

  ],



  providers: [AdditionService],

  

  bootstrap: [AppComponent]



})

export class AppModule { }

எந்த component-ல் தேவைப்படுகிறதோ அந்த component-ல் service-யை import செய்ய வேண்டும்.
என்னிடம் first என்ற component உள்ளது.இந்த first என்ற component உள்ளே தான் நான் உருவாக்கிய service-யை பயன்படுத்த போகிறேன்.

Constructor-ல் inject செய்ய வேண்டும்.

first.component.ts:

import { Component, OnInit } from '@angular/core';

import { AdditionService } from '../addition.service';



@Component({

  selector: 'app-first',

  templateUrl: './first.component.html',

  styleUrls: ['./first.component.css']

})

export class FirstComponent implements OnInit {



  constructor(private _addition:AdditionService) //private என்பது keyword ஆகும்._addition என்பது object ஆகும்.AdditionService என்பது class name ஆகும்.

   { } 
                                                   
 
                                                     
  ngOnInit() {

  }

  

  FirstNumber:number=0; //இந்த FirstNumber என்பது [(ngModel)]-ல் இருக்கும் FirstNumber-யை குறிக்கின்றது.


  SecondNumber:number=0;

  result:number=0;



addNumber():void{

this.result=this._addition.add(this.FirstNumber,this.SecondNumber)

}

}

this._addition என்பது AdditionService-யை குறிக்கின்றது.அங்கு இருக்கும் add() method-க்கு value அனுப்பப்படுகிறது.

add() method-ல் இருக்கும் logic-ன் படி இரண்டு மதிப்பையும் கூட்டி நமக்கு number type-ல் ஒரு மதிப்பை return செய்கிறது.
இந்த return செய்யப்படும் மதிப்பானது this.result-ல் சேமிக்கப்படுகிறது.
இந்த this.result-ல் இருக்கும் மதிப்பை தான் நாம் இங்கே {{result}} காண்பிக்கப்படுகிறது.

first.component.html:


First Value: <input type='text' [(ngModel)]="FirstNumber">



Second Value: <input type='text' [(ngModel)]="SecondNumber">


<button (click)="addNumber()">Add</button>


{{result}}

OUTPUT:

இங்கே இரண்டு text box மற்றும் ஒரு button இருக்கிறது.button-யை click செய்யும்போது இரண்டு text box-இல் இருக்கும் மதிப்பை add செய்து அதனை result-ன் உதவியால் display செய்யப்படுகிறது.