Tag Archives: Restful

Bu yazıda angularjs ile proje geliştirirken REST servislere erişerek veri talep etmek için kullanılmak üzere hazırlanmış bir modül olan ngResource modülünü incelemeye çalışacağız.

ngResource modülü angular.js script dosyası içerisinde bulunmaz. Projemize ngResource modülünü dahil edebilmek için angular-resource.js javascript dosyasını projemize dahil etmeliyiz.

<script src="angular.js">
<script src="angular-resource.js">

Modülü bağımlı modül olarak projemize ekleyerek uygulamamıza yükleyebiliriz. Yükeleme işlemini şu şekilde yapabiliriz.

angular.module('app', ['ngResource']);

Yükleme işlemi gerçekleştikten sonra RESTful servislere erişmek için modül içerisinde bulunan $resource servisini kullanabiliriz. $resource servisi kendi içerisinde $http servisine bağımlıdır ve bu servis sayesinde sunucu ile iletişime geçebilir. $resource servisinin kullanım şekli kısaca aşağıdaki gibidir.

$resource(url, [paramDefaults], [actions], options);

Servisin REST uçları ile konuşabilmek için bazı metodları vardır. Bunlar:

{ 'get':    {method:'GET'},
  'save':   {method:'POST'},
  'query':  {method:'GET', isArray:true},
  'remove': {method:'DELETE'},
  'delete': {method:'DELETE'} };

Örnek olarak bir REST ucumuz aşağıdaki şekilde olsun. Bu uçla $resource servisi aracılığı ile işlemler yapmaya çalışalım.

• http://location.bayramucuncu.com/api/location => GET  ile lokasyonlar listelenir.
• http://location.bayramucuncu.com/api/location => POST ile yeni lokasyon ekler.
• http://location.bayramucuncu.com/api/location/:id => GET tek lokasyon getirir.
• http://location.bayramucuncu.com/api/location/:id => PUT lokasyon günceller.
• http://location.bayramucuncu.com/api/location/:id => DELETE lokasyon siler.

angular.module('location.services')
 .factory('Endpoint', function($resource) {
    return $resource('http://location.bayramucuncu.com/api/entries/:id',
              {
                   id: "@id"
              },
              {
                   update: { method: "PUT" }
              }
    );
 });

Burada {update: { method: “PUT” }} şeklinde özel bir fonksiyon tanımlanmıştır. Çünkü  HTTP PUT metodu, $resource içerisinde standart bir kavram olarak ele alınmamıştır.

Diğer bir  parametre olan {id: “@id”} ise URL adresinin sonundaki “/:id” ifadesini değişken hale getirmek için tanımlanmıştır.

Artık controller içerisinde $resource servisinin metodlarını kullanabiliriz.

angular.module('location.controllers')
       .controller('LocationIndexCtrl', function($scope, Endpoint) {
           Endpoint.query(function(response){
              $scope.locations = response;
           });
       })
       .controller('LocationDetailCtrl', function($scope, Endpoint) {
           var parameter = { id: 1 };
           Endpoint.get(parameter, function(response){
              $scope.location = response;
           });
       })
       .controller('LocationCreateCtrl', function($scope, Endpoint) {
           var location = {
                name: "blue restaurant",
                lon: "123"
                lat: "456"
           };
           Endpoint.save(location, function(response){
              alert("new location created");
           });
       })
       .controller('LocationUpdateCtrl', function($scope, Endpoint) {
           var location = {
                name: "blue restaurant",
                lon: "123"
                lat: "456"
           };
           Endpoint.update({ id:1 }, location, function(response){
              alert("location updated");
           });
       })
       .controller('LocationDeleteCtrl', function($scope, Endpoint) {
           var parameter = { id: 1 };
           Endpoint.delete(parameter, function(response){
              alert("location deleted");
           });
})

Bu şekilde REST servisi işlemleri için her metoda karşılık bir controller oluşturmuş olduk. İsterseniz tek bir controller içerisine her HTTP metodu için bir fonksiyon da tanımlayabilirsiniz.

Angularjs ile asenkron işlemler gerçekleştirilirken kullanılan $promise nesnesine $resource servisi üzerinden erişmek de mümkündür.

angular.module('location.controllers')
       .controller('LocationIndexCtrl', function($scope, Endpoint) {
           Endpoint.query().$promise.then(
              function(response){
                 $scope.locations = response;
              },
              function(error){
                console.log("Hata oluştu!");
              }
           );
       })
})

Bu yazıda ngResource modülünün REST uçları ile nasıl konuşabileceğimizi incelemiş olduk. Bir sonraki yazıda görüşmek dileğiyle.