How To Create Angular 5 and 4 Service?
What Is an Angular Service? Angular service is a class that encapsulates some methods like GET/POST/PUT and provides it result as a service for across your application.
Stayed Informed – Angular 5 and Angular 4 Documents
Features of Service -
ü Service class is decorated with Injectable decorator.
ü Services are singleton objects.
ü Services are capable of returning the data in the form promises or observables.
ü The Injectable decorator is required only if our service class is making use of some Angular injectable like Http, Response and HttpModule service within it
ü And so on.
Angular 5 and 4 Service example -
The following Steps -
ü Steps 1 - Create an Angular Project
ü Steps 2 - Create new service
ü Steps 3 - Import the service in the app components
ü Steps 4 - Use to Imported Service to display in app HTML page
ü Steps 5 - Result
The Result looks like –
Create an Angular Project using the command – “ng new ServiceDemo”
D:\Angular>ng new ServiceDemo
Create new service using the command - “ng new DateService”
D:\Angular\ServiceDemo>ng g service DateService
create src/app/date-service.service.spec.ts (405 bytes)
create src/app/date-service.service.ts (117 bytes)
The above create service commands created two files one for service class and other one is test services class.
ü date-service.service.spec.ts
ü date-service.service.ts
And code class looks like for – “date-service.service.ts”
import { Injectable } from '@angular/core';
@Injectable()
export class DateServiceService {
constructor() { }
//Create a servce method to get today date.
getTodayDate(){
let today = new Date();
return today;
}
}
And code class looks like for – “date-service.service.spes.ts”
import { TestBed, inject } from '@angular/core/testing';
import { DateServiceService } from './date-service.service';
describe('DateServiceService', () => {
beforeEach(() => {
TestBed.configureTestingModule({
providers: [DateServiceService]
});
});
it('should be created', inject([DateServiceService], (service: DateServiceService) => {
expect(service).toBeTruthy();
}));
});
Import the service in the app components and the use to display in the app HTML page.
The code looks like – “app.component.ts”
import { Component } from '@angular/core';
import {DateServiceService} from '../app/date-service.service';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Service App';
todayDate;
constructor(private dateService : DateServiceService){
this.todayDate = dateService.getTodayDate();
}
}
The code looks like – “app.component.html”
<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
<h1>
Welcome to {{title}}!
</h1>
<img width="300" alt="Angular Logo" src="img.png">
</div>
<div>
<h2>Today Is -</h2> {{todayDate}}
</div>
You can also see the video –
I hope you are enjoying with this post! Please share with you friends. Thank you!!
|
Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..
|
