AngularJS - Injeksi Ketergantungan

Dependency Injection adalah desain perangkat lunak di mana komponen diberikan dependensinya alih-alih mengkodekannya secara keras di dalam komponen. Ini mengurangi komponen dari menemukan dependensi dan membuat dependensi dapat dikonfigurasi. Ini juga membantu dalam membuat komponen dapat digunakan kembali, dipelihara, dan dapat diuji.

AngularJS menyediakan mekanisme Injeksi Ketergantungan tertinggi. Ini menyediakan komponen inti berikut yang dapat disuntikkan satu sama lain sebagai dependensi.

Value
Factory
Service
Provider
Constant

Nilai

Value adalah objek JavaScript sederhana, yang diperlukan untuk meneruskan nilai ke controller selama fase config (fase config adalah ketika AngularJS melakukan bootstrap itu sendiri).

//define a module
var mainApp = angular.module("mainApp", []);

//create a value object as "defaultInput" and pass it a data.
mainApp.value("defaultInput", 5);
...

//inject the value in the controller using its name "defaultInput"
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);
   }
});

Pabrik

Pabrik adalah fungsi yang digunakan untuk mengembalikan nilai. Ini menciptakan nilai sesuai permintaan setiap kali layanan atau pengontrol membutuhkannya. Biasanya menggunakan fungsi pabrik untuk menghitung dan mengembalikan nilainya.

//define a module
var mainApp = angular.module("mainApp", []);

//create a factory "MathService" which provides a method multiply to return multiplication of two numbers
mainApp.factory('MathService', function() {
   var factory = {};
   
   factory.multiply = function(a, b) {
      return a * b
   }
   return factory;
}); 

//inject the factory "MathService" in a service to utilize the multiply method of factory.
mainApp.service('CalcService', function(MathService) {
   this.square = function(a) {
      return MathService.multiply(a,a);
   }
});
...

Layanan

Layanan adalah objek JavaScript tunggal yang berisi sekumpulan fungsi untuk melakukan tugas tertentu. Layanan didefinisikan menggunakan fungsi service () dan kemudian dimasukkan ke dalam pengontrol.

//define a module
var mainApp = angular.module("mainApp", []);
...

//create a service which defines a method square to return square of a number.
mainApp.service('CalcService', function(MathService) {
   this.square = function(a) {
      return MathService.multiply(a,a); 
   }
});

//inject the service "CalcService" into the controller
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);
   }
});

Pemberi

Penyedia digunakan oleh AngularJS secara internal untuk membuat layanan, pabrik, dll. Selama fase konfigurasi. Script berikut dapat digunakan untuk membuat MathService yang telah kita buat sebelumnya. Penyedia adalah metode pabrik khusus dengan metode get () yang digunakan untuk mengembalikan nilai / layanan / pabrik.

//define a module
var mainApp = angular.module("mainApp", []);
...

//create a service using provider which defines a method square to return square of a number.
mainApp.config(function($provide) {
   $provide.provider('MathService', function() {
      this.$get = function() {
         var factory = {};  
         
         factory.multiply = function(a, b) {
            return a * b; 
         }
         return factory;
      };
   });
});

Konstan

Konstanta digunakan untuk melewatkan nilai pada fase config dengan mempertimbangkan fakta bahwa nilai tidak dapat digunakan selama fase config.

mainApp.constant("configParam", "constant value");

Contoh

Contoh berikut menunjukkan penggunaan semua arahan yang disebutkan di atas -

testAngularJS.htm

<html>
   <head>
      <title>AngularJS Dependency Injection</title>
   </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 src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
      </script>
      
      <script>
         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", 5);
         
         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>

Keluaran

Buka testAngularJS.htm di web browser dan lihat hasilnya.