The Factory Pattern is a creational design pattern widely used in software development to
provide an interface for creating instances of a class or a family of classes without specifying
their concrete implementations. In the context of Angular and AngularJS, this Pattern is
particularly useful for creating and managing instances of services or objects in a modular and
maintainable way.
What is the Factory Pattern?
This Pattern involves defining an interface for creating objects but letting the subclasses
alter the type of objects that will be created. In Angular, this pattern is commonly implemented
using Angular services and providers.
Example Scenario:
Let’s consider a scenario where we have a messaging application that supports different types of
messaging services such as Email, SMS, and Push Notifications. Each messaging service has its
own implementation details, but they all share a common interface.
1. Create a Common Interface:
// messaging.service.ts
export interface MessagingService {
sendMessage(message: string): void;
}
2. Implement Concrete Classes:
// email.service.ts
import { MessagingService } from './messaging.service';
export class EmailService implements MessagingService {
sendMessage(message: string): void {
console.log(`Sending email: ${message}`);
}
}
// sms.service.ts
import { MessagingService } from './messaging.service';
export class SMSService implements MessagingService {
sendMessage(message: string): void {
console.log(`Sending SMS: ${message}`);
}
}
// push-notification.service.ts
import { MessagingService } from './messaging.service';
export class PushNotificationService implements MessagingService {
sendMessage(message: string): void {
console.log(`Sending push notification: ${message}`);
}
}
3. Create a Factory:
// messaging-factory.service.ts
import { Injectable } from '@angular/core';
import { EmailService } from './email.service';
import { SMSService } from './sms.service';
import { PushNotificationService } from './push-notification.service';
import { MessagingService } from './messaging.service';
@Injectable({
providedIn: 'root',
})
export class MessagingFactoryService {
createMessagingService(type: string): MessagingService {
switch (type) {
case 'email':
return new EmailService();
case 'sms':
return new SMSService();
case 'push':
return new PushNotificationService();
default:
throw new Error(`Unsupported messaging service type: ${type}`);
}
}
}
4. Usage in Angular Component:
// messaging.component.ts
import { Component } from '@angular/core';
import { MessagingFactoryService } from './messaging-factory.service';
@Component({
selector: 'app-messaging',
template: `
<div>
<button (click)="sendMessage('email')">Send Email</button>
<button (click)="sendMessage('sms')">Send SMS</button>
<button (click)="sendMessage('push')">Send Push Notification</button>
</div>
`,
})
export class MessagingComponent {
constructor(private messagingFactory: MessagingFactoryService) {}
sendMessage(type: string): void {
const messagingService = this.messagingFactory.createMessagingService(type);
messagingService.sendMessage('Hello, Factory Pattern!');
}
}
Conclusion:
In this example, the Factory Pattern is employed to create instances of different messaging
services without the client code knowing the specific implementation details. This enhances
modularity, maintainability, and flexibility in managing different messaging services in an
Angular application. By leveraging the Factory Pattern, developers can easily extend the
application with new messaging services in the future without modifying existing code.
