How exactly works this AngularJS factory example? Some doubts

Question

I am absolutly new in AngularJS and I am studying it on a tutorial. I have a doubt related the use of the factory in Angular.

I know that a factory is a pattern used to create objects on request.

So in the example there is the following code:

// Creates values or objects on demand
angular.module("myApp")     // Get the "myApp" module created into the root.js file (into this module is injected the "serviceModule" service
.value("testValue", "AngularJS Udemy")

// Define a factory named "courseFactory" in which is injected the testValue
.factory("courseFactory", function(testValue) {
    // The factory create a "courseFactory" JSON object;
    var courseFactory = {
            'courseName': testValue,    // Injected value
            'author': 'Tuna Tore',
             getCourse: function(){     // A function is a valid field of a JSON object
             alert('Course: ' + this.courseName);   // Also the call of another function
            }
          };    
    return courseFactory;       // Return the created JSON object
})

// Controller named "factoryController" in which is injected the $scope service and the "courseFactory" factory:
.controller("factoryController", function($scope, courseFactory) {
    alert(courseFactory.courseName);        // When the view is shown first show a popupr retrieving the courseName form the factory
    $scope.courseName = courseFactory.courseName;
    console.log(courseFactory.courseName);
    courseFactory.getCourse();  // Cause the second alert message
});

And this is the code, associated to this factoryController controller, inside the HTML page:

<div  ng-controller="factoryController"> 
    {{ courseName }} 
</div>

So it is pretty clear for me that:

The factoryController use the courseFactory factory because is is injected
The first thing that happen when I open the page is that an alert mesage is shown because it is called the:
```
alert(courseFactory.courseName);
```
Then put into the $scope.courseName property (inside the $scope object) the value of the **courseName field of the courseFactory JSON object).

And here my first doubt. I have that the factory is defined by:

.factory("courseFactory", function(testValue)

that I think it means (correct me if I am doing wrong assertion) that my factory is named courseFactory and basically is a function that retutn the courseFactory JSON object.

So this is creating me some confusion (I came from Java) because in Java I call a factory class and I obtain an instance of an object created by the factory. But in this case it seems to me that doing:

$scope.courseName = courseFactory.courseName;

it seems to me that the courseName is retrieved directly by the courseFactory JSON object and I am not using the courseFactory.

How it exactly works? Why I am not calling some getter on the factory? (or something like this)

I'd recommend to read up on answers of this question http://stackoverflow.com/a/28262966/2435473 — Pankaj Parkar, Dec 12 '15 at 17:52

score 2 · Accepted Answer · answered Dec 12 '15 at 17:57

To simplify things There are two known methods to create functions ( and methods ) that are Usable among all states ( consider it as creating a function in global scope ) , these are factory and service.

you may want to read this first Factory vs Service

it seems to me that the courseName is retrieved directly by the courseFactory JSON object and I am not using the courseFactory.

Actually this is partially true , as Angular use DI concept ( depency injection ) , you will have to inject your factory ( which by default returns an object , and corresponding functions as attributes ) , case you don't ; you will not be able to use your factory object methods.

Angular is not magic , it is just most people don't realize the most basic concepts of JavaScript , specially Developers coming from different programming environment such as C# , C++ , or Java

Infact I am here for this reason...because I am used to reasoning in pure OO paradigm...I alwais used JavaScript\JQuery inside webapp in simple way and now for the first time I am studying deeply the JavaScript paradigm — AndreaNobili, Dec 12 '15 at 19:42
I would recommend you read a book called JavaScript Succinctly by Cody Lindley , which will make your trip with JavaScript much more fun , and easy .. good luck :). — ProllyGeek, Dec 12 '15 at 21:28

score 1 · Answer 2 · answered Dec 12 '15 at 17:50

Easy.

When you return the courseFactory object in the factory statement, the injected courseFactory in the controller becomes THAT object. Therefore, when you do $scope.courseName = courseFactory.courseName; in the controller, you are actually referencing to the returned object that is injected into the controller as courseFactory. So you don't need a getter, because the courseFactory in your controller is already the object. You can do a console.log(courseFactory); in your controller to see what the courseFactory is. Hope this helps.

score 1 · Answer 3 · answered Dec 12 '15 at 17:50

When an Angular application starts with a given application module, Angular creates a new instance of injector, which in turn creates a registry of recipes as a union of all recipes defined in the core "ng" module, application module and its dependencies. The injector then consults the recipe registry when it needs to create an object for your application.

Ref. https://docs.angularjs.org/guide/providers

score 1 · Answer 4 · answered Dec 12 '15 at 17:57

1

Factory is a Singleton service. When you inject the factory in the controller or in any other factory, u get the exact json object which u have defined. It will not create any new instance every time you call it. Factory is initialized only once

answered Dec 12 '15 at 17:57

Upasana

51
1
5

How exactly works this AngularJS factory example? Some doubts

4 Answers4