Is it possible to generate multiple services from a single factory in Angular?

Recently, I developed a service called tableService using the following code:

app.factory('tableService', [function() {
   var data = some data;

   var foo = function (){
      //do something to data here
   };

   return {
      data: data,
      foo: foo
   }
}]);

Now, I am looking to create another service that mirrors the properties of tableService so that I can leverage its functionality with a different dataset.

Is there a way I can achieve this without duplicating the code for each service by doing something like:

app.factory('tableService', 'secondService', [function() {


}]);

This would help streamline the process and avoid repeating code unnecessarily. Any suggestions?

Answer №1

To utilize a local object definition, simply create a new instance from it using the method getInstance.

 app.factory('tableService', [function() {
   var data = some information;

   MyService(){
       // code ...
       this.data = data;
   }

   MyService.prototype.bar = function(){
       // code ...
   }


   function newInstance(){
       return new MyService();
   }


   return {
      getInstance: newInstance,
   }
}]);

How to create instances :

var tableInstanceA = tableService.getInstance();
var tableInstanceB = tableService.getInstance();

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Designing a layout for a chat application that is structured from the bottom up

I'm currently in the process of designing a web application for a chat platform. I have access to an API that provides a list of messages: chatsite.com/api/thread/1/messages/ [ { "id": 2, "sender": { "id": 2, ...

What is the best way to darken the background when an alert is displayed and disable the dimming effect when the alert is closed?

Here's the JavaScript snippet I'm using: reset.addEventListener("click", function(){ document.querySelector("#body").classList.add("darkenPage"); myReset(); alert("Reset Successful!!"); document.querySelector("#body").classList.re ...

Converting JSON to Array: A Step-by-Step Guide

Greetings, StackOverflow community! This is my inaugural question here. I believe the answer is not overly complex, but my knowledge of Javascript is quite rudimentary. Currently, I have a JQuery AJAX function that processes this JSON object: { "Users" ...

Tips for incorporating a favicon in a React application

Having trouble adding a favicon to my React application. I followed the instructions in this post, but it's not working for me. I placed the favicon.ico file inside the public folder where index.html resides. This is how my directory structure looks ...

Variables in an Angular application are not appearing in the HTML rendering

Currently learning AngularJS as I develop a web application. After going through tutorials, I started with a basic list but am baffled as to why my browser only shows {{title}}. In my app.js module, here's the snippet where I defined the controller: ...

What is the best method for arranging drop-down menu options in alphabetical order?

Is there a way to organize the options alphabetically in the dropdown menu of Material-UI? I understand that arrays can be sorted easily using arr.sort(). However, when I try const options = [...].sort(), I still see unsorted values in the dropdown menu. ...

The versatility of an Angular route's dynamic page

In my Angular 1.3 project, I am exploring the concept of dynamic routing. This approach is similar to what has been discussed in articles like this one and here. The examples provided suggest configuring routes like this: $routeProvider.when('/:group ...

What is the common approach for directing a setState Redux action?

I am looking to streamline my state update actions in multiple react-redux reducers by creating a general setState action. This will allow me to have consistent syntax for dispatching both local and redux scope updates. For local updates, I would use this. ...

Arranging an array of objects in Javascript based on the first attribute, and in cases of equality, sorting with another attribute

I have an array structured like this: let myarr = [{id:1 , name: "mark" , birthday: "1990-08-18"}, {id:2 , name: "fred" , birthday: "1990-08-17"}, {id:3 , name: "franck" , birthday: "1990-08-16"}, ...

Error: Unable to access the property 'fontSize' as it is undefined

<!DOCTYPE HTML> <html> <head> <title>Interactive Web Page</title> <link id="mycss" rel="stylesheet" href="mycss.css"> <script> function resizeText(size) { va ...

Troubleshooting: Issue with Bootstrap 4 navbar toggle button functionality

Is it possible to manually control the opening and hiding of the navbar when the toggle button is clicked in bootstrap 4? Currently, my navbar automatically opens and closes when clicking the toggle button. Any suggestions on how to modify this behavior wo ...

Error Loading JQuery: The function $() is not recognized in the Shopify platform

I seem to be overlooking something obvious. I am using Shopify and have included jQuery in the head section of the theme.liquid file: <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> This script is placed rig ...

Is there a way to make the fixed table header scroll along with the table body data?

I am facing an issue with my table where I have multiple columns. I have managed to fix the table header successfully, however, when I scroll horizontally through the table body columns, the header remains fixed and does not move accordingly. How can I res ...

Angular login/signup modal/dialog component for seamless user authentication

Currently, I am working on adding a login/signin dialog to my app similar to the one used by Medium. After doing extensive research online, I have decided to use the $modal from angular ui-bootstrap for this. Can anyone please recommend a tutorial that wil ...

What is the best method for sending the revised table information back to the server?

I have a table of data on a website that is dynamically populated using AngularJS: <table class="table table-bordered table-striped"> <thead> <tr> <th>Service</th> <th>Rate Type</t ...

Unable to modify the state of data in Vue.js

After developing a weather app, I implemented some components with fields in the data section. However, when I changed the value of these fields in the methods section and attempted to access them in another method, I discovered that the old values were be ...

Display a message indicating no data is available if the specified text is not found within the div

In the code snippet below, there is an input element followed by a div containing multiple child elements: <input type="text" onkeyup="filter()" id="filter_data"> <div id="body"> <div class="child"> Text 1 </div> <div class ...

Troubleshooting problems with AJAX function in the .each() loop

My webpage showcases a grid layout with 16 blocks arranged in 4 columns and 4 rows. As you scroll to the bottom of the page, an AJAX function dynamically loads another set of 16 blocks each time. To enhance user experience, I wanted to implement a smooth ...

What is the alternative to using this.$parent.$emit in Vue 3?

Recently, my application has been upgraded to Vue 3. Following the migration, my linter flagged a deprecation error that is documented at this link: . The documentation provides guidance on replacing this.$emit with the mitt library, however, it does not ...

What causes the Invariant Violation: Invariant Violation: Maximum update depth exceeded error to occur when using setState()?

Looking for some help with this component: // here are the necessary imports export default class TabViewExample extends Component { state = { index: 0, routes: [ { key: 'first', title: 'Drop-Off', selected: true }, ...