What are $provider, $injector, and $provide in AngularJS?

AngularJS has a powerful dependency injection (DI) system that manages how components (controllers, services, etc.) receive dependencies. The three key components of this system are $provider, $injector, and $provide.

---

1. $provider – The Root of Dependency Injection

• What is it?
  $provider is a built-in AngularJS service provider factory that helps define how services, constants, and values are created.
• Where is it used?
  It is mainly used during the configuration phase (.config()) of an AngularJS module.
• Purpose:
  • It is the base for all AngularJS services.
  • Allows customizing service behavior before the app runs.
  • Each service has its own provider ($httpProvider, $routeProvider, etc.).

Example of $provider

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

app.config(function ($provide) {
    $provide.provider("customService", function () {
        this.$get = function () {
            return {
                message: "Hello from custom service!"
            };
        };
    });
});

Explanation:

• $provide.provider() defines a new service provider.
• The $get function returns the actual service instance.

---

2. $injector – The Dependency Injection Manager

• What is it?
  $injector is the AngularJS dependency injection container responsible for retrieving services, controllers, and factories when needed.
• Where is it used?
  • It is available throughout the app to manually fetch dependencies.
  • Used internally by AngularJS to resolve dependencies.
• Purpose:
  • Loads and injects dependencies into functions.
  • Can manually retrieve services if needed.

Example of $injector

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

app.controller("MainController", function ($scope, $injector) {
    var $http = $injector.get("$http"); // Manually fetch $http service

    $http.get("https://jsonplaceholder.typicode.com/posts/1")
        .then(function (response) {
            $scope.data = response.data;
        });
});

Explanation:

• $injector.get("$http") manually retrieves the $http service.
• Normally, services are injected automatically, but $injector allows on-demand retrieval.

---

3. $provide – Creating Services, Factories, and Values

• What is it?
  $provide is a service registration API that creates new services, factories, and constants inside an AngularJS module.
• Where is it used?
  • Used inside .config() to register services before the app starts.
• Purpose:
  • Defines different types of dependencies (factory, service, value, etc.).
  • Allows modular and reusable service definitions.

Example of $provide.factory()

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

app.config(function ($provide) {
    $provide.factory("dataService", function () {
        return {
            getData: function () {
                return "Hello from dataService!";
            }
        };
    });
});

app.controller("MainController", function ($scope, dataService) {
    $scope.message = dataService.getData();
});

Explanation:

• $provide.factory() creates a factory service.
• The service returns an object with a getData() method.
• The controller injects dataService to display data.

---

Key Differences Between $provider, $injector, and $provide

Feature	$provider	$injector	$provide
Purpose	Defines and configures services before runtime.	Manages dependency injection, retrieves services dynamically.	Registers services, factories, and values.
Used In	.config() phase only.	Available throughout the app.	.config() phase only.
Creates Services?	Yes	No	Yes
Retrieves Services?	No	Yes	No
Example	$provide.provider("myService", function() {...})	$injector.get("myService")	$provide.factory("myService", function() {...})

---

When to Use What?

Scenario	Use $provider	Use $injector	Use $provide
Defining a new service with configuration options	Yes	No	Yes
Retrieving a service manually at runtime	No	Yes	No
Registering a simple factory or value service	No	No	Yes