English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
AngularJS는 서비스 아키텍처의 주요 관점 분리 개념을 지원합니다. 서비스는 JavaScript 함수로, 특정 작업을 수행하는 것에 대한 책임을 가집니다. 이는 유지보수와 테스트 가능한 단일 엔티티로 만듭니다. 컨트롤러와 필터는 필요에 따라 그들을 호출할 수 있습니다. 일반적으로 AngularJS의 의존성 주입 메커니즘을 통해 서비스를 주입합니다.
AngularJS는 많은 내장 서비스를 제공합니다. 예를 들어, $http, $route, $window, $location 등이 있습니다. 각 서비스는 특정 작업을 담당합니다. 예를 들어, $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);
}});이 예제는 위에 설명된 모든 지시의 사용을 보여줍니다-
<html>
<head>
<title>Angular JS 서비스</title>
<script src = "https://cdn.staticfile.org/angular.js/1.3.14/angular.min.js">
</script>
</head>
<body>
<h2>AngularJS 서비스(Service) 응용 프로그램 예제 </h2>
<div ng-app = "mainApp" ng-controller = "CalcController">
<p>숫자를 입력하세요: <input type = "number" ng-model = "number" />/p>
<button ng-click = "square()">X<sup>2</sup>/button>
<p>결과: {{result}}</p>/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결과를 확인하세요。