I'm completely new to AngularJS and fairly new to JavaScript. I have a question about the example shown in a tutorial:
// Creates values or objects on demand
angular.module("myApp") // Retrieves the "myApp" module from root.js (which injects the "serviceModule" service)
.value("testValue", "AngularJS Udemy")
// Defines a factory named "courseFactory" which takes in testValue as input
.factory("courseFactory", function(testValue) {
// The factory creates a JSON object called "courseFactory";
var courseFactory = {
'courseName': testValue, // Injected value
'author': 'Tuna Tore',
getCourse: function(){ // A function within a JSON object
alert('Course: ' + this.courseName); // Call a function within the object
}
};
return courseFactory; // Returns the created JSON object
})
// Controller named "factoryController" injections $scope service and the "courseFactory" factory:
.controller("factoryController", function($scope, courseFactory) {
alert(courseFactory.courseName); // Pop-up with courseName from factory
$scope.courseName = courseFactory.courseName;
console.log(courseFactory.courseName);
courseFactory.getCourse(); // Second alert message
});
The concept is clear: create an angular module for my application called myApp. Then define a value, a factory (which returns a courseFactory JSON object), and finally a controller that uses the factory.
What's unclear to me is the syntax of these component declarations.
It seems like the syntax follows this pattern:
angular.module("myApp").value(VALUE DECLARATION).factory("courseFactory", function(testValue) { RETURN THE JSON OBJECT IMPLEMENTING THE FACTORY }).controller("factoryController", function($scope, courseFactory) { IMPLEMENT THE CONTROLLER });
My question is: why are all these components (the value declaration, factory implementation, and controller implementation) chained together using "."?
What does this "." mean exactly?
I believe it's adding a field to an object or something similar, but it's confusing to me.
Initially, there's the angular object (is it an object?) to which the module("myApp") component is added (making sense since it adds a module to Angular).
Then a value is added as a property of this module, which also makes sense as it adds a value to a specific module.
But why then add a factory as a field of this value, followed by adding the controller as a field of this factory?
I feel like I'm missing something.
What am I missing? How does the AngularJS component definition really work?