Services
Services are injectable classes that allow us to perform reusable logic. This approach can help keep our components clean and easy to maintain. It is recommended that all HTTP requests and business logic be performed inside a service.
Create a Service
To create a service, we can use the CLI to automatically generate a service file with boilerplate code, or we can manually create a file and write the code from scratch.
The following code is an example of working service code, but it does not yet include any functions.
import { Service } from '@monster-js/core';
@Service()
export class GreetingService {
}
Singleton Service
Services are transient by default. To create a singleton service, we need to pass an optional configuration object to the @Service()
decorator. This object should contain a 'singleton' property that is set to true.
Example.
import { Service } from '@monster-js/core';
@Service({ singleton: true })
export class GreetingService {
}
Register a Service
We need to register a service in a dependency injection container before we can use it.
Example.
// home.di.ts
import { createDIContainer } from "framework";
import { GreetingService } from "./greeting.service";
export const homeDI = createDIContainer('home', [ GreetingService ]);
Inject a Service
To use a service in our component, we can import the dependency injection container we created and use its inject
method to get an instance of the service.
Example.
import { homeDI } from './home.di';
import { GreetingService } from "./greeting.service";
export function App() {
const greetingService = homeDI.inject(GreetingService);
return <h1>App Component</h1>
}
Now we can use the greetingService
in our component.
Inject a Service into a Directive
To inject a service into a directive we can use the same process that we used to inject a service in a component.
Example.
import { homeDI } from './home.di';
import { GreetingService } from "./greeting.service";
export function highlightDirective(element: HTMLElement) {
const greetingService = homeDI.inject(GreetingService);
return element;
}
Injecting a Service into Another Service
To inject a service into another service, we can use the constructor of the service line the following:
import { Service } from '@monster-js/core';
@Service()
export class MessageService {
public getMessage() {
return "Hello World";
}
}
import { Service } from '@monster-js/core';
@Service()
export class GreetingService {
constructor(private messageService: MessageService) {}
public greet() {
console.log(this.messageService.getMessage());
}
}
Both the MessageService
and GreetingService
must be registered in the same dependency injection container for them to work properly.