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 서비스를. 에 대해 자세히 알아보기 $http 에서 서비스 AngularJS와 HTTP를 자습서 .
은 $ 제한 시간 서비스
$timeout 서비스의 AngularJS와 '버전입니다 window.setTimeout 기능.
예
이초 후 새 메시지를 표시합니다 :
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 서비스의 AngularJS와 '버전 window.setInterval 기능.
예
시간마다 초를 표시합니다 :
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);
};
}]);
»그것을 자신을 시도 객체 또는 배열에서 값을 표시 할 때 필터를 사용할 수 있습니다 :