AngularJs: Modules and Dependency Injection

AngularJS has a built-in dependency injection mechanism. using AngularJS you can divide your applications into multiple types of components and register them with angular's injector, later when you need these components You can request them and the injector will inject them where they are needed.

Module

modules can be thought of as containers that can encapsulate different components of an angular application.

you can use modules to implement modularization, this means the division of the application code into separate components and it allows for code reuse, easier configuration and testing.

var appModule = angular.module("appModule", []);

Dependencies Between Modules

sometimes we need to use the componenets of one module in another. In order to do so, a module needs to declare a dependency on the module which contains the needed components.
Below we are creating a module called appModule and giving it a value called numberVal.
we need the numberVal of appModule in our second module called depModule. when we create depModule we pass the dependency on appModule into the constructor as an array. this array can contain all the dependencies that depModule has on other components of an angular application.

var appModule = angular.module("appModule", []);

appModule.value("numberVal",123);


var depModule = angular.module("depModule", ['appModule']);

depModule.controller("depController", function($scope,numberVal) {
    
   this.val = numberVal;
});

Value

A value in AngularJS can be a simple object, a number or a string. 
Values are usually used for configuration and are injected into factories, services or controllers.

A value has to belong to an AngularJS module. To define a value we call the value() function on the module and, The first parameter is the name of the value, and the second parameter is the value itself. 

var appModule = angular.module("appModule", []);

appModule.value("numberVal", 123);

appModule.value("stringVal", "xyz");

appModule.value("objectVal", { prop1 : 123, prop2: "abc"} );

Factory

Factories allow you to configure a function that returns an object which can be then injected into controllers. Here, the game parameter to the controller is injected and matched to the game factory, which returns an object with a title attribute.

var appModule = angular.module("appModule", []);

appModule.factory("appFactory", function() {
    return 123;
});


appModule.controller("appController", function($scope, appFactory) {

    //prints 123
    console.log(appFactory);

});

in the above example, it is not the factory function that is injected, but the value returned by the factory function.

Service

Angular services are objects that You can use to organize and share common functionality across your app.
Services are lazily instantiated meaning that Angular only instantiates them when an application component depends on it.
angular services are also Singletons meaning that Each component dependent on a service gets a reference to the single instance generated by the service factory.

function appService() {
    this.doIt = function() {
        console.log("done");
    }
}

var appModule = angular.module("appModule", []);

appModule.service("appService", appService);