AngularJS REST 와 Custom Services

https://docs.angularjs.org/tutorial/step_11

이번 단계에서는 앱에서 데이터를 가지고오는 방식이 변경됩니다. Restful한 클라이언트를 표현하는 서비스를 정의합니다. 이 방법을 이용하여, 저단계의 $http API를 사용하지 않고, 쉽게 서버의 데이터를 요청할 수 있수 있게됩니다.

---

RestFul 하게 Angular를 구현하기 위해 ngResource 모듈을 사용합니다. ngResource는 Angular Core와 개별적으로 나뉘어져 있으므로, ngRoute와 마찬가지로 다운로드를 받아야 합니다. 
Bower 또는 npm 을 이용하여 다운로드 받으세요. (인터넷에서 찾으셔도 됩니다.)

angluar-resource 1.3.3 버전을 다운로드 받았습니다.

본격적으로 resource 서비스를 작성하기 위해 services.js 파일을 생성하고 코드를 작성합니다.

/* Services */
var phonecatServices = angular.module('phonecatServices', ['ngResource']);

phonecatServices.factory('Phone', ['$resource',
    function($resource){
        return $resource('phones/:phoneId.json', {}, {
           query : { method:'GET', params:{phoneId:'phones'}, isArray:true} 
        });
    }]);

서버의 phone data를 접근하는 서비스를 만들었습니다. 여기서 사용된 factory function이 중요한데,
factory는 서비스를 등록하는 기능을 수행합니다.

factory function의 서비스 명은 'Phone' 으로 정의하였고, factory function은 function arguments 을 의존성 주입(DI) 시키는 기능을 합니다. 일종의 컨트롤러의 생성자와 유사합니다.

각종 서비스에 대한 정리는 모바일 컨버전스 티스토리인

http://mobicon.tistory.com/329 을 참고하세요!

phonecatServices를 작성하였으면, JS파일 링크를 추가하고, app.js 의 인자값도 추가합니다.

/* App Module */
var phonecatApp = angular.module('phonecatApp', [
 'ngRoute',
 'phonecatControllers',
 'phonecatFilters',
 'phonecatServices'
]);

컨트롤러의 내용이 다음과 같이 수정 됩니다.

phonecatControllers.controller('PhoneListCtrl', ['$scope', 'Phone', function($scope, Phone){
    $scope.phones = Phone.query(); 
    $scope.orderProp = 'age';
}]);

phonecatControllers.controller('PhoneDetailCtrl', ['$scope', '$routeParams','Phone', function($scope,$routeParams, Phone){
    $scope.phone = Phone.get({phoneId: $routeParams.phoneId}, function(phone){
       $scope.mainImageUrl = phone.images[0];
    });
    
    $scope.setImage = function(imageUrl) {
        $scope.mainImageUrl = imageUrl;
    }
}]);

$http 대신에 서비스로 등록이 된 Phone 을 사용합니다
Phone.query()는 services.js에서 작성한 것처럼 동작하고, paramId에 phones를 가진채로 동작하므로
phones.json을 읽어서 출력할 것이고,

기본적으로 $resource가 가지고 있는 메소든인 get 을 통해 detail에 $routeParams.phoneId를에서 phoneId를 가져와 상세정보를 출력하게 됩니다.

{ 'get':    {method:'GET'},

    'save':   {method:'POST'},

    'query':  {method:'GET', isArray:true},

    'remove': {method:'DELETE'},

    'delete': {method:'DELETE'}

};

위 다섯개의 메소드는 기본적으로 가지고 있는 action입니다. isArray는 action의 결과가 배열인 경우에는 true 아닌 경우에는 false가 되어야합니다.

action 호출시 넘겨지는 파라미터 중 매칭 되는 것이 있으면 해당 url에 파라미터 값이 들어가고, 그 외에 파라미터들은 모두 쿼리 스트링 ( ?abc=dfg ) 으로 입력된다.