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)

Answer 1

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