AngularJS-서비스

AngularJS는 서비스 아키텍처를 사용하여 우려 사항 분리 개념을 지원합니다. 서비스는 특정 작업 만 수행하는 JavaScript 함수입니다. 이를 통해 유지 관리 및 테스트가 가능한 개별 개체가됩니다. 컨트롤러와 필터는 요구 사항에 따라이를 호출 할 수 있습니다. 서비스는 일반적으로 AngularJS의 종속성 주입 메커니즘을 사용하여 주입됩니다.

AngularJS는 많은 내장 서비스를 제공합니다. 예를 들어, $ http, $ route, $ window, $ location 등입니다. 각 서비스는 $ http와 같은 특정 작업을 담당합니다. $ http는 서버 데이터를 가져 오기 위해 ajax 호출을 만드는 데 사용되며 $ route는 라우팅 정보 등. 내장 된 서비스는 항상 $ 기호로 시작됩니다.

서비스를 생성하는 방법에는 두 가지가 있습니다.

Factory
Service

공장 방법 사용

이 방법에서는 먼저 공장을 정의한 다음 여기에 방법을 할당합니다.

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);
   }
});

예

다음 예제는 위에서 언급 한 모든 지시문의 사용을 보여줍니다-

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>

산출

웹 브라우저에서 testAngularJS.htm 파일을 열고 결과를 확인합니다.