Pengenalan kepada kaedah menggunakan kilang dan perkhidmatan dalam AngularJS_AngularJS

AngularJS menyokong konsep "pemisahan kebimbangan" dalam seni bina menggunakan perkhidmatan. Perkhidmatan ialah fungsi JavaScript dan bertanggungjawab untuk melakukan hanya satu tugas tertentu. Ini juga menjadikan mereka entiti yang berasingan untuk penyelenggaraan dan ujian. Pengawal, penapis boleh memanggilnya sebagai asas untuk keperluan. Perkhidmatan disuntik biasanya menggunakan mekanisme suntikan kebergantungan AngularJS.

AngularJS menyediakan banyak perkhidmatan intrinsik, seperti: $http, $route, $window, $location, dll. Setiap perkhidmatan bertanggungjawab untuk tugas tertentu, contohnya $http digunakan untuk membuat panggilan AJAX untuk mendapatkan data daripada pelayan. $route digunakan untuk menentukan maklumat penghalaan, dsb. Perkhidmatan terbina dalam sentiasa diawali dengan tanda $.

Terdapat dua cara untuk mencipta perkhidmatan.

1. Kilang
2. Perkhidmatan

Gunakan kaedah kilang

Menggunakan kaedah kilang, kami mula-mula menentukan kilang dan kemudian menetapkan kaedah kepadanya.

   var mainApp = angular.module("mainApp", []);
   mainApp.factory('MathService', function() {   
     var factory = {}; 
     factory.multiply = function(a, b) {
      return a * b 
     }
     return factory;
   }); 

Gunakan kaedah servis

Menggunakan kaedah perkhidmatan, kami mentakrifkan perkhidmatan dan kemudian menetapkan kaedah. Juga menyuntik perkhidmatan yang sudah tersedia.

mainApp.service('CalcService', function(MathService){
  this.square = function(a) { 
 return MathService.multiply(a,a); 
 }
});

Contoh

Contoh berikut akan menunjukkan semua arahan di atas.
testAngularJS.html

  



  
AngularJS Sample Application
  

   
Enter a number: 
   X2
   
Result: {{result}}
  
  
  <script>
   var mainApp = angular.module(&quot;mainApp&quot;, []);
   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) {
      $scope.square = function() {
      $scope.result = CalcService.square($scope.number);
     }
   });
  </script>

Keputusan

Buka textAngularJS.html dalam penyemak imbas web anda. Lihat hasilnya di bawah.