AngularJS - Layanan

AngularJS mendukung konsep Separation of Concerns menggunakan arsitektur layanan. Layanan adalah fungsi JavaScript, yang bertanggung jawab untuk melakukan tugas tertentu saja. Ini menjadikan mereka entitas individu yang dapat dipelihara dan dapat diuji. Pengontrol dan filter dapat memanggilnya berdasarkan kebutuhan. Layanan biasanya disuntikkan menggunakan mekanisme injeksi ketergantungan AngularJS.

AngularJS menyediakan banyak layanan bawaan. Misalnya, $ http, $ route, $ window, $ location, dll. Setiap layanan bertanggung jawab untuk tugas tertentu seperti $ http digunakan untuk membuat panggilan ajax untuk mendapatkan data server, $ rute digunakan untuk menentukan informasi perutean, dan sebagainya. Layanan inbuilt selalu diawali dengan simbol $.

Ada dua cara untuk membuat layanan -

Factory
Service

Menggunakan Metode Pabrik

Dalam metode ini, pertama-tama kita mendefinisikan pabrik dan kemudian menetapkan metode untuk itu.

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

Menggunakan Metode Layanan

Dalam metode ini, kami mendefinisikan layanan dan kemudian menetapkan metode untuk itu. Kami juga menyuntikkan layanan yang sudah tersedia untuk itu.

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

Contoh

Contoh berikut menunjukkan penggunaan semua arahan yang disebutkan di atas -

testAngularJS.htm

<html>
   <head>
      <title>Angular JS Services</title>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/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>
         var mainApp = angular.module("mainApp", []);
         
         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>
      
   </body>
</html>

Keluaran

Buka file testAngularJS.htm di web browser dan lihat hasilnya.