AngularJS $ resource RESTful 예제


145

$ resource를 사용하여 RESTful 웹 서비스 (아직 작업 중임)를 호출하고 싶지만 AngularJS 스크립트가 먼저 올바른지 확인하고 싶습니다.

할 일 DTO는 다음을 가지고 있습니다 : {id, order, content, done}

:cmdapi/1/todo/reset데이터베이스에서 할 일 테이블을 지우려면 호출 할 수 있습니다 .

내 이해에 대한 주석이 달린 코드는 다음과 같습니다.

function TodoService($resource) {
    var src = $resource('api/1/todo/:id:cmd',
              {id: "@id", cmd: "@cmd"}, //parameters default
              {
                ListTodos: { method: "GET", params: {} },
                GetTodo: { method: "GET", params: { id: 0 } },                            
                CreateTodo: { method: "POST", params: { content: "", order: 0, done: false } },
                UpdateTodo: { method: "PATCH", params: { /*...*/ } },
                DeleteTodo: { method: "DELETE", params: { id: 0 } },
                ResetTodos: { method: "GET", params: { cmd: "reset" } },
              });

    //Usage:

    //GET without ID
    //it calls -> api/1/todo
    src.ListTodos();

    //GET with ID
    //it calls -> api/1/todo/4
    src.GetTodo({ id: 4 });

    //POST with content, order, done
    //it calls -> api/1/todo
    src.CreateTodo({ content: "learn Javascript", order: 1, done: false });

    //UPDATE content only
    //it calls -> api/1/todo/5
    src.UpdateTodo({ id: 5, content: "learn AngularJS" }); 

    //UPDATE done only
    //it calls -> api/1/todo/5
    src.UpdateTodo({ id: 5, done: true });

    //RESET with cmd
    //it calls -> api/1/todo/reset
    src.ResetTodos();
}

확실하지 않은 한 가지 것은 PATCH 방법입니다. 모든 것을 업데이트하고 싶지 않습니다. 하나의 필드 만 업데이트 할 수 있습니까? 이 코드를 올바르게 구성하고 있습니까?


2
$ resource를 기본 $ http 서비스로 사용하고있는 것 같습니다. $ resource는 RESTful 데이터 소스에서 오브젝트를 가져 와서 조작 한 다음을 사용하여 다시 보내는 데 유용합니다 obj.save(). 기본 $ http 구현으로 수행하려는 작업을 수행 할 수 있습니다.

4
@blesh RESTful 웹 서비스와 통신하려고 할 때 왜 $ resource를 사용해서는 안됩니까? 당신이 말했듯이, 그것이 정확히 그 목적이 아닙니까?
F Lekschas

그것은 나를 찾고 있지만 $ resource를 서비스로 정의하고 주입합니다. 필요한 경우 나중에 다른 곳에서 쉽게 재사용 할 수 있습니다.
F Lekschas

4
@Flek 글쎄, 그는 원한다면 $ http와 같은 $ resource를 사용할 있습니다 . 그러나 이것이 실제로 사용되는 방식은 아닙니다.
Ben Lesh

3
글쎄, 그것은 실제로 "문제"가 아니라고 말합니다. 그는 RESTful API와 $ resource가 즉시 사용할 수있는 모든 것을 활용하지 않는 것이 더 낫습니다.
Ben Lesh

답변:


211

$ resource는 엔드 포인트에서 데이터를 검색하고 조작 한 후 다시 전송하기위한 것입니다. 당신이있어 일부 거기에 그,하지만 당신이 정말로 그것을이 어떻게 만들어진 것을 위해 그것을 활용 아닙니다.

리소스에 사용자 정의 방법을 사용하는 것이 좋지만 OOTB와 함께 제공되는 멋진 기능을 놓치고 싶지는 않습니다.

편집 : 나는 이것을 원래 충분히 잘 설명하지 않았다고 생각하지만 $resource반환과 함께 펑키 한 것들을 수행합니다. Todo.get()그리고 Todo.query()모두 반환 자원 객체를, 그리고 에 전달할 콜백 할 때 가져 오기 완료하십시오. 콜백이 실제로 발생 $save()하기 전에 호출 할 수 있음을 의미하는 장면 뒤에 약속이있는 멋진 작업을 수행하며 get()대기합니다. 약속 then()또는 콜백 메소드 내에서 리소스를 처리하는 것이 가장 좋습니다 .

표준 사용

var Todo = $resource('/api/1/todo/:id');

//create a todo
var todo1 = new Todo();
todo1.foo = 'bar';
todo1.something = 123;
todo1.$save();

//get and update a todo
var todo2 = Todo.get({id: 123});
todo2.foo += '!';
todo2.$save();

//which is basically the same as...
Todo.get({id: 123}, function(todo) {
   todo.foo += '!';
   todo.$save();
});

//get a list of todos
Todo.query(function(todos) {
  //do something with todos
  angular.forEach(todos, function(todo) {
     todo.foo += ' something';
     todo.$save();
  });
});

//delete a todo
Todo.$delete({id: 123});

마찬가지로 OP에 게시 한 항목의 경우 리소스 개체를 얻은 다음 사용자 지정 함수를 이론적으로 호출 할 수 있습니다.

var something = src.GetTodo({id: 123});
something.foo = 'hi there';
something.UpdateTodo();

그러나 OOTB 구현을 실험 해 보았지만 직접 개발했습니다. 의 기본 기능을 사용하지 않는 경우 자체 기능 $resource을 사용해야합니다 $http.

업데이트 : Angular 1.2 및 약속

Angular 1.2부터는 리소스가 약속을 지원합니다. 그러나 그들은 나머지 행동을 바꾸지 않았습니다.

로 약속을 활용하려면 반환 된 값에 속성 $resource을 사용해야합니다 $promise.

약속을 사용한 예

var Todo = $resource('/api/1/todo/:id');

Todo.get({id: 123}).$promise.then(function(todo) {
   // success
   $scope.todos = todos;
}, function(errResponse) {
   // fail
});

Todo.query().$promise.then(function(todos) {
   // success
   $scope.todos = todos;
}, function(errResponse) {
   // fail
});

$promise속성은 위에서 반환 한 것과 같은 값 의 속성 이라는 점을 명심하십시오 . 그래서 당신은 이상해질 수 있습니다 :

이것들은 동등합니다

var todo = Todo.get({id: 123}, function() {
   $scope.todo = todo;
});

Todo.get({id: 123}, function(todo) {
   $scope.todo = todo;
});

Todo.get({id: 123}).$promise.then(function(todo) {
   $scope.todo = todo;
});

var todo = Todo.get({id: 123});
todo.$promise.then(function() {
   $scope.todo = todo;
});

1
나는 그렇게처럼 내 문을 수정 것 같아요 당신이 사용하지 않는 경우 어떤 $ 자원의 OOTB 기능을, 당신은 당신이 필요하지 않은 객체와 기능을 참조로 메모리를 복용하고 있습니다. 다치게 될까요? 아마 아닙니다. 그러나 표준 CRUD 작업 만 수행하고 $ resources neato 기능을 활용하지 않는 경우 $ http를 사용하는 것이 더 효율적일 수 있습니다.
벤 레시

5
Blesh, OOTB 기능을 다루는 문서가 있습니까? 각도 문서는 혼란 스럽습니다.
erichrusch

9
슬프게도 실제로는 없습니다. 방금 GitHub에서 소스를 파고 들었습니다.
Ben Lesh

2
하지 않습니다 Todo.get({id: 123});약속이 아니라 똑바로 개체를 반환?
Ingó Vals

1
아마도 당신은 내 질문에 나를 도울 수 있습니다 : stackoverflow.com/questions/30405569/… .
AJ_83

0

당신은 할 수 있습니다 $scope.todo = Todo.get({ id: 123 }). .get()그리고 .query()자원에서 즉시 개체를 반환하고 약속의 결과로 채우십시오 (템플릿 업데이트). 그건 하지 당신은 당신이 호출 후 실행하려면 몇 가지 특수 코드가있는 경우 중 하나 콜백 또는 $ 약속 속성을 사용해야하는 이유입니다 전형적인 약속. 그러나 템플릿에서만 사용하는 경우 콜백에서 스코프에 할당 할 필요가 없습니다.

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.