AngularJS AJAX

AJAX, Asenkron'un kısa biçimidir JavaScript ve XML. AJAX, öncelikle bir web sayfasının tüm sayfasını yeniden yüklemeden, bazı bölümlerini güncellemek için tasarlanmıştır.

Bu teknolojiyi tasarlamanın nedeni, istemci ile sunucu arasında yapılan gidiş-dönüş sayısını ve bir kullanıcı belirli bir bilgiye ihtiyaç duyduğunda gerçekleşen tüm sayfa yenileme sayısını azaltmaktı.

AJAX, web sayfalarının sahne arkasında sunucuyla küçük miktarda veri alışverişinde bulunarak eş zamanlı olmayan bir şekilde güncellenmesine olanak sağladı. Bu, tüm sayfayı yeniden yüklemeden bir web sayfasının bölümlerini güncellemenin mümkün olduğu anlamına geliyordu.

Günümüzün birçok web uygulaması aslında sayfayı yenilemek veya sunucudan veri almak için bu tekniği kullanır.

$resource kullanan sunucularla üst düzey etkileşimler

Angular, Ajax isteklerini işlemek için iki farklı API sağlar. Bunlar

$kaynak
$ http

Angular'da sunucularla yüksek düzeyde etkileşim kurmak için kullanılan “$resource” özelliğine bakacağız.

Daha yüksek düzeyde etkileşimden bahsettiğimizde, bu, sunucunun bu işlevsellik açısından ayrıntılı olarak tam olarak ne yaptığıyla değil, yalnızca sunucunun işlevsellik açısından neler sunabileceğiyle ilgileneceğimiz anlamına gelir.

Örneğin, sunucu belirli bir şirketin çalışan bilgilerini tutan bir uygulamayı barındırıyorsa, sunucu istemcilere GetEmployeeDetails, SetEmployeeDetails vb. gibi işlevler sunabilir.

Yani yüksek seviyede, bu iki fonksiyonun ne yapabileceğini biliyoruz ve bunları $resource özelliğini kullanarak çağırabiliriz. Ancak daha sonra “GetEmployeeDetails” ve “SetEmployeeDetails fonksiyonlarının” ayrıntılarını ve nasıl uygulandığını tam olarak bilmiyoruz.

Yukarıdaki açıklama REST tabanlı mimari olarak bilinen şeyi açıklıyor.

REST, Temsili Durum Transferi olarak bilinir ve birçok modern web tabanlı sistemde kullanılan bir mimaridir.
Bu, web tabanlı bir uygulamayla çalışmak için GET, POST, PUT ve DELETE gibi normal HTTP fiillerini kullanabileceğiniz anlamına gelir.

Diyelim ki, bir liste tutan bir web uygulamamız var. Etkinlikler.

Tüm olayların listesine ulaşmak istersek,

Web uygulaması aşağıdaki gibi bir URL'yi gösterebilir: http://example/events ve
Uygulama REST tabanlı bir mimariyi izliyorsa olayların tüm listesini almak için “GET” fiilini kullanabiliriz.

Yani örneğin ID'si 1 olan bir Etkinlik varsa, bu etkinliğin ayrıntılarını URL aracılığıyla alabiliriz. http://example/events/1

$resource nesnesi nedir

Angular'daki $resource nesnesi, REST tabanlı mimaride uygulamalar sunan sunucularla çalışmaya yardımcı olur.

@resource ifadesinin temel söz dizimi ve çeşitli işlevleri aşağıda verilmiştir.

@resource ifadesinin sözdizimi

var resource Object = $resource(url);

ResourceObject'i elinize aldıktan sonra gerekli REST çağrılarını yapmak için aşağıdaki işlevleri kullanabilirsiniz.

1. get([params], [success], [error]) – Bu, standart GET çağrısını yapmak için kullanılabilir.

2. save([params], postData, [success], [error]) – Bu, standart POST çağrısını yapmak için kullanılabilir.

3. query([params], [success], [error]) – Bu, standart GET çağrısını yapmak için kullanılabilir, ancak yanıtın bir parçası olarak bir dizi döndürülür.

4. kaldır([params], postData, [başarı], [hata]) – Bu, standart DELETE çağrısını yapmak için kullanılabilir.

Aşağıda verilen tüm işlevlerde 'params' parametresi, URL'de iletilmesi gereken gerekli parametreleri sağlamak için kullanılabilir.

Örneğin,

Get işlevinde bir 'param' olarak Konu: 'Angular' değerini ilettiğinizi varsayalım.
elde etmek('http://example/events' ,'{ Konu: 'Açısal' }')
URL http://example/events?Topic=Angular get fonksiyonunun bir parçası olarak çağrılır.

AngularJS $resource özelliği nasıl kullanılır?

$resource özelliğini kullanabilmek için aşağıdaki adımların izlenmesi gerekmektedir:

) 1 Adım “angular-resource.js” dosyasının Angular.JS sitesinden indirilmesi ve uygulamaya yerleştirilmesi gerekmektedir.

) 2 Adım Uygulama modülünün $resource'u kullanabilmesi için “ngResource” modülüne bağımlılık beyan etmesi gerekir.

Aşağıdaki örnekte 'DemoApp' uygulamamızdan “ngResource” modülünü çağırıyoruz.

angular.module(DemoApp,['ngResource']); //DemoApp is our main module

) 3 Adım Aşağıdaki örnekte gösterildiği gibi REST uç noktanızla $resource() fonksiyonunu çağırın.

Bunu yaparsanız $resource nesnesi, REST uç noktaları tarafından kullanıma sunulan gerekli işlevselliği çağırma yeteneğine sahip olacaktır.

Aşağıdaki örnek uç nokta URL'sini çağırır: http://example/events/1

angular.module('DemoApp.services').factory('Entry', function($resource) 
{
     return $resource('/example/Event/:1); // Note the full endpoint address
});

Yukarıdaki örnekte aşağıdaki şeyler yapılıyor

Angular uygulamasını tanımlarken 'DemoApp.services' ifadesi kullanılarak bir servis oluşturuluyor, burada DemoApp Angular uygulamamıza verilen isimdir.
Bu yeni servisin detaylarını oluşturmak için .factory metodu kullanılır.
'Giriş', hizmetimize verdiğimiz isim olup, sizin vermek istediğiniz herhangi bir isim olabilir.
Bu hizmette $resource API'sini çağıracak bir fonksiyon yaratıyoruz.
$resource('/example/Event/:1). $resource fonksiyonu, bir REST uç noktasını çağırmak için kullanılan bir hizmettir. REST uç noktası normalde bir URL'dir. Yukarıdaki fonksiyonda, REST uç noktamız olarak URL'yi (/example /Event/:1) kullanıyoruz. REST uç noktamız (/example /Event/:1), ana sitemiz "example" üzerinde oturan bir Event uygulaması olduğunu belirtir. Bu Event uygulaması, REST tabanlı bir mimari kullanılarak geliştirilmiştir.
İşlev çağrısının sonucu bir kaynak sınıfı nesnesidir. Kaynak nesnesi artık çağrılabilecek işlevlere ( get() , query() , save() , delete() , delete() ) sahip olacaktır.

) 4 Adım Artık yukarıdaki adımda döndürülen yöntemleri (bunlar get() , query() , save() , delete(), delete() ) denetleyicimizde kullanabiliriz.

Aşağıdaki kod parçacığında örnek olarak get() işlevini kullanıyoruz

Get() fonksiyonunu kullanabilen koda bakalım.

angular.module('DemoApp.controllers',[]);
angular.module('DemoApp.controllers').controller('DemoController',function($scope, MyFunction) {
  var obj = MyFunction.get({ 1: $scope.id }, function() {
    console.log(obj);
  });

Yukarıdaki adımda,

Yukarıdaki kod parçasındaki get() işlevi, / example /Event/:1'e bir GET isteği gönderir.
URL'deki parametre:1, $scope.id ile değiştirildi.
get() işlevi, gerçek veriler sunucudan geldiğinde otomatik olarak doldurulan boş bir nesne döndürecektir.
Get() işlevinin ikinci argümanı, veri sunucudan geldiğinde gerçekleştirilen bir geri aramadır. Kodun tamamının olası çıktısı, "örnek" web sitesinde gösterilen Olayların listesini döndüren bir JSON nesnesi olacaktır. Nelerin döndürülebileceğine dair bir örnek aşağıda gösterilmiştir.
```
{
{ 'EventName' : 'Angular , 'EventDescription' : 'Angular Basics'},
{ 'EventName' : 'Node , 'EventDescription' : 'Node Basics'},
{ 'EventName' : 'Programming in C++ , 'EventDescription' : 'C++ Basics'}

}
```

$http ile düşük seviyeli sunucu etkileşimleri

$http, uzak sunuculardan veri okumak için kullanılan başka bir Angular JS hizmetidir. Sunuculardan okunan en popüler veri biçimi JSON biçimindeki verilerdir.

Diyelim ki elimizde bir PHP sayfası ( http://example/angular/getTopics.PHP ) aşağıdaki JSON verilerini döndüren

"Topics": [
  {
    "Name" : "Controllers",
    "Description" : "Controllers in action"
  },
  {
    "Name" : "Models",
    "Description" : "Binding data using Models"
  },
  {
    "Name" : "Directives",
    "Description" : "Using directives in Angular"
  }
]

Yukarıdaki verileri sunucudan almak için kullanılabilecek $http kullanan AngularJS koduna bakalım.

<script>
var app = angular.module('myApp', []);
app.controller('AngularCtrl', function($scope, $http) {
    $http.get("http://example/angular/getTopics.PHP")
    .then(function(response) 
{
$scope.names = response.data.records;});
});
</script>

Yukarıdaki örnekte

$http servisinin “get” fonksiyonunu kullanabilmemiz için Controller fonksiyonumuza $http servisini ekliyoruz.
Artık JSON nesnelerini URL'den almak için HTTP hizmetinden get işlevini kullanıyoruz http://example /angular/getTopics.PHP
'Response' nesnesine dayanarak, veri kayıtlarını döndürecek bir geri çağırma işlevi oluşturuyoruz ve ardından bunları $scope nesnesinde saklıyoruz.
Daha sonra denetleyicideki $scope.names değişkenini kullanabilir ve JSON nesnelerini buna göre görüntülemek için görünümümüzde kullanabiliriz.

SQL'den Veri Alma ve MySQL AngularJS kullanan sunucu

Angular, çalışan bir sunucudan veri almak için de kullanılabilir. MySQL veya SQL'i kullanın.

Buradaki fikir şu ki, eğer bir PHP sayfanız varsa MySQL veritabanı veya bir Asp.Net MS'ye bağlanan sayfa SQL sunucu veritabanını kullanıyorsanız, hem PHP hem de ASP.Net sayfasının verileri JSON formatında işlediğinden emin olmanız gerekir.

Aşağıda SQL'den Veri Alma ve Alma İşlemi Adım Adım gösterilmektedir MySQL AngularJS kullanan sunucu.

Diyelim ki bir PHP sitemiz var (http://example /angular/getTopics.PHP) birinden veri sunmak MySQL veya SQL veritabanı.

) 1 Adım Birinden veri al MySQL veritabanı
İlk adım, PHP sayfasının verileri bir kaynaktan almasını sağlamaktır. MySQL veritabanını oluşturur ve verileri JSON formatında sunar.

) 2 Adım $http hizmetini kullanarak JSON verilerini alın
JSON verilerini almak amacıyla $http hizmetini kullanmak için yukarıda gösterilen benzer kodu yazın.

Yukarıdaki verileri sunucudan almak için kullanılabilecek $http kullanan AngularJS koduna bakalım.

<script>
var app = angular.module('myApp', []);
app.controller('AngularCtrl', function($scope, $http) {
    $http.get("http://example /angular/getTopics.PHP")
    .then(function(response) 
{
	$scope.topics = response.data.records;});
});
</script>

) 3 Adım kullanarak görünümünüzdeki verileri işleyin ng-tekrar direktifi

Aşağıda, $http hizmetinin "get" yöntemi tarafından döndürülen JSON nesnelerindeki anahtar/değer çiftlerinin her birini gözden geçirmek için ng-repeat yönergesini kullanıyoruz.

Her JSON nesnesi için “Name” anahtarını ve değerini “” görüntülüyoruz.Descriptiyon".

<div ng-app="myApp" ng-controller="AngularCtrl"> 
<table>
  <tr ng-repeat="x in topics">
    <td>{{ x.Name }}</td>
    <td>{{ x.Description }}</td>
  </tr>
</table>
</div>

ÖZET

AJAX'ın tam biçimi Asenkron'dur JavaSenaryo ve XML.
Ne olduğuna bir göz attık HUZURLU mimarisi, GET, POST, PUT ve DELETE gibi normal HTTP fiillerine dayalı web uygulamaları tarafından ortaya çıkarılan bir işlevsellikten başka bir şey değildir.
$resource nesnesi, RESTFUL web uygulamalarıyla yüksek düzeyde etkileşim kurmak için Angular ile birlikte kullanılır; bu, yalnızca web uygulamasının sunduğu işlevselliği çağırdığımız ancak işlevselliğin nasıl uygulandığıyla ilgilenmediğimiz anlamına gelir.
Ayrıca bir web uygulamasından veri almak için kullanılabilecek $http hizmetine de baktık. Bu, $http hizmetinin web uygulamalarıyla daha ayrıntılı düzeyde çalışabilmesi nedeniyle mümkündür.
$http hizmetinin gücü nedeniyle bu, bir kaynaktan veri almak için kullanılabilir. MySQL veya bir PHP uygulaması aracılığıyla MS SQL Server. Veriler daha sonra ng-repeat direktifi kullanılarak bir tabloya dönüştürülebilir.