AngularJS 커스텀 지시어 AngularJS 서비스(Service)

AngularJS 의존성 주입

의존성 주입은 컴포넌트에 관련성을 제공하는 소프트웨어 설계입니다. 컴포넌트에 관련성을 직접 코드에编码하지 않고 제공합니다. 이는 컴포넌트가 의존성을 찾지 않게 하고, 의존성을 구성 가능하게 합니다. 또한 컴포넌트를 재사용 가능하게 하고 유지보수 및 테스트를 용이하게 합니다.

AngularJS는 가장 높은 의존성 주입 메커니즘을 제공합니다. 다음 핵심 구성 요소는 의존으로 서로 주입될 수 있습니다.

Value
Factory
Service
Provider
Constant

Value - 값

Value는 간단한 JavaScript 객체로, 설정 단계(AngularJS가 자신을 시작할 때 설정 단계)에서 컨트롤러에 값을 전달해야 합니다.

//모듈 정의
var mainApp = angular.module("mainApp", []);
//값 객체를 'defaultInput'로 생성하고 데이터를 전달합니다. 'defaultInput'에 데이터를 전달합니다.
mainApp.value("defaultInput",　5);
...
//이름 'defaultInput'로 값을 컨트롤러 '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);
　　　}
});

Factory - 팩토리

팩토리는 값을 반환하는 함수입니다. 서비스나 컨트롤러가 필요할 때마다 필요에 따라 값을 생성합니다. 일반적으로 팩토리 함수를 사용하여 값을 계산하고 반환합니다.

//모듈 정의
var mainApp = angular.module("mainApp", []);
//두 숫자의 곱셈을 반환하는 메서드를 제공하는 MathService 팩토리를 생성합니다.
mainApp.factory('MathService', function() {
　　　var factory = {};
　　　
　　　factory.multiply = function(a, b) {
　　　　　　return a　*　b
　　　}
　　　return factory;
});　
//서비스에 MathService 팩토리를 주입하여 팩토리의 곱셈 메서드를 활용합니다.
mainApp.service('CalcService', function(MathService) {
　　　this.square = function(a) {
　　　　　　return MathService.multiply(a, a);
　　　}
});
...

Service - 서비스

서비스(Service)는 일반적인 JavaScript 객체로, 특정 작업을 수행하는 기능을 포함하고 있습니다. 사용service()메서드를 정의한 후, 이를 컨트롤러에 주입합니다.

//모듈 정의
var mainApp = angular.module("mainApp", []);
...
//서비스를 생성하여, 숫자의 제곱을 반환하는 메서드를 정의합니다.
mainApp.service('CalcService', function(MathService) {
　　　this.square = function(a) {
　　　　　　return MathService.multiply(a, a);　
　　　}
});
//서비스 "CalcService"를 "CalcController" 컨트롤러에 주입합니다.
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);
　　　}
});

Provider

AngularJS는 제공자를 사용하여 구성 단계에서 서비스, 팩토리 등을 생성합니다. 이전에 생성한 MathService를 생성하기 위해 다음 스크립트를 사용할 수 있습니다.get()value를 반환하는 메서드/service/factory.

//모듈 정의
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;
　　　　　　});
　　　});
});

Constant - 상수

구성 단계에서 값을 사용할 수 없기 때문에, 상수는 구성 단계에서 값을 전달하는 데 사용됩니다.

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

온라인 예제

이하의 예제는 위에서 설명한 모든 지시의 사용을 보여줍니다-

testAngularJS.htm

예제

<html>
　　　<head>
　　　　　　<title>AngularJS 의존성 주입</title>
　　　</head>
　　　
　　　<body>
　　　　　　<h2>AngularJS-의존성 주입 애플리케이션 예제</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>
　　　　　　</div>
　　　　　　
　　　　　　<script src="https://cdn.staticfile.org/angular.js/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>

테스트를 보세요‹/›

출력 결과

네트워크 브라우저에서도 열 수 있습니다testAngularJS.htm결과를 확인하세요。