AngularJS 서비스
AngularJS에서는 자신만의 서비스를 만들거나 많은 내장 서비스 중 하나를 사용할 수 있습니다.
서비스란 무엇입니까?
AngularJS에서 서비스는 AngularJS 애플리케이션에서 사용할 수 있고 이에 국한되는 기능 또는 객체입니다.
AngularJS에는 약 30개의 내장 서비스가 있습니다. 그 중 하나가 $location
서비스입니다.
$location서비스에는 현재 웹 페이지의 위치에 대한 정보를 반환하는 메서드가 있습니다 .
예시
$location컨트롤러 에서 서비스 사용 :
var app = angular.module('myApp', []);
app.controller('customersCtrl',
function($scope, $location) {
$scope.myUrl = $location.absUrl();
});
서비스 는 $location컨트롤러에 인수로 전달됩니다. 컨트롤러에서 서비스를 사용하려면 종속성으로 정의해야 합니다.
서비스를 사용하는 이유는 무엇입니까?
서비스와 같은 많은 서비스의 경우, $location이미 DOM에 있는 객체를 사용할 수 있는 것처럼 보입니다. 그렇게 할 window.location
수도 있지만 적어도 AngularJS 애플리케이션에서는 몇 가지 제한 사항이 있습니다.
AngularJS는 지속적으로 애플리케이션을 감독하고 변경 및 이벤트를 적절하게 처리하기 위해 AngularJS는 객체 $location
대신 서비스 를 사용하는 것을 선호합니다.window.location
$http 서비스
$http서비스는 AngularJS 애플리케이션에서 가장 일반적으로 사용되는 서비스 중 하나입니다 . 서비스는 서버에 요청하고 애플리케이션이 응답을 처리하도록 합니다.
예시
서비스를 사용 $http하여 서버에서 데이터를 요청합니다.
var app = angular.module('myApp', []);
app.controller('myCtrl',
function($scope, $http) {
$http.get("welcome.htm").then(function
(response) {
$scope.myWelcome
= response.data;
});
});
이 예는 서비스의 매우 간단한 사용을 보여줍니다 $http. AngularJS Http Tutorial$http 에서 서비스에 대해 자세히 알아보세요 .
$timeout 서비스
$timeout서비스는
window.setTimeout함수 의 AngularJS 버전입니다.
예시
2초 후에 새 메시지 표시:
var app = angular.module('myApp', []);
app.controller('myCtrl',
function($scope, $timeout) {
$scope.myHeader = "Hello
World!";
$timeout(function () {
$scope.myHeader = "How are you today?";
}, 2000);
});
$interval 서비스
$interval서비스는
window.setInterval함수 의 AngularJS 버전입니다.
예시
매초 시간 표시:
var app = angular.module('myApp', []);
app.controller('myCtrl',
function($scope, $interval) {
$scope.theTime = new
Date().toLocaleTimeString();
$interval(function () {
$scope.theTime = new Date().toLocaleTimeString();
},
1000);
});
나만의 서비스 만들기
고유한 서비스를 만들려면 서비스를 모듈에 연결합니다.
이름이 다음과 같은 서비스를 만듭니다 hexafy.
app.service('hexafy', function() {
this.myFunc = function (x) {
return x.toString(16);
}
});
맞춤형 서비스를 사용하려면 컨트롤러를 정의할 때 종속성으로 추가하세요.
예시
hexafy숫자를 16진수로 변환하기 위해 명명된 맞춤형 서비스를 사용하십시오 :
app.controller('myCtrl', function($scope, hexafy) {
$scope.hex
= hexafy.myFunc(255);
});
필터 내에서 사용자 지정 서비스 사용
서비스를 만들고 애플리케이션에 연결하면 모든 컨트롤러, 지시문, 필터 또는 다른 서비스 내부에서도 서비스를 사용할 수 있습니다.
필터 내에서 서비스를 사용하려면 필터를 정의할 때 종속성으로 추가합니다.
hexafy필터에 사용된 서비스 myFormat:
app.filter('myFormat',['hexafy', function(hexafy) {
return function(x) {
return
hexafy.myFunc(x);
};
}]);
객체 또는 배열의 값을 표시할 때 필터를 사용할 수 있습니다.
<ul>
<li ng-repeat="x in counts">{{x | myFormat}}</li>
</ul>