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 서비스는 매우 간단하게 사용됩니다. $http 서비스에 대해 더 많은 정보는 AngularJS Http 교육을 참조하세요。

$timeout 서비스

$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 서비스

$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인 사용자 정의 서비스를 통해 숫자를 십육진수 숫자로 변환합니다：

app.controller('myCtrl', function($scope, hexafy) {
  $scope.hex = hexafy.myFunc(255);
});

본인이 직접 시도해보세요

필터에서 사용하는 사용자 정의 서비스

서비스를 생성하고应用程序에 연결한 후, 어떤 컨트롤러, 지시, 필터 또는 다른 서비스에서도 사용할 수 있습니다.

필터를 정의할 때 서비스를 의존으로 추가하여 서비스를 사용하려면:

필터 myFormat에서 사용하는 서비스 hexafy:

app.filter('myFormat',['hexafy', function(hexafy) {
  return function(x) {
    return hexafy.myFunc(x);
  });
});

본인이 직접 시도해보세요

표시되는 객체나 배열의 값을 표시할 때 이 필터를 사용할 수 있습니다:

<ul>
  <li ng-repeat="x in counts">{{x | myFormat}}</li>
</ul>

본인이 직접 시도해보세요