AJAX adalah bentuk ringkas Asynchronous JavaScript dan XML. AJAX terutamanya dirancang untuk mengemas kini bahagian laman web, tanpa memuatkan keseluruhan halaman.
Alasan untuk merancang teknologi ini adalah untuk mengurangkan jumlah perjalanan pergi balik yang dilakukan antara klien dan pelayan dan jumlah penyegaran keseluruhan halaman yang biasanya berlaku setiap kali pengguna memerlukan maklumat tertentu.
AJAX membenarkan laman web dikemas kini secara tidak serentak dengan menukar sejumlah kecil data dengan pelayan di belakang tabir. Ini bermaksud mungkin untuk mengemas kini bahagian laman web, tanpa memuatkan keseluruhan halaman.
Banyak aplikasi web moden benar-benar mengikuti teknik ini untuk menyegarkan halaman atau mendapatkan data dari pelayan.
Dalam tutorial ini, anda akan belajar-
- Interaksi tahap tinggi dengan pelayan menggunakan sumber $
- Interaksi pelayan tahap rendah dengan $ http
- Mengambil data dari pelayan yang menjalankan SQL dan MySQL
Interaksi tahap tinggi dengan pelayan menggunakan sumber $
Angular menyediakan dua API yang berbeza untuk menangani permintaan Ajax. Mereka adalah
- sumber $
- $ http
Kami akan melihat harta "$ resource" di Angular, yang digunakan untuk berinteraksi dengan pelayan pada tahap tinggi.
Apabila kita bercakap tentang berinteraksi pada tahap yang lebih tinggi, ini bermaksud bahawa kita hanya akan merasa terganggu dengan apa yang ditawarkan oleh pelayan berkenaan dengan fungsi dan bukan tentang apa yang dilakukan pelayan secara terperinci berkaitan dengan fungsi ini.
Sebagai contoh, jika pelayan menghosting aplikasi yang menyimpan maklumat pekerja syarikat tertentu, pelayan mungkin mendedahkan fungsi kepada klien seperti GetEmemployeeDetails, SetEm EmployeeDetails, dll.
Oleh itu, pada tahap yang tinggi, kita tahu apa yang boleh dilakukan oleh kedua fungsi ini, dan kita boleh memanggilnya menggunakan harta sumber $. Tetapi kemudian kita tidak tahu dengan tepat perincian "GetEmemployeeDetails" dan "SetEmemployeeDetails function", dan bagaimana ia dilaksanakan.
Penjelasan di atas menerangkan apa yang dikenali sebagai seni bina berasaskan REST.
- REST dikenali sebagai Representational State Transfer, yang merupakan seni bina yang diikuti dalam banyak sistem berasaskan web moden.
- Ini bermaksud bahawa anda boleh menggunakan kata kerja HTTP biasa GET, POST, PUT dan DELETE untuk bekerja dengan aplikasi berasaskan web.
Oleh itu, mari kita anggap, kita mempunyai aplikasi web yang menyimpan senarai Acara.
Sekiranya kita mahu masuk ke senarai semua acara,
- Aplikasi web boleh mendedahkan URL seperti http: // contoh / peristiwa dan
- Kita boleh menggunakan kata kerja "GET" untuk mendapatkan keseluruhan senarai peristiwa jika aplikasi mengikuti seni bina berdasarkan REST.
Oleh itu, sebagai contoh, jika ada Peristiwa dengan ID 1, kita dapat memperoleh perincian acara ini melalui URL. http: // contoh / peristiwa / 1
Apakah objek sumber $
Objek sumber $ di Angular membantu bekerja dengan pelayan yang melayani aplikasi pada seni bina berasaskan REST.
Sintaks asas penyataan @ sumber bersama dengan pelbagai fungsi diberikan di bawah
Sintaks penyataan @resource
var resource Object = $resource(url);
Sebaik sahaja anda mempunyai resourceObject, anda boleh menggunakan fungsi di bawah untuk membuat panggilan REST yang diperlukan.
1. get ([params], [success], [error]) - Ini boleh digunakan untuk membuat panggilan GET standard.
2. save ([params], postData, [success], [error]) - Ini boleh digunakan untuk membuat panggilan POST standard.
3. pertanyaan ([params], [kejayaan], [ralat]) - Ini boleh digunakan untuk membuat panggilan GET standard, tetapi array dikembalikan sebagai sebahagian daripada respons.
4. remove ([params], postData, [success], [error]) - Ini boleh digunakan untuk membuat panggilan DELETE standard.
Dalam semua fungsi yang diberikan di bawah parameter 'params' dapat digunakan untuk memberikan parameter yang diperlukan, yang harus diteruskan dalam URL.
Sebagai contoh,
- Katakan anda melepasi nilai Topik: 'Angular' sebagai 'param' dalam fungsi get sebagai
- dapatkan (' http: // contoh / peristiwa ', '{Topik:' Angular '}')
- URL http: // contoh / peristiwa? Topik = Sudut dipanggil sebagai sebahagian daripada fungsi get.
Cara menggunakan harta sumber $
Untuk menggunakan harta sumber $, langkah-langkah berikut perlu diikuti:
Langkah 1) Fail "angular-resource.js" perlu dimuat turun dari laman Angular.JS dan mesti dimasukkan ke dalam aplikasi.
Langkah 2) Modul aplikasi harus menyatakan pergantungan pada modul "ngResource" untuk menggunakan sumber $.
Dalam contoh berikut, kami memanggil modul "ngResource" dari aplikasi 'DemoApp' kami.
angular.module(DemoApp,['ngResource']); //DemoApp is our main module
Langkah 3) Memanggil fungsi $ resource () dengan titik akhir REST anda, seperti yang ditunjukkan dalam contoh berikut.
Sekiranya anda melakukan ini, maka objek sumber $ akan dapat menggunakan fungsi yang diperlukan yang didedahkan oleh titik akhir REST.
Contoh berikut memanggil URL titik akhir: http: // contoh / peristiwa / 1
angular.module('DemoApp.services').factory('Entry', function($resource){return $resource('/example/Event/:1); // Note the full endpoint address});
Dalam contoh di atas perkara-perkara berikut sedang dilakukan
-
Semasa mendefinisikan aplikasi Angular, layanan dibuat dengan menggunakan pernyataan 'DemoApp.services' di mana DemoApp adalah nama yang diberikan untuk aplikasi Angular kami.
-
Kaedah .factory digunakan untuk membuat perincian perkhidmatan baru ini.
-
'Entry' adalah nama yang kami berikan untuk perkhidmatan kami yang boleh menjadi nama apa pun yang anda ingin berikan.
-
Dalam perkhidmatan ini, kami membuat fungsi yang akan memanggil API sumber $
-
$ sumber ('/ contoh / Acara /: 1).
Fungsi $ resource adalah perkhidmatan yang digunakan untuk memanggil titik akhir REST. Titik akhir REST biasanya URL. Dalam fungsi di atas, kami menggunakan URL (/ contoh / Peristiwa /: 1) sebagai titik akhir REST kami. Titik akhir REST kami (/ contoh / Acara /: 1) menunjukkan bahawa terdapat aplikasi Acara yang berada di laman utama kami "contoh". Aplikasi Acara ini dikembangkan dengan menggunakan seni bina berasaskan REST.
-
Hasil panggilan fungsi adalah objek kelas sumber. Objek sumber sekarang akan mempunyai fungsi (get (), query (), save (), remove (), delete ()) yang dapat dipanggil.
Langkah 4) Sekarang kita dapat menggunakan kaedah yang dikembalikan pada langkah di atas (yang mana adalah get (), query (), save (), remove (), delete ()) di pengawal kami.
Dalam coretan kod di bawah, kami menggunakan fungsi get () sebagai contoh
Mari lihat kod yang boleh menggunakan fungsi get ().
angular.module('DemoApp.controllers',[]);angular.module('DemoApp.controllers').controller('DemoController',function($scope, MyFunction) {var obj = MyFunction.get({ 1: $scope.id }, function() {console.log(obj);});
Pada langkah di atas,
- Fungsi get () dalam coretan di atas mengeluarkan permintaan GET ke / example / Event /: 1.
- Parameter: 1 di URL diganti dengan $ lingkup.id.
- Fungsi get () akan mengembalikan objek kosong yang diisi secara automatik apabila data sebenarnya berasal dari pelayan.
- Argumen kedua untuk mendapatkan () adalah panggilan balik yang dijalankan ketika data tiba dari pelayan. Kemungkinan keluaran keseluruhan kod tersebut adalah objek JSON yang akan mengembalikan senarai Acara yang didedahkan dari laman web "contoh".
Contoh apa yang boleh dikembalikan ditunjukkan di bawah
{{ 'EventName' : 'Angular , 'EventDescription' : 'Angular Basics'},{ 'EventName' : 'Node , 'EventDescription' : 'Node Basics'},{ 'EventName' : 'Programming in C++ , 'EventDescription' : 'C++ Basics'}}
Interaksi pelayan tahap rendah dengan $ http
$ Http adalah satu lagi perkhidmatan JS Angular yang digunakan untuk membaca data dari pelayan jauh. Bentuk data yang paling popular yang dibaca dari pelayan adalah data dalam format JSON.
Mari kita anggap, bahawa kita mempunyai halaman PHP ( http: //example/angular/getTopics.PHP ) yang mengembalikan data JSON berikut
"Topics": [{"Name" : "Controllers","Description" : "Controllers in action"},{"Name" : "Models","Description" : "Binding data using Models"},{"Name" : "Directives","Description" : "Using directives in Angular"}]
Mari lihat kod AngularJS menggunakan $ http, yang boleh digunakan untuk mendapatkan data di atas dari pelayan
Dalam contoh di atas
- Kami menambahkan perkhidmatan $ http ke fungsi Pengawal kami sehingga kami dapat menggunakan fungsi "get" dari perkhidmatan $ http.
- Kami sekarang menggunakan fungsi get dari perkhidmatan HTTP untuk mendapatkan objek JSON dari URL http: // example /angular/getTopics.PHP
- Berdasarkan objek 'respon', kami membuat fungsi panggilan balik yang akan mengembalikan rekod data dan kemudian kami menyimpannya dalam objek $ lingkup.
- Kami kemudian boleh menggunakan pemboleh ubah $ lingkup.nama dari pengawal dan menggunakannya dalam pandangan kami untuk memaparkan objek JSON dengan sewajarnya.
Mengambil data dari pelayan yang menjalankan SQL dan MySQL
Angular juga dapat digunakan untuk mengambil data dari pelayan yang menjalankan MySQL atau SQL.
Ideanya ialah jika anda mempunyai halaman PHP yang menyambung ke pangkalan data MySQL atau halaman Asp.Net yang menyambung ke pangkalan data pelayan MS SQL, maka anda perlu memastikan halaman PHP dan ASP.Net menghasilkan data dalam format JSON.
Mari kita anggap, kita mempunyai laman web PHP ( http: // example /angular/getTopics.PHP ) yang melayani data dari pangkalan data MySQL atau SQL.
Langkah 1) Langkah pertama adalah memastikan halaman PHP mengambil data dari pangkalan data MySQL dan menyajikan data dalam format JSON.
Langkah 2) Tuliskan kod serupa yang ditunjukkan di atas untuk menggunakan perkhidmatan $ http untuk mendapatkan data JSON.
Mari lihat kod AngularJS menggunakan $ http yang boleh digunakan untuk mendapatkan data di atas dari pelayan
Langkah 3) Render data dalam pandangan anda menggunakan arahan ng-ulangi.
Di bawah ini kita menggunakan arahan ng-ulangi untuk mencari setiap pasangan nilai-kunci dalam objek JSON yang dikembalikan oleh kaedah "get" dari perkhidmatan $ http.
Untuk setiap objek JSON, kami menampilkan kunci yang adalah "Nama" dan nilainya adalah "Penerangan".
{{x.Name}} {{x.Description}}
Ringkasan:
- Kami telah melihat apa itu seni bina RESTFUL, yang tidak lain adalah fungsi yang didedahkan oleh aplikasi web berdasarkan kata kerja HTTP biasa GET, POST, PUT dan DELETE.
- Objek sumber $ digunakan dengan Angular untuk berinteraksi dengan aplikasi web RESTFUL pada tahap tinggi yang bermaksud bahawa kami hanya menggunakan fungsi yang didedahkan oleh aplikasi web tetapi tidak peduli bagaimana fungsi tersebut dilaksanakan.
- Kami juga melihat perkhidmatan $ http yang dapat digunakan untuk mendapatkan data dari aplikasi web. Ini mungkin kerana perkhidmatan $ http dapat berfungsi dengan aplikasi web pada tahap yang lebih terperinci.
- Oleh kerana kehebatan perkhidmatan $ http, ini dapat digunakan untuk mendapatkan data dari MySQL atau MS SQL Server melalui aplikasi PHP. Data kemudian dapat diberikan dalam tabel menggunakan arahan ng-ulangan.
