Angular's counterpart to object prototype

Question

Angular's counterpart to object prototype

I am currently interested in developing an object that can be instantiated at any time and still make use of angular services:

Consider the example object below:

var myObject = function (variableOne, variableTwo) {
    this.variableOne = variableOne;
    this.variableTwo = variableTwo
};

myObject.prototype.useAngularService = function () {
    return $sessionStorage.user;   
};

Obviously, this object cannot directly utilize $sessionStorage. My question is how could you create a similar object that has the ability to leverage angular services?

The main reason for opting for this approach instead of using a service or factory is because I require multiple instances of this object and not a singleton solution.

javascript angularjs

Answer 1

Answer №1

To enhance reusability and modularity, consider implementing a factory function that encapsulates Angular services within its closure.

yourModule.factory('yourName', function($sessionStorage) {
    var myObject = function (variableOne, variableTwo) {
        this.variableOne = variableOne;
        this.variableTwo = variableTwo
    };

    myObject.prototype.useAngularService = function () {
        return $sessionStorage.user;   
    };

    return myObject;
});

An alternative approach is to use $injector.get(...) to access any registered service, although it may introduce fragility in the codebase.

Answer 2

To enhance reusability and modularity, consider implementing a factory function that encapsulates Angular services within its closure.

yourModule.factory('yourName', function($sessionStorage) {
    var myObject = function (variableOne, variableTwo) {
        this.variableOne = variableOne;
        this.variableTwo = variableTwo
    };

    myObject.prototype.useAngularService = function () {
        return $sessionStorage.user;   
    };

    return myObject;
});

An alternative approach is to use $injector.get(...) to access any registered service, although it may introduce fragility in the codebase.

Answer 3

Answer №2

To incorporate the `$sessionStorage` into your object during instantiation, you need to inject it as a dependency:

var customObject = function ($sessionStorage, varOne, varTwo) {
    this.$sessionStorage = $sessionStorage;
    this.varOne = varOne;
    this.varTwo = varTwo
};

customObject.prototype.accessAngularService = function () {
    return this.$sessionStorage.user;   
};

Next, establish a service that serves as a factory for creating these objects:

function customObjectFactory($sessionStorage) {
    this.$sessionStorage = $sessionStorage;
}

customObjectFactory.prototype.createInstance = function (varOne, varTwo) {
    return new customObject(this.$sessionStorage, varOne, varTwo);
};

myModule.service('customObjectFactory', customObjectFactory);

Finally, include this factory as a dependency in your controller or other services:

myModule.controller('myController', function (customObjectFactory) {
    var newObj = customObjectFactory.createInstance(1, 2);
    newObj.accessAngularService();
}

Answer 4

To incorporate the `$sessionStorage` into your object during instantiation, you need to inject it as a dependency:

var customObject = function ($sessionStorage, varOne, varTwo) {
    this.$sessionStorage = $sessionStorage;
    this.varOne = varOne;
    this.varTwo = varTwo
};

customObject.prototype.accessAngularService = function () {
    return this.$sessionStorage.user;   
};

Next, establish a service that serves as a factory for creating these objects:

function customObjectFactory($sessionStorage) {
    this.$sessionStorage = $sessionStorage;
}

customObjectFactory.prototype.createInstance = function (varOne, varTwo) {
    return new customObject(this.$sessionStorage, varOne, varTwo);
};

myModule.service('customObjectFactory', customObjectFactory);

Finally, include this factory as a dependency in your controller or other services:

myModule.controller('myController', function (customObjectFactory) {
    var newObj = customObjectFactory.createInstance(1, 2);
    newObj.accessAngularService();
}

Angular's counterpart to object prototype

Answer №1

Answer №2

Similar questions

Retrieve the input range slider value only after the mouse is released

After updating next.config, the NextJS + NextAuth middleware doesn't seem to be triggered

Incorporate a PHP-generated array into JavaScript

Importing GeoJSON data into Meteor's Leaflet

What is the best method for incorporating dynamic page transitions when navigating between individual pages?

TypeScript integration with Jest mocking

creating arguments that have default values when using the new Function() syntax

Assistance with themed implementation for single-page web applications in JavaScript

Ways to determine if the sender of the message is a part of my mongo database

Oops! Looks like there's a problem with the helper called "if_equal" in Handlebars

Executing the stop button in the browser with Webdriver IO

In Typescript, it is not possible to use generics as a function parameter in a

Conceal form upon submission with jQuery

Is there a way to retrieve a jQuery element from a regular JavaScript selection?

Selenium, scrolling through web pages

The outcomes of my JavaScript code are not aligning with my expectations

Guide: Initiating an action in NuxtJs

Importing files dynamically in JavaScript

Formatting date inputs in AngularJS

Issue with Vue-Validator form validation not functioning properly on JS Fiddle