AngularJS $ resource RESTful örneği


144

RESTful web hizmetimi aramak için $ resource kullanmak istiyorum (hala üzerinde çalışıyorum) ama önce AngularJS betiğimi doğru yapıp yapmadığımı öğrenmek istiyorum.

Todo DTO'da şunlar bulunur: {id, order, content, done}

:cmdböylece api/1/todo/resetveritabanındaki yapılacaklar tablosunu temizlemek için arayabilirim .

İşte anladığım yorumu içeren kod:

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

Emin olmadığım belirli bir şey de PATCH yöntemi, her şeyi güncellemek istemiyorum, sadece bir alanı güncelleyebilir miyim? Bu kod parçasını doğru bir şekilde oluşturuyor muyum?


2
$ Resource gibi temel bir $ http hizmeti kullanıyorsunuz. $ resource, bir RESTful veri kaynağından bir nesneyi almak, onu işlemek ve sonra geri göndermek için daha fazladır obj.save(). Yapmaya çalıştığınız şeyi basit bir $ http uygulamasıyla yapabilirsiniz.
Ben Lesh

4
@blesh RESTful web servisiyle iletişim kurmak istediğinde neden $ resource kullanmasın? Dediğin gibi, tam olarak amacı bu değil mi?
F Lekschas

Beni arıyor ama $ resource'u bir servis olarak tanımlayıp enjekte ediyorum. Bu, gerekirse daha sonra başka bir yerde kolayca yeniden kullanmanızı sağlar.
F Lekschas

4
@Flek Eh, o olabilir diye eğer $ http gibi $ kaynağı kullanmalarına istediği için. Ama kullanılması gerektiği gibi değil.
Ben Lesh

3
Aslında, bu gerçekten bir "sorun" değil. Dahası, RESTful API'den ve $ resource'un sizin için kutudan çıkarabileceği her şeyden yararlanmıyor.
Ben Lesh

Yanıtlar:


211

$ resource, bir uç noktadan veri almak, onu işlemek ve geri göndermek anlamına geliyordu. Sen var bazı orada o ki, ama sen gerçekten bunu yapmak için yapıldı ne için yararlanarak değiliz.

Kaynağınızda özel yöntemlerin olması sorun değil, ancak OOTB ile birlikte gelen harika özellikleri kaçırmak istemezsiniz.

DÜZENLEME : Bunu başlangıçta yeterince iyi açıkladığımı sanmıyorum, ancak $resourcegeri dönüşlerle bazı ilginç şeyler yapıyor. Todo.get()ve Todo.query()her iki dönüş kaynak nesnesini ve içine geçmesi callback'inde zaman olsun tamamlanıncaya için. Sahne arkasında vaatlerle bazı süslü şeyler yapar, bu $save()da get()geri arama gerçekten ateşlenmeden önce arayabileceğiniz anlamına gelir ve bekleyecektir. Kaynağınızla bir sözün then()veya geri arama yönteminin içinde ilgilenmek muhtemelen en iyisidir .

Standart kullanım

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

Benzer şekilde, OP'ye ne gönderdiğiniz durumunda, bir kaynak nesnesi alabilir ve ardından özel işlevlerinizden herhangi birini (teorik olarak) çağırabilirsiniz:

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

Ancak gitmeden önce OOTB uygulamasını denedim ve kendim icat ettim. Ve varsayılan özelliklerinden herhangi birini kullanmadığınızı fark $resourceederseniz, muhtemelen sadece $httpkendi başınıza kullanmalısınız.

Güncelleme: Angular 1.2 ve Promises

Angular 1.2'den itibaren kaynaklar vaatleri destekler. Ancak geri kalan davranışı değiştirmediler.

Vaatlerden yararlanmak $resourceiçin, $promiseözelliği döndürülen değer üzerinden kullanmanız gerekir .

Sözlerin kullanıldığı örnek

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

$promiseMülkün, yukarıda döndürdüğü değerlerle aynı değerlere sahip bir mülk olduğunu unutmayın . Böylece tuhaflaşabilirsiniz:

Bunlar eşdeğerdir

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
Ben şöyle ifademi geliştirmeyi planlıyoruz tahmin: Eğer kullanmıyorsanız herhangi $ kaynağın adet OTB özelliklerini, o zaman sadece gerekmez nesne ve fonksiyon referansları olan bellek alıyoruz. Bir şeye zarar verecek mi? Muhtemelen değil. Ancak, yalnızca standart CRUD işlemlerini yapıyorsanız ve $ kaynaklar neato özelliklerinden yararlanmıyorsanız, yalnızca $ http kullanmak daha verimli olabilir.
Ben Lesh

5
Blesh, OOTB işlevselliğini aşan herhangi bir belge var mı? Açısal dokümanlar kafa karıştırıcı.
erichrusch

9
Ne yazık ki yok, gerçekten. GitHub'daki kaynaklarını araştırıyorum.
Ben Lesh

2
Does not Todo.get({id: 123});bir söz değil, bir dik nesnesi döndürür?
Ingó Vals

1
Belki sorumla bana yardımcı olabilirsiniz: stackoverflow.com/questions/30405569/… .
AJ_83

0

sadece yapabilirsin $scope.todo = Todo.get({ id: 123 }). .get()ve .query()bir Kaynakta bir nesneyi hemen iade edin ve daha sonra sözün sonucu ile doldurun (şablonunuzu güncellemek için). Bu tipik bir söz değildir , bu nedenle, aramadan sonra çalıştırılmasını istediğiniz özel bir kodunuz varsa, bir geri arama veya $ promise özelliğini kullanmanız gerekir. Ancak, yalnızca şablonda kullanıyorsanız, bir geri aramada kapsamınıza atamanıza gerek yoktur.

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.