Dependency Injection in AngularJS, AngularJS Dependency Injection with Example

<!DOCTYPE html>
<html>
	<head>
    	<title>AngularJS Dependency Injection</title>
		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
    </head>
	
    <body>
	
		 <h2>AngularJS Sample Application</h2>
		  <div ng-app = "mainApp" ng-controller = "CalcController">
			 <p>Enter a number: <input type = "number" ng-model = "number" /></p>
			 <button ng-click = "square()">X<sup>2</sup></button>
			 <p>Result: {{result}}</p>
		  </div>
		  
		  <script type="text/javascript">
			 var mainApp = angular.module("mainApp", []);
			 
			 mainApp.config(function($provide) {
				$provide.provider('MathService', function() {
				   this.$get = function() {
					  var factory = {};
					  
					  factory.multiply = function(a, b) {
						 return a * b;
					  }
					  return factory;
				   };
				});
			 });
	 
			 mainApp.value("defaultInput", 3);
			 
			 mainApp.factory('MathService', function() {
				var factory = {};
				
				factory.multiply = function(a, b) {
				   return a * b;
				}
				return factory;
			 });
			 
			 mainApp.service('CalcService', function(MathService){
				this.square = function(a) {
				   return MathService.multiply(a,a);
				}
			 });
			 
			 mainApp.controller('CalcController', function($scope, CalcService, defaultInput) {
				$scope.number = defaultInput;
				$scope.result = CalcService.square($scope.number);
	 
				$scope.square = function() {
				   $scope.result = CalcService.square($scope.number);
				}
			 });
	 
		  </script>
        
    </body>
</html>

Output :

Topic : AngularJS Dependency Injection