programing

AngularJS $resource RESTful 예시

yellowcard 2023. 3. 26. 10:01
반응형

AngularJS $resource RESTful 예시

$리소스를 사용하여 RESTful 웹 서비스를 호출하고 싶은데(아직 작업 중) Angular가 있는지 알고 싶습니다.먼저 JS 스크립트를 수정합니다.

ToDo DTO에는 다음이 있습니다.{id, order, content, done}

:cmd내가 전화할 수 있도록api/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();
}

한 가지 확실한 것은 패치 방식입니다.모든 것을 갱신하고 싶지 않습니다만, 1개의 필드만 갱신할 수 있습니까?이 코드 조각이 올바르게 구성되고 있습니까?

$resource는 엔드포인트에서 데이터를 가져와 조작한 후 반송하는 것을 의미했습니다.그 중 일부는 거기에 있지만, 실제로 그 기능을 활용하지는 못하고 있습니다.

리소스에 커스텀 메서드를 사용하는 것도 좋지만 OOTB에 포함된 뛰어난 기능을 놓치지 마십시오.

편집: 제가 원래 잘 설명하지 못한 것 같은데$resource반품과 함께 펑키한 것들을 하죠. Todo.get()그리고.Todo.query() 다 리소스 개체를 반환하고 get이 완료되면 콜백에 전달합니다.무대 뒤에서 약속하는 멋진 일들을 하는데, 그 말은 전화를 걸 수 있다는 거지$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
});

단지, 그 점에 유의해 주세요.$promiseproperty는 위에서 반환한 값과 동일한 값의 속성입니다.이상해질 수 있어요

이것들은 동등하다.

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;
});

그냥 하면 돼$scope.todo = Todo.get({ id: 123 })..get()그리고..query()리소스에서 개체를 즉시 반환하고 나중에 약속 결과로 채웁니다(템플릿 업데이트).이는 일반적인 약속이 아니기 때문에 콜백 또는 $promise 속성을 사용해야 합니다.콜 후에 실행하는 특별한 코드가 있는 경우입니다.단, 템플릿에서만 사용하는 경우에는 콜백에서 스코프에 할당할 필요가 없습니다.

언급URL : https://stackoverflow.com/questions/13269882/angularjs-resource-restful-example

반응형