{"id":8188,"date":"2025-04-04T05:30:59","date_gmt":"2025-04-04T05:30:59","guid":{"rendered":"https:\/\/studysection.com\/blog\/?p=8188"},"modified":"2025-04-04T05:50:49","modified_gmt":"2025-04-04T05:50:49","slug":"understanding-the-factory-pattern-in-angular-angularjs-with-examples","status":"publish","type":"post","link":"https:\/\/studysection.com\/blog\/understanding-the-factory-pattern-in-angular-angularjs-with-examples\/","title":{"rendered":"Understanding the Factory Pattern in Angular\/AngularJS with Examples"},"content":{"rendered":"

The Factory Pattern is a creational design pattern widely used in software<\/a> development to
\nprovide an interface for creating instances of a class or a family of classes without specifying
\ntheir concrete implementations. In the context of Angular and AngularJS<\/a>, this Pattern is
\nparticularly useful for creating and managing instances of services or objects in a modular and
\nmaintainable way.<\/p>\n

What is the Factory Pattern?<\/strong><\/p>\n

This Pattern involves defining an interface for creating objects but letting the subclasses
\nalter the type of objects that will be created. In Angular, this pattern is commonly implemented
\nusing Angular services and providers.<\/p>\n

Example Scenario:<\/strong><\/p>\n

Let’s consider a scenario where we have a messaging application that supports different types of
\nmessaging services such as Email, SMS, and Push Notifications. Each messaging service has its
\nown implementation details, but they all share a common interface.<\/p>\n

1. Create a Common Interface:<\/strong>
\n\/\/ messaging.service.ts
\nexport interface MessagingService {
\nsendMessage(message: string): void;
\n}<\/code><\/p>\n

2. Implement Concrete Classes:<\/strong><\/p>\n

\/\/ email.service.ts
\nimport { MessagingService } from '.\/messaging.service';
\nexport class EmailService implements MessagingService {
\nsendMessage(message: string): void {
\nconsole.log(`Sending email: ${message}`);
\n}
\n}<\/code><\/p>\n

\/\/ sms.service.ts
\nimport { MessagingService } from '.\/messaging.service';
\nexport class SMSService implements MessagingService {
\nsendMessage(message: string): void {
\nconsole.log(`Sending SMS: ${message}`);
\n}
\n}<\/code>
\n\/\/ push-notification.service.ts
\nimport { MessagingService } from '.\/messaging.service';
\nexport class PushNotificationService implements MessagingService {
\nsendMessage(message: string): void {
\nconsole.log(`Sending push notification: ${message}`);
\n}
\n}<\/code><\/p>\n

3. Create a Factory:<\/strong><\/p>\n

\/\/ messaging-factory.service.ts
\nimport { Injectable } from '@angular\/core';
\nimport { EmailService } from '.\/email.service';
\nimport { SMSService } from '.\/sms.service';
\nimport { PushNotificationService } from '.\/push-notification.service';
\nimport { MessagingService } from '.\/messaging.service';
\n@Injectable({
\nprovidedIn: 'root',
\n})
\nexport class MessagingFactoryService {
\ncreateMessagingService(type: string): MessagingService {
\nswitch (type) {
\ncase 'email':
\nreturn new EmailService();
\ncase 'sms':
\nreturn new SMSService();<\/code><\/p>\n

case 'push':
\nreturn new PushNotificationService();
\ndefault:
\nthrow new Error(`Unsupported messaging service type: ${type}`);
\n}
\n}
\n}<\/code><\/p>\n

4. Usage in Angular Component:<\/strong><\/p>\n

\/\/ messaging.component.ts
\nimport { Component } from '@angular\/core';
\nimport { MessagingFactoryService } from '.\/messaging-factory.service';
\n@Component({
\nselector: 'app-messaging',
\ntemplate: `
\n<div>
\n<button (click)=\"sendMessage('email')\">Send Email<\/button>
\n<button (click)=\"sendMessage('sms')\">Send SMS<\/button>
\n<button (click)=\"sendMessage('push')\">Send Push Notification<\/button>
\n<\/div>
\n`,
\n})<\/code>
\nexport class MessagingComponent {
\nconstructor(private messagingFactory: MessagingFactoryService) {}
\nsendMessage(type: string): void {
\nconst messagingService = this.messagingFactory.createMessagingService(type);
\nmessagingService.sendMessage('Hello, Factory Pattern!');
\n}
\n}<\/code><\/p>\n

Conclusion:<\/strong><\/p>\n

In this example, the Factory Pattern is employed to create instances of different messaging
\nservices without the client code knowing the specific implementation details. This enhances
\nmodularity, maintainability, and flexibility in managing different messaging services in an
\nAngular application. By leveraging the Factory Pattern, developers can easily extend the
\napplication with new messaging services in the future without modifying existing code.<\/p>\n","protected":false},"excerpt":{"rendered":"

The Factory Pattern is a creational design pattern widely used in software development to provide an interface for creating instances<\/p>\n","protected":false},"author":1,"featured_media":8190,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[],"acf":[],"yoast_head":"\nUnderstanding the Factory Pattern in Angular\/AngularJS<\/title>\n<meta name=\"description\" content=\"The Factory Pattern is a creational design pattern widely used in software development to provide an interface for creating instances...\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/studysection.com\/blog\/understanding-the-factory-pattern-in-angular-angularjs-with-examples\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Understanding the Factory Pattern in Angular\/AngularJS\" \/>\n<meta property=\"og:description\" content=\"The Factory Pattern is a creational design pattern widely used in software development to provide an interface for creating instances...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/studysection.com\/blog\/understanding-the-factory-pattern-in-angular-angularjs-with-examples\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog Posts on famous people, innovations and educational topics\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/studysection\" \/>\n<meta property=\"article:published_time\" content=\"2025-04-04T05:30:59+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-04T05:50:49+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2025\/04\/Add-a-subheading-45.png\" \/>\n\t<meta property=\"og:image:width\" content=\"940\" \/>\n\t<meta property=\"og:image:height\" content=\"788\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"admin-studysection-blog\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@studysection\" \/>\n<meta name=\"twitter:site\" content=\"@studysection\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin-studysection-blog\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/studysection.com\/blog\/understanding-the-factory-pattern-in-angular-angularjs-with-examples\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/studysection.com\/blog\/understanding-the-factory-pattern-in-angular-angularjs-with-examples\/\"},\"author\":{\"name\":\"admin-studysection-blog\",\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/person\/db367e2c29a12d1808fb1979edb3d402\"},\"headline\":\"Understanding the Factory Pattern in Angular\/AngularJS with Examples\",\"datePublished\":\"2025-04-04T05:30:59+00:00\",\"dateModified\":\"2025-04-04T05:50:49+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/studysection.com\/blog\/understanding-the-factory-pattern-in-angular-angularjs-with-examples\/\"},\"wordCount\":225,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/studysection.com\/blog\/#organization\"},\"articleSection\":[\"Learn and Grow\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/studysection.com\/blog\/understanding-the-factory-pattern-in-angular-angularjs-with-examples\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/studysection.com\/blog\/understanding-the-factory-pattern-in-angular-angularjs-with-examples\/\",\"url\":\"https:\/\/studysection.com\/blog\/understanding-the-factory-pattern-in-angular-angularjs-with-examples\/\",\"name\":\"Understanding the Factory Pattern in Angular\/AngularJS\",\"isPartOf\":{\"@id\":\"https:\/\/studysection.com\/blog\/#website\"},\"datePublished\":\"2025-04-04T05:30:59+00:00\",\"dateModified\":\"2025-04-04T05:50:49+00:00\",\"description\":\"The Factory Pattern is a creational design pattern widely used in software development to provide an interface for creating instances...\",\"breadcrumb\":{\"@id\":\"https:\/\/studysection.com\/blog\/understanding-the-factory-pattern-in-angular-angularjs-with-examples\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/studysection.com\/blog\/understanding-the-factory-pattern-in-angular-angularjs-with-examples\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/studysection.com\/blog\/understanding-the-factory-pattern-in-angular-angularjs-with-examples\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/studysection.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Understanding the Factory Pattern in Angular\/AngularJS with Examples\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/studysection.com\/blog\/#website\",\"url\":\"https:\/\/studysection.com\/blog\/\",\"name\":\"Blog Posts on famous people, innovations and educational topics\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/studysection.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/studysection.com\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/studysection.com\/blog\/#organization\",\"name\":\"StudySection\",\"url\":\"https:\/\/studysection.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/10\/studySection-logo.png\",\"contentUrl\":\"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/10\/studySection-logo.png\",\"width\":920,\"height\":440,\"caption\":\"StudySection\"},\"image\":{\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/studysection\",\"https:\/\/twitter.com\/studysection\",\"https:\/\/www.instagram.com\/study.section\/\",\"https:\/\/www.linkedin.com\/company\/studysection\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/person\/db367e2c29a12d1808fb1979edb3d402\",\"name\":\"admin-studysection-blog\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/054ac87a6874df1932004239cd8eab36?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/054ac87a6874df1932004239cd8eab36?s=96&d=mm&r=g\",\"caption\":\"admin-studysection-blog\"},\"url\":\"https:\/\/studysection.com\/blog\/author\/admin-studysection-blog\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Understanding the Factory Pattern in Angular\/AngularJS","description":"The Factory Pattern is a creational design pattern widely used in software development to provide an interface for creating instances...","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/studysection.com\/blog\/understanding-the-factory-pattern-in-angular-angularjs-with-examples\/","og_locale":"en_US","og_type":"article","og_title":"Understanding the Factory Pattern in Angular\/AngularJS","og_description":"The Factory Pattern is a creational design pattern widely used in software development to provide an interface for creating instances...","og_url":"https:\/\/studysection.com\/blog\/understanding-the-factory-pattern-in-angular-angularjs-with-examples\/","og_site_name":"Blog Posts on famous people, innovations and educational topics","article_publisher":"https:\/\/www.facebook.com\/studysection","article_published_time":"2025-04-04T05:30:59+00:00","article_modified_time":"2025-04-04T05:50:49+00:00","og_image":[{"width":940,"height":788,"url":"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2025\/04\/Add-a-subheading-45.png","type":"image\/png"}],"author":"admin-studysection-blog","twitter_card":"summary_large_image","twitter_creator":"@studysection","twitter_site":"@studysection","twitter_misc":{"Written by":"admin-studysection-blog","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/studysection.com\/blog\/understanding-the-factory-pattern-in-angular-angularjs-with-examples\/#article","isPartOf":{"@id":"https:\/\/studysection.com\/blog\/understanding-the-factory-pattern-in-angular-angularjs-with-examples\/"},"author":{"name":"admin-studysection-blog","@id":"https:\/\/studysection.com\/blog\/#\/schema\/person\/db367e2c29a12d1808fb1979edb3d402"},"headline":"Understanding the Factory Pattern in Angular\/AngularJS with Examples","datePublished":"2025-04-04T05:30:59+00:00","dateModified":"2025-04-04T05:50:49+00:00","mainEntityOfPage":{"@id":"https:\/\/studysection.com\/blog\/understanding-the-factory-pattern-in-angular-angularjs-with-examples\/"},"wordCount":225,"commentCount":0,"publisher":{"@id":"https:\/\/studysection.com\/blog\/#organization"},"articleSection":["Learn and Grow"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/studysection.com\/blog\/understanding-the-factory-pattern-in-angular-angularjs-with-examples\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/studysection.com\/blog\/understanding-the-factory-pattern-in-angular-angularjs-with-examples\/","url":"https:\/\/studysection.com\/blog\/understanding-the-factory-pattern-in-angular-angularjs-with-examples\/","name":"Understanding the Factory Pattern in Angular\/AngularJS","isPartOf":{"@id":"https:\/\/studysection.com\/blog\/#website"},"datePublished":"2025-04-04T05:30:59+00:00","dateModified":"2025-04-04T05:50:49+00:00","description":"The Factory Pattern is a creational design pattern widely used in software development to provide an interface for creating instances...","breadcrumb":{"@id":"https:\/\/studysection.com\/blog\/understanding-the-factory-pattern-in-angular-angularjs-with-examples\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/studysection.com\/blog\/understanding-the-factory-pattern-in-angular-angularjs-with-examples\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/studysection.com\/blog\/understanding-the-factory-pattern-in-angular-angularjs-with-examples\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/studysection.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Understanding the Factory Pattern in Angular\/AngularJS with Examples"}]},{"@type":"WebSite","@id":"https:\/\/studysection.com\/blog\/#website","url":"https:\/\/studysection.com\/blog\/","name":"Blog Posts on famous people, innovations and educational topics","description":"","publisher":{"@id":"https:\/\/studysection.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/studysection.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/studysection.com\/blog\/#organization","name":"StudySection","url":"https:\/\/studysection.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/studysection.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/10\/studySection-logo.png","contentUrl":"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/10\/studySection-logo.png","width":920,"height":440,"caption":"StudySection"},"image":{"@id":"https:\/\/studysection.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/studysection","https:\/\/twitter.com\/studysection","https:\/\/www.instagram.com\/study.section\/","https:\/\/www.linkedin.com\/company\/studysection"]},{"@type":"Person","@id":"https:\/\/studysection.com\/blog\/#\/schema\/person\/db367e2c29a12d1808fb1979edb3d402","name":"admin-studysection-blog","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/studysection.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/054ac87a6874df1932004239cd8eab36?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/054ac87a6874df1932004239cd8eab36?s=96&d=mm&r=g","caption":"admin-studysection-blog"},"url":"https:\/\/studysection.com\/blog\/author\/admin-studysection-blog\/"}]}},"views":125,"_links":{"self":[{"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/posts\/8188"}],"collection":[{"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/comments?post=8188"}],"version-history":[{"count":6,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/posts\/8188\/revisions"}],"predecessor-version":[{"id":8195,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/posts\/8188\/revisions\/8195"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/media\/8190"}],"wp:attachment":[{"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/media?parent=8188"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/categories?post=8188"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/tags?post=8188"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}