Angular.js에는 HTTP 요청을 처리하는 $http 모듈이 존재하지만 별도의 모듈로 제공하는 ngResource를 사용하면 RESTful API를 사용할 때 훨씬 편하게 사용할 수 있다. ngResource를 설명하는 글은 아니지만 간단히 ngResource를 사용하는 방법을 설명하면 다음과 같이 사용한다.
var app = angular.module('app', ['ngResource']);
app.controller('MainCtrl', function($scope, $resource) {
var Team = $resource('http://api.example.com/teams/:teamName', {
teamName: 'defaultName'
});
Team.get({ // GET -> /teams/test
teamName: 'test'
});
});
일반적으로는 $resource를 사용하는 서비스를 별도로 만들겠지만 여기서는 간결함을 위해서 컨트롤러에 넣었다. ngResource로 특정 API에 대한 URL을 정의해 놓고 사용할 수 있다. 그래서 특정 API를 인스턴스를 만들어 놓고 상황에 따라 GET, POST, PUT, DELETE를 메서드 사용하듯이 간단하게 사용할 수 있어서 편하다. URL별로 GET/POST/PUT/DELETE를 사용한다는 생각에 처음에는 URL별로 리소스 인스턴스를 따로 만들었는데 일반적으로 RESTful은 계층적인 구조를 가지기 때문에 상당히 중복적인 인스턴스를 만들게 되었다.
예를 들어 /teams라는 URI는 팀 목록을 반환하고 /teams/:teamName는 특정 팀의 정보를 반환하고 /teams/:teamName/:playerName은 특정 팀의 특정 선수의 정보를 반환한다. 이런 경우 위 세 URI별로 따로 리소스 인스턴스를 만들면 종류별로 많이 만들어야 하는데(난 이렇게 만들었다.) 만들고 보니 무척 중복적으로 느껴져서 뭔가 해결방법이 있을꺼라는 생각에 스택오버플로우에 질문을 올렸더니 역시나 ngResource가 이런 부분까지 고려해서 잘 만들어져 있었다.
var Team = $resource('http://api.example.com/teams/:teamName/:playerName', {
teamName: '@teamName',
playerName: '@playerName'
});
Team.get(); // GET -> /teams
Team.get({ // GET -> /teams/anything
teamName: 'anything'
});
Team.get({ // GET -> /teams/something/johndoe
teamName: 'something',
playerName: 'johndoe'
});
이런 경우 리소스의 paramDefaults를 정의할 때 기본값에 @를 접두사로 지정하면 원래는 GET이 아닌 요청에 대해서 객체에서 추출한다고 문서에 나와 있는데 위와 같이 사용하면 사용할 때 해당 파라미터를 지정하지 않으면 URL에서 무시한다. 그래서 계층을 가지는 URL에서 하위 부분을 위와 같이 처리하면 하나의 리소스 인스턴스를 이용해서 다양한 URI 패턴별로 HTTP 요청을 보낼 수 있다.
관리자만 볼 수 있는 댓글입니다.
안녕하세요. 저도 아직은 angular.js답게 쓰는 법에 대해서 학습중이지만 routeProvider를 어떤 의도때문에 바꾸시려는지 제가 잘 이해못했습니다.
위 예제에서 마지막이 있는 코드는 저같은 경우는 컨트롤러에 들어갑니다. 주신 코드에서는 TestListCtrl이나 TestCtrl등에 들어가겠죠. 그리고 예제에서는 편의상 한꺼번에 작성했지만 API를 다루는 서비스를 따로 만들어서 $resource는 코드는 서비스에 넣고 이걸 컨트롤러에 주입해서 해당 객체에 파라미너만 변경하면서 컨트롤러에서 사용합니다.
관리자만 볼 수 있는 댓글입니다.
흠.. ngRoute와 ngResource는 다른 모듈입니다. 정확히 이해했는지 모르겠지만 말씀하신걸 보면 둘을 섞어서 얘기하신것 같은데 routeProvider는 싱글페이지 어플리케이션을 위해서 해시를 이용해서 라우팅하는 기능이고 ngReousrce는 서버에 REST API를 사용하기 위함입니다.
관리자만 볼 수 있는 댓글입니다.
말씀하신 내용 대로라면 잘 처리하신듯 합니다. 각 라우팅마다 같은 컨트롤러를 쓰신 이유는 잘 모르겠지만 보통은 라우팅마다 다른 컨트롤러를 사용하곤 하지만 이는 어플리케이션마다 다르겠죠. 그리고 각 컨트롤러에서 서버에서 값을 받아야 하니 ngResource를 사용하는 서비스를 주입받아서 데이터를 가져와서 보여주게 됩니다.
따로 고민하시는 이유를 제가 잘 모르겠어서 제대로 말씀드린지 모르겠네요.
egov frame work 로 작업 중인데 , 그럼 frame work 컨트롤러 단에서 데이터를 받으려면 angularjs 로 작성된 jsp에서 $resource url 은 어디로 설정해야하나요?...
같은 질문을 두번 남겨주셨군요. 정확히 질문을 이해 못했는데 egov에서 데이터를 내려주는 URL로 $resource로 받아오면 될것 같습니다.
ㅎㅇ