Angular often uses the JavaScript pattern for development

Question

Angular often uses the JavaScript pattern for development

After completing an AngularJS tutorial on http://www.tutorialspoint.com/angularjs/angularjs_services.htm, I found myself puzzled by the method used in the CalcService service. It seemed unclear whether Angular was using revealing prototype or a different approach. The inner function declared within this.square should technically be private and inaccessible outside of the object's context, so I was curious how Angular managed to access it.

mainApp.service('CalcService', function(MathService){
    this.square = function(a) { 
        return MathService.multiply(a,a); 
    }
});

javascript angularjs singleton prototype angularjs-service

Answer 1

Answer №1

An AngularJS service is quite unique in its behavior.

During initialization, it goes through the process of being instantiated with the use of the new keyword. For example:

function CalcService() {
  this.square = function() {
    // perform some square calculation
  };
}

// then in the controller, directive, or any other component,
// it is initialized implicitly as shown above
new CalcService();

However, what sets it apart is that it is instantiated as a singleton, indicating that there's always just one instance of the object, even if attempts are made to reinitialize it within the registering component (refer to my response on singletons in AngularJS for more information).

I'm not entirely sure about your reference to a "revealing prototype pattern," but in the context of an AngularJS service, the this simply signifies the implementation of a non-prototypal method on a standard JavaScript object.

Expanding on the previous example, in typical JavaScript, you could execute new CalcService().square(). It's worth noting that JavaScript doesn't inherently support private methods (although there are techniques for simulating "class" methods that seem confidential.)

var service = new CalcService();

service.square();

There isn't anything technically "private" about that method, much like the methods associated with AngularJS service objects. The closest thing to privacy is that it specifically belongs solely to that particular object by way of utilizing the this keyword.

Answer 2

An AngularJS service is quite unique in its behavior.

During initialization, it goes through the process of being instantiated with the use of the new keyword. For example:

function CalcService() {
  this.square = function() {
    // perform some square calculation
  };
}

// then in the controller, directive, or any other component,
// it is initialized implicitly as shown above
new CalcService();

However, what sets it apart is that it is instantiated as a singleton, indicating that there's always just one instance of the object, even if attempts are made to reinitialize it within the registering component (refer to my response on singletons in AngularJS for more information).

I'm not entirely sure about your reference to a "revealing prototype pattern," but in the context of an AngularJS service, the this simply signifies the implementation of a non-prototypal method on a standard JavaScript object.

Expanding on the previous example, in typical JavaScript, you could execute new CalcService().square(). It's worth noting that JavaScript doesn't inherently support private methods (although there are techniques for simulating "class" methods that seem confidential.)

var service = new CalcService();

service.square();

There isn't anything technically "private" about that method, much like the methods associated with AngularJS service objects. The closest thing to privacy is that it specifically belongs solely to that particular object by way of utilizing the this keyword.

Answer 3

Answer №2

When using the angular service DI method, you pass a constructor function in your example.

In this constructor function, a method is assigned to this.square.

If you try this same approach without Angular, you will notice that it behaves similarly.


function Calculator() {
    this.square = function() {
        console.log('we get here');    
    } 
} 

var calculator = new Calculator();
calculator.square();

This demonstrates Javascript's prototype object-oriented model and showcases plain old OO javascript.

Answer 4

When using the angular service DI method, you pass a constructor function in your example.

In this constructor function, a method is assigned to this.square.

If you try this same approach without Angular, you will notice that it behaves similarly.


function Calculator() {
    this.square = function() {
        console.log('we get here');    
    } 
} 

var calculator = new Calculator();
calculator.square();

This demonstrates Javascript's prototype object-oriented model and showcases plain old OO javascript.

Answer 5

Answer №3

The previous responses have provided a good explanation of how services work, but they have not addressed how the newly created object, referred to as this, is exposed.

When you create a service in Angular, the framework generates a new object of that function for you. This object is returned when the service is injected into a controller, directive, or another service. Internally, Angular uses the prototype of the function to create the this context of the function. Let's take a closer look at the code snippet below to understand how this mechanism works:

function CalcService(){
    //The line below this creates an obj object.
    //obj = Object.create(CalcService.prototype)
    //this = obj;
    //`this` is essentially an instance of the function/CalcService.prototype which grants access to its properties attached to it
    var privateVariableExample = 'test'; //This is a private variable of the service.
    this.square = function(a) {
        //Return multiplication result from here 
    }

    //return this;
}

var objectOfCalcService = new CalcService();
objectOfCalcService.square(1);

Answer 6

The previous responses have provided a good explanation of how services work, but they have not addressed how the newly created object, referred to as this, is exposed.

When you create a service in Angular, the framework generates a new object of that function for you. This object is returned when the service is injected into a controller, directive, or another service. Internally, Angular uses the prototype of the function to create the this context of the function. Let's take a closer look at the code snippet below to understand how this mechanism works:

function CalcService(){
    //The line below this creates an obj object.
    //obj = Object.create(CalcService.prototype)
    //this = obj;
    //`this` is essentially an instance of the function/CalcService.prototype which grants access to its properties attached to it
    var privateVariableExample = 'test'; //This is a private variable of the service.
    this.square = function(a) {
        //Return multiplication result from here 
    }

    //return this;
}

var objectOfCalcService = new CalcService();
objectOfCalcService.square(1);

Angular often uses the JavaScript pattern for development

Answer №1

Answer №2

Answer №3

Similar questions

Determining the file size of an HTML and JavaScript webpage using JavaScript

Enhance your Sails.js model by incorporating a custom instance method as a new property

Bootstrap revamps dropdown menu code into a convoluted mess

Running a Blitz.js api handler triggers a Google Cloud Storage call failure with the message "error:0909006C:PEM routines:get_name:no start line"

A guide on installing a npm dependency module from a local registry domain

What is the purpose of using async/await in Node.js when it is inherently asynchronous, and in JavaScript as well, vice versa?

The function $(this).addClass() seems to be malfunctioning

Easy steps to dynamically add buttons to a div

Issue with JQuery Event Listener on Canvas Subelement not functioning

Adding an HTML element to the DOM in an AngularJS directive without using jQuery

Bootstrap relies on jQuery for its JavaScript functionality, so jQuery must be loaded before using Bootstrap's JavaScript

Creating blank entities with app.post using AngularJS and mongoose in a node.js environment

Exploring the integration of video playback within an Angular-Bootstrap modal upon opening

Issue with setting state in useEffect causing an infinite loop due to either linter warning or user error

What is the best way to extract words from a string within a textarea using javascript?

A guide on customizing the appearance of individual items in a vue v-for loop based on specific conditions

Automatically log out users in AngularJS after a specified period with session timeouts

I am encountering problems with images that are imported as module imports in a Vue.js project

Stopping a velocity.js animation once it has completed: is it possible?

Error: The method specified in $validator.methods[method] does not exist