Dependency Injection in AngularJS

Key Concepts

Dependency Injection (DI) in AngularJS is a design pattern that allows you to inject dependencies into your components, services, and controllers. This pattern promotes modularity, testability, and maintainability of your code. The key concepts include:

• Providers
• Factories
• Services
• Values
• Constants
• Injecting Dependencies

1. Providers

Providers are the most configurable type of dependency in AngularJS. They are used to create services that can be configured before they are used. Providers are defined using the provider method and can be configured using the config method.

Example:

        app.provider('myProvider', function() {
            var configValue = 'default';
            this.setConfigValue = function(value) {
                configValue = value;
            };
            this.$get = function() {
                return {
                    getConfigValue: function() {
                        return configValue;
                    }
                };
            };
        });

        app.config(function(myProviderProvider) {
            myProviderProvider.setConfigValue('configured');
        });

        app.controller('MyController', function(myProvider) {
            console.log(myProvider.getConfigValue()); // Output: configured
        });
    

Think of providers as blueprints for services. Before the service is built, you can configure it to meet specific requirements, just like adjusting the settings on a blueprint before construction begins.

2. Factories

Factories are used to create and return objects or functions. They are defined using the factory method and are often used to encapsulate reusable logic. Factories are instantiated only when they are needed.

Example:

        app.factory('myFactory', function() {
            return {
                sayHello: function() {
                    return 'Hello from Factory!';
                }
            };
        });

        app.controller('MyController', function(myFactory) {
            console.log(myFactory.sayHello()); // Output: Hello from Factory!
        });
    

Consider factories as toolboxes. When you need a specific tool (object or function), you open the toolbox (factory) and take out what you need. The toolbox is only opened when required.

3. Services

Services are singleton objects that are instantiated once per application. They are defined using the service method and are often used to share data or functionality across different parts of the application.

Example:

        app.service('myService', function() {
            this.sayHello = function() {
                return 'Hello from Service!';
            };
        });

        app.controller('MyController', function(myService) {
            console.log(myService.sayHello()); // Output: Hello from Service!
        });
    

Think of services as shared resources in a company. Just as a single HR department serves all employees, a service in AngularJS serves all parts of the application, ensuring consistency and efficiency.

4. Values

Values are simple objects or primitives that can be injected into controllers, services, or other values. They are defined using the value method and are useful for storing configuration data or constants.

Example:

        app.value('myValue', 'Hello from Value!');

        app.controller('MyController', function(myValue) {
            console.log(myValue); // Output: Hello from Value!
        });
    

Consider values as sticky notes with important information. You can place these notes (values) anywhere in your application, and they will always provide the same information when needed.

5. Constants

Constants are similar to values but cannot be modified. They are defined using the constant method and are useful for storing immutable configuration data or constants.

Example:

        app.constant('myConstant', 'Hello from Constant!');

        app.controller('MyController', function(myConstant) {
            console.log(myConstant); // Output: Hello from Constant!
        });
    

Think of constants as engraved plaques. Once they are set, they cannot be changed, ensuring that the information remains consistent and reliable throughout the application.

6. Injecting Dependencies

Injecting dependencies in AngularJS is the process of providing the necessary services, factories, values, or constants to a component. This is done using the dependency injection mechanism, which automatically resolves and injects the dependencies.

Example:

        app.controller('MyController', function($scope, myService, myValue) {
            $scope.message = myService.sayHello();
            $scope.value = myValue;
        });
    

Consider dependency injection as a delivery service. When you need a package (dependency), you simply request it, and the delivery service (AngularJS DI) ensures it is delivered to you, ready for use.