2016년 5월 4일 수요일

Angularjs Service

angularjs에서 서비스의 역할은 서버 프로그램에서의 서비스 계층의 역할과 동일하다. 컨트롤러에서 모두 처리할 수도 있지만 다른 컨트롤러나 모듈에서 공통으로 사용되기에 중복되는 코드들이나 로직이 복잡하여 컨트롤러에 작성하면 코드가 복잡해지는 코드들을 정리해서 몰아넣기 좋은 계층이라 생각된다.

자체적으로 제공하는 내장 서비스들도 많은데 여기 서 확인할 수 있다. 서비스를 생성해서 사용할 수 도 있는데 그 방법은 factory 메서드, service메서드를 사용하는 두가지 방법이 있다.
        angular.module("myapp", []).module.factory('dateTimeService', function () { 
            var dateTimeSvc = {};
            dateTimeSvc.getDate = function () {
    return new Date().toDateString();
            } 
            dateTimeSvc.getTime = function () {
    return new Date().toTimeString();
            } 
            return  dateTimeSvc; 
        });
        angular.module("myapp", []).module.service('dateTimeService', function () { 
            this.getDate = function () {
    return new Date().toDateString();
            } 
            this.getTime = function () {
    return new Date().toTimeString();
            } 
        });
두 방법의 차이는 factory 메서드에서는 서비스 객체를 반환해야 하는 반면 service 메서드는 this 에 필요한 속성, 메서드를 바인딩하는 점이다. 생성 방법 외에는 동일하니 편한쪽을 택해 사용하면 될듯 하다.

생성된 서비스는 컨트롤러에서 사용할 수 있다. 사용방법은 아래 코드와 같다.
        angular.module("myapp", []).module.service('dateTimeService', function () { 
            this.getDate = function () {
    return new Date().toDateString();
            } 
            this.getTime = function () {
    return new Date().toTimeString();
            } 
        }).controller("myCtrl", function($scope, dateTimeService){
            $scope.time = dateTimeService.getTime();
        });
컨트롤러 메서드 함수의 인자에 사용하려는 서비스의 이름의 인자를 선언하면 해당 서비스가 할당된다. angularjs 코드에서 이 부분을 주입해 준다고 하는데 어떻게 구현을 하고 있는지는 나중에 확인해 볼 일이다.

댓글 없음:

댓글 쓰기