AJAX, Eşzamansız JavaScript ve XML'in kısa biçimidir. AJAX, öncelikle tüm sayfayı yeniden yüklemeden bir web sayfasının bölümlerini güncellemek için tasarlanmıştır.
Bu teknolojinin tasarlanmasının nedeni, istemci ile sunucu arasında yapılan gidiş-dönüşlerin sayısını ve bir kullanıcı belirli bilgilere ihtiyaç duyduğunda gerçekleşen tüm sayfa yenileme sayısını azaltmaktı.
AJAX, perde arkasında sunucu ile küçük miktarlarda veri alışverişi yaparak web sayfalarının eşzamansız olarak güncellenmesine izin verdi. 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 izler.
Bu eğitimde öğreneceksiniz-
- $ Resource kullanan sunucularla üst düzey etkileşimler
- $ Http ile düşük seviyeli sunucu etkileşimleri
- SQL ve MySQL çalıştıran bir sunucudan veri alma
$ Resource kullanan sunucularla üst düzey etkileşimler
Angular, Ajax isteklerini işlemek için iki farklı API sağlar. Onlar
- $ kaynak
- $ http
Angular'daki sunucularla yüksek düzeyde etkileşim için kullanılan "$ resource" özelliğine bakacağız.
Daha yüksek düzeyde etkileşimden bahsettiğimizde, bu, sunucunun bu işlevsellikle ilgili olarak ayrıntılı olarak tam olarak ne yaptığından değil, yalnızca sunucunun işlevsellikle ilgili neler sunabileceği konusunda rahatsız olacağımız anlamına gelir.
Örneğin, sunucu belirli bir şirketin çalışan bilgilerini tutan bir uygulamayı barındırıyorsa, sunucu GetEmployeeDetails, SetEmployeeDetails, vb. Gibi istemcilere işlevsellik sunabilir.
Yani yüksek düzeyde, bu iki işlevin neler yapabileceğini biliyoruz ve bunları $ resource özelliğini kullanarak çağırabiliriz. Ancak, "GetEmployeeDetails" ve "SetEmployeeDetails işlevleri" nin ayrıntılarını ve bunların nasıl uygulandığını tam olarak bilmiyoruz.
Yukarıdaki açıklama, REST tabanlı mimari olarak bilinen şeyi açıklamaktadır.
- REST, birçok modern web tabanlı sistemde takip edilen bir mimari olan Temsili Durum Transferi olarak bilinir.
- Bu, web tabanlı bir uygulamayla çalışmak için GET, POST, PUT ve DELETE'in normal HTTP fiillerini kullanabileceğiniz anlamına gelir.
Öyleyse, Olayların bir listesini tutan bir web uygulamamız olduğunu varsayalım.
Tüm olayların listesine ulaşmak istersek,
- Web uygulaması, http: // example / events gibi bir URL gösterebilir ve
- Uygulama REST tabanlı bir mimariyi takip ediyorsa olayların tüm listesini almak için "GET" fiilini kullanabiliriz.
Örneğin, kimliği 1 olan bir Etkinlik varsa, bu olayın ayrıntılarını URL aracılığıyla alabiliriz. http: // örnek / olaylar / 1
$ Resource nesnesi nedir
Angular'daki $ resource nesnesi, REST tabanlı bir mimaride uygulamalar sunan sunucularla çalışmaya yardımcı olur.
@Resource ifadesinin temel sözdizimi çeşitli işlevlerle birlikte aşağıda verilmiştir.
@Kaynak deyiminin sözdizimi
var resource Object = $resource(url);
ResourceObject'i elinize aldığınızda, gerekli REST çağrılarını yapmak için aşağıdaki işlevleri kullanabilirsiniz.
1. get ([params], [başarılı], [hata]) - Bu, standart GET çağrısı yapmak için kullanılabilir.
2. save ([parametreler], postData, [başarılı], [hata]) - Bu, standart POST çağrısı yapmak için kullanılabilir.
3. sorgu ([parametreler], [başarılı], [hata]) - Bu, standart GET çağrısı yapmak için kullanılabilir, ancak yanıtın bir parçası olarak bir dizi döndürülür.
4. remove ([parametreler], postData, [başarılı], [hata]) - Bu, standart DELETE çağrısı 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,
- Bir Konu: "Açısal" değerini get işlevinde bir "param" olarak ilettiğinizi varsayalım:
- get (' http: // örnek / olaylar ', '{Konu:' Açısal '}')
- Http: // example / events? Topic = Angular URL'si get işlevinin bir parçası olarak çağrılır.
$ Resource özelliği nasıl kullanılır
$ Resource özelliğini kullanmak için aşağıdaki adımların izlenmesi gerekir:
Adım 1) "angular-resource.js" dosyasının Angular.JS sitesinden indirilmesi ve uygulamaya yerleştirilmesi gerekir.
Adım 2) Uygulama modülü, $ kaynağını kullanmak için "ngResource" modülüne bir bağımlılık bildirmelidir.
Aşağıdaki örnekte, 'DemoApp' uygulamamızdan "ngResource" modülünü çağırıyoruz.
angular.module(DemoApp,['ngResource']); //DemoApp is our main module
Adım 3) Aşağıdaki örnekte gösterildiği gibi, REST uç noktanızla $ resource () işlevini çağırma.
Bunu yaparsanız, $ resource nesnesi, REST uç noktaları tarafından açığa çıkan 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 hizmet oluşturulur; burada DemoApp, Angular uygulamamıza verilen addır.
-
.Factory yöntemi, bu yeni hizmetin ayrıntılarını oluşturmak için kullanılır.
-
'Giriş', hizmetimize verdiğimiz isimdir ve vermek istediğiniz herhangi bir isim olabilir.
-
Bu hizmette, $ resource API'yi çağıracak bir işlev oluşturuyoruz.
-
$ kaynak ['/ örnek / Etkinlik /: 1).
$ Resource işlevi, bir REST uç noktası çağırmak için kullanılan bir hizmettir. REST uç noktası normalde bir URL'dir. Yukarıdaki işlevde, URL'yi (/ example / Event /: 1) REST uç noktamız olarak kullanıyoruz. REST uç noktamız (/ example / Event /: 1) ana sitemizin "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ılabilen (get (), query (), save (), remove (), delete ()) işlevlerine sahip olacaktır.
Adım 4) Yukarıdaki adımda döndürülen yöntemleri (bunlar get (), query (), save (), remove (), delete ()) kontrolcümüzde kullanabiliriz.
Aşağıdaki kod parçacığında, örnek olarak get () işlevini kullanıyoruz
Get () işlevini 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çacığındaki get () işlevi / example / Event /: 1 için bir GET isteği yayınlar.
- URL'deki 1 parametresi, $ kapsam.id ile değiştirilir.
- Get () işlevi, asıl veriler sunucudan geldiğinde otomatik olarak doldurulan boş bir nesne döndürür.
- Get () için ikinci argüman, veriler sunucudan geldiğinde yürütülen bir geri aramadır. Tüm kodun olası çıktısı, "örnek" web sitesinden gösterilen Olayların listesini döndürecek bir JSON nesnesi olacaktır.
Nelerin iade edilebileceğ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.
Aşağıdaki JSON verilerini döndüren bir PHP sayfamız ( http: //example/angular/getTopics.PHP ) olduğunu varsayalım.
"Topics": [{"Name" : "Controllers","Description" : "Controllers in action"},{"Name" : "Models","Description" : "Binding data using Models"},{"Name" : "Directives","Description" : "Using directives in Angular"}]
Sunucudan yukarıdaki verileri almak için kullanılabilecek $ http kullanan AngularJS koduna bakalım.
Yukarıdaki örnekte
- $ Http hizmetinin "get" işlevini kullanabilmemiz için $ http hizmetini Controller işlevimize ekliyoruz.
- Şimdi JSON nesnelerini http: // example /angular/getTopics.PHP URL'sinden almak için HTTP hizmetinden get işlevini kullanıyoruz.
- 'Yanıt' nesnesine bağlı olarak, veri kayıtlarını döndürecek bir geri arama işlevi oluşturuyoruz ve ardından bunları $ kapsam nesnesinde saklıyoruz.
- Daha sonra denetleyiciden $ kapsam.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 ve MySQL çalıştıran bir sunucudan veri alma
Angular, MySQL veya SQL çalıştıran bir sunucudan veri almak için de kullanılabilir.
Buradaki fikir, bir MySQL veritabanına bağlanan bir PHP sayfanız veya MS SQL sunucu veritabanına bağlanan bir Asp.Net sayfanız varsa, hem PHP hem de ASP.Net sayfasının verileri JSON biçiminde oluşturduğundan emin olmanız gerektiğidir.
Bir MySQL veya SQL veritabanından veri sunan bir PHP sitemiz ( http: // example /angular/getTopics.PHP ) olduğunu varsayalım .
Adım 1) İlk adım, PHP sayfasının verileri bir MySQL veritabanından almasını ve verileri JSON biçiminde sunmasını sağlamaktır.
Adım 2) JSON verilerini almak üzere $ http hizmetini kullanmak için yukarıda gösterilen benzer kodu yazın.
Sunucudan yukarıdaki verileri almak için kullanılabilecek $ http kullanan AngularJS koduna bakalım.
Adım 3) ng-tekrar yönergesini kullanarak görünümünüzdeki verileri işleyin.
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-tekrar yönergesini kullanıyoruz.
Her JSON nesnesi için, "Ad" ve değer "Açıklama" olan anahtarı görüntülüyoruz.
{{x.Name}} {{x.Description}}
Özet:
- GET, POST, PUT ve DELETE'in normal HTTP fiillerine dayanan web uygulamaları tarafından sunulan bir işlevsellikten başka bir şey olmayan RESTFUL mimarisinin ne olduğuna bir göz attık.
- $ Resource nesnesi, Angular ile birlikte RESTFUL web uygulamalarıyla yüksek düzeyde etkileşime girmek için kullanılır; bu, yalnızca web uygulaması tarafından gösterilen işlevselliği çağırdığımız, ancak işlevselliğin nasıl uygulandığını umursamadığımız anlamına gelir.
- Bir web uygulamasından veri almak için kullanılabilecek $ http hizmetine de baktık. Bu mümkündür, çünkü $ http hizmeti web uygulamalarıyla daha ayrıntılı bir seviyede çalışabilir.
- $ Http hizmetinin gücü nedeniyle, bu, bir PHP uygulaması aracılığıyla bir MySQL veya MS SQL Sunucusundan veri almak için kullanılabilir. Veriler daha sonra ng-tekrar yönergesi kullanılarak bir tabloda gösterilebilir.