How to generate a service using the Angular CLI?
A service can be a value, function, or feature that can be used by any component in the Angular application. Like any other class, the service performs a well-defined and specific task and ensures code reusability. Angular components handle data binding between the view and application logic. Services don’t take part in building the application logic. Instead, they can be used for tasks like input validation and retrieving information from the server. Angular uses dependency injection to give access to services to different app components.
Syntax
Two files are generated to implement any service using the CLI (command line interface). The my-service.service.ts file has the following syntax.
import { Injectable } from '@angular/core';@Injectable({providedIn:'root'})export class MyServiceService {constructor() { }}
Lines 1–5: For a service to be available to a component in the application, it should be made available to the dependency injection system. We do this by importing the
Injectibledecorator, where@Injectibledefines a class as a service and registers it with the root injector usingprovidedIn:'root'. With this, we create a single shared instance of the service, which can be used by any component class.Lines 6–8: Here,
export class MyServiceServiceensures that the service class can be imported into other components. We can implement our logic here.
The file below, called my-service.service.spec.ts, is created by the CLI. This file is used for testing services.
import { TestBed } from '@angular/core/testing';import { MyServiceService } from './my-service.service';describe('MyServiceService', () => {let service: MyServiceService;beforeEach(() => {TestBed.configureTestingModule({});service = TestBed.inject(MyServiceService);});it('should be created', () => {expect(service).toBeTruthy();});});
Lines 1–2: These lines import the
TestBedtesting utility for unit testing and the service we create—MyServiceService.Lines 4–10: Here,
describe('MyServiceService', () => {})defines a test suite calledMyServiceServiceusing the Jasmine library. Thelet service: MyServiceService;part stores an instance of the service, while thebeforeEachfunction in Jasmine is executed before each test case.TestBed.configureTestingModuleconfigures the test module, whileTestBed.injectinjects the service inside the test case.Lines 12–14: In this line, Jasmine’s
expectfunction checks whether theMyServiceServiceservice has been created.
What is the Angular CLI?
The Angular CLI runs commands for creating and maintaining components, services, etc.
The following command can be run to install the Angular CLI. Press “Run” and paste the following command in the terminal to install the Angular CLI.
npm install -g @angular/cli --interactive=false
Using the Angular CLI to generate services
The following command creates a new service in our Angular application. Run the terminal below and paste the command given below to generate a service. Change the service_name to whatever you want.
ng generate service service_name
Next, enter the following command, and you’ll be able to see that your service files exist in the /home/angular/src/app folder.
ls src/app/
First, create the service, then check whether it has been created.
The following code shows how MyServiceService is used inside the app component.
import { Component } from '@angular/core';import { MyServiceService } from './my-service.service';@Component({selector: 'educative-app',templateUrl: './app.component.html',styleUrls: ['./app.component.css']})export class AppComponent {app_title:string;heading_name:string;hero_body_text:string;register_service_text:string;constructor(private myService:MyServiceService){this.app_title = 'educative_app';this.heading_name = this.myService.heading_name;this.hero_body_text = this.myService.hero_body_text;this.register_service_text = this.myService.register_service_text;}}
Lines 1–2: In these lines, we make the imports, i.e., the
Componentdecorator and theMyServiceServiceclass.Lines 4–8: The
@Componentdefines the metadata for the component, whiletemplateUrlandstyleUrlstell which HTML files and style sheets, respectively, are associated with this component. Theeducative-appselector can be used to incorporate this component in the HTML files.Lines 9–13: These lines define the
Appcomponentclass and all its string variables.Lines 15–19: The
constructorruns and initializes the values of this component’s variables with those from the service class, whileprivate myService:MyServiceServiceperforms a dependency injection and injects an instance ofMyServiceServiceinto the app component.
<!DOCTYPE html><HTML><body><div class="center_content"><img src="./assets/images/educative_logo.png"><p class = "app_main_heading">{{ hero_body_text }}</p><div style="width:30px; height:30px;"></div><p class = "app_sub_heading">{{ register_service_text }}</p></div></body></HTML><router-outlet></router-outlet>
The code above is the template file associated with the app component. It demonstrates how the app component’s data is utilized inside the HTML file. The template expression {{ hero_body_text }} is for displaying the value of the hero_body_text property from the AppComponent class in the HTML file.
Click the “Run’’ button to see how dependency injection is used to display text on the landing page of the Angular application. It might take some time to get the server up and running.
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
const routes: Routes = [];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
Free Resources
