AJAX adalah kependekan dari Asynchronous JavaScript and XML. AJAX terutama dirancang untuk memperbarui bagian halaman web, tanpa memuat ulang seluruh halaman.
Alasan perancangan teknologi ini adalah untuk mengurangi jumlah perjalanan pulang pergi yang dilakukan antara klien dan server dan jumlah seluruh penyegaran halaman yang biasanya dilakukan setiap kali pengguna membutuhkan informasi tertentu.
AJAX memungkinkan halaman web diperbarui secara asinkron dengan menukar sejumlah kecil data dengan server di belakang layar. Ini berarti memungkinkan untuk memperbarui bagian dari halaman web, tanpa memuat ulang seluruh halaman.
Banyak aplikasi web modern yang benar-benar mengikuti teknik ini untuk menyegarkan laman atau mendapatkan data dari server.
Dalam tutorial ini, Anda akan belajar-
- Interaksi tingkat tinggi dengan server menggunakan $ resource
- Interaksi server tingkat rendah dengan $ http
- Mengambil data dari server yang menjalankan SQL dan MySQL
Interaksi tingkat tinggi dengan server menggunakan $ resource
Angular menyediakan dua API berbeda untuk menangani permintaan Ajax. Mereka
- $ resource
- $ http
Kita akan melihat properti "$ resource" di Angular, yang digunakan untuk berinteraksi dengan server pada level tinggi.
Ketika kita berbicara tentang berinteraksi di tingkat yang lebih tinggi, itu berarti kita hanya akan peduli tentang apa yang ditawarkan server mengenai fungsionalitas dan bukan tentang apa sebenarnya yang dilakukan server secara rinci sehubungan dengan fungsi ini.
Misalnya, jika server menghosting aplikasi yang menyimpan informasi karyawan dari perusahaan tertentu, server mungkin mengekspos fungsionalitas ke klien seperti GetEmployeeDetails, SetEmployeeDetails, dll.
Jadi pada level tinggi, kita tahu apa yang bisa dilakukan kedua fungsi ini, dan kita bisa memanggilnya menggunakan properti $ resource. Tapi kemudian kita tidak tahu persis detail dari "GetEmployeeDetails" dan "fungsi SetEmployeeDetails", dan bagaimana ini diimplementasikan.
Penjelasan di atas menjelaskan apa yang dikenal sebagai arsitektur berbasis REST.
- REST dikenal sebagai Representational State Transfer, yang merupakan arsitektur yang diikuti dalam banyak sistem berbasis web modern.
- Ini berarti Anda dapat menggunakan verba HTTP normal GET, POST, PUT dan DELETE untuk bekerja dengan aplikasi berbasis web.
Jadi mari kita asumsikan, kita memiliki aplikasi web yang menyimpan daftar Peristiwa.
Jika kami ingin melihat daftar semua acara,
- Aplikasi web dapat menampilkan URL seperti http: // example / events dan
- Kita bisa menggunakan kata kerja "GET" untuk mendapatkan seluruh daftar kejadian jika aplikasi mengikuti arsitektur berbasis REST.
Jadi misalnya jika ada Event dengan ID 1, maka detail event tersebut bisa kita dapatkan melalui URL. http: // contoh / peristiwa / 1
Apa itu objek $ resource
Objek $ resource di Angular membantu bekerja dengan server yang melayani aplikasi pada arsitektur berbasis REST.
Sintaks dasar pernyataan @resource bersama dengan berbagai fungsi diberikan di bawah ini
Sintaks pernyataan @resource
var resource Object = $resource(url);
Setelah Anda memiliki resourceObject, Anda dapat menggunakan fungsi di bawah ini untuk melakukan panggilan REST yang diperlukan.
1. get ([params], [success], [error]) - Ini dapat digunakan untuk membuat panggilan GET standar.
2. save ([params], postData, [success], [error]) - Ini dapat digunakan untuk membuat panggilan POST standar.
3. query ([params], [success], [error]) - Ini dapat digunakan untuk membuat panggilan GET standar, tetapi array dikembalikan sebagai bagian dari respons.
4. remove ([params], postData, [success], [error]) - Ini dapat digunakan untuk membuat panggilan DELETE standar.
Di semua fungsi yang diberikan di bawah ini, parameter 'params' dapat digunakan untuk memberikan parameter yang diperlukan, yang perlu diteruskan di URL.
Sebagai contoh,
- Misalkan Anda mengirimkan nilai Topik: 'Angular' sebagai 'param' dalam fungsi get sebagai
- get (' http: // example / events ', '{Topic:' Angular '}')
- URL http: // example / events? Topic = Angular dipanggil sebagai bagian dari fungsi get.
Cara menggunakan $ resource property
Untuk menggunakan properti $ resource, langkah-langkah berikut harus diikuti:
Langkah 1) File "angular-resource.js" perlu diunduh dari situs Angular.JS dan harus ditempatkan di aplikasi.
Langkah 2) Modul aplikasi harus mendeklarasikan ketergantungan pada modul "ngResource" untuk menggunakan $ resource.
Pada 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 pada contoh berikut.
Jika Anda melakukan ini, objek $ resource akan memiliki kemampuan untuk memanggil fungsionalitas yang diperlukan yang diekspos oleh titik akhir REST.
Contoh berikut memanggil URL titik akhir: http: // example / events / 1
angular.module('DemoApp.services').factory('Entry', function($resource){return $resource('/example/Event/:1); // Note the full endpoint address});
Dalam contoh di atas, hal-hal berikut sedang dilakukan
-
Saat mendefinisikan aplikasi Angular, sebuah layanan sedang dibuat dengan menggunakan pernyataan 'DemoApp.services' di mana DemoApp adalah nama yang diberikan ke aplikasi Angular kami.
-
Metode .factory digunakan untuk membuat detail layanan baru ini.
-
'Entri' adalah nama yang kami berikan ke layanan kami yang dapat berupa nama apa pun yang ingin Anda berikan.
-
Dalam layanan ini, kami membuat fungsi yang akan memanggil API $ resource
-
$ resource ('/ example / Event /: 1).
Fungsi $ resource adalah layanan yang digunakan untuk memanggil titik akhir REST. Titik akhir REST biasanya berupa URL. Dalam fungsi di atas, kami menggunakan URL (/ example / Event /: 1) sebagai titik akhir REST kami. Endpoint REST kami (/ example / Event /: 1) menunjukkan bahwa ada aplikasi Event yang ada di "contoh" situs utama kami. Aplikasi Event ini dikembangkan dengan menggunakan arsitektur berbasis REST.
-
Hasil dari pemanggilan fungsi adalah objek kelas sumber daya. Objek sumber daya sekarang akan memiliki fungsi (get (), query (), save (), remove (), delete ()) yang bisa dipanggil.
Langkah 4) Sekarang kita dapat menggunakan metode yang dikembalikan pada langkah di atas (yaitu get (), query (), save (), remove (), delete ()) di controller kita.
Dalam potongan kode di bawah ini, kami menggunakan fungsi get () sebagai contoh
Mari kita lihat kode yang dapat 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 cuplikan di atas mengeluarkan permintaan GET ke / example / Event /: 1.
- Parameter: 1 pada URL diganti dengan $ scope.id.
- Fungsi get () akan mengembalikan objek kosong yang diisi secara otomatis ketika data aktual berasal dari server.
- Argumen kedua untuk get () adalah callback yang dijalankan ketika data datang dari server. Keluaran yang mungkin dari seluruh kode adalah objek JSON yang akan mengembalikan daftar Peristiwa yang terekspos dari situs web "contoh".
Contoh dari apa yang bisa dikembalikan ditampilkan di bawah ini
{{ 'EventName' : 'Angular , 'EventDescription' : 'Angular Basics'},{ 'EventName' : 'Node , 'EventDescription' : 'Node Basics'},{ 'EventName' : 'Programming in C++ , 'EventDescription' : 'C++ Basics'}}
Interaksi server tingkat rendah dengan $ http
$ Http adalah layanan JS Angular lain yang digunakan untuk membaca data dari server jarak jauh. Bentuk data paling populer yang dibaca dari server adalah data dalam format JSON.
Mari kita asumsikan, bahwa kita memiliki 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 kita lihat kode AngularJS menggunakan $ http, yang dapat digunakan untuk mendapatkan data di atas dari server
Pada contoh di atas
- Kami menambahkan layanan $ http ke fungsi Controller kami sehingga kami dapat menggunakan fungsi "get" dari layanan $ http.
- Kami sekarang menggunakan fungsi get dari layanan HTTP untuk mendapatkan objek JSON dari URL http: // example /angular/getTopics.PHP
- Berdasarkan objek 'response', kami membuat fungsi panggilan balik yang akan mengembalikan record data dan selanjutnya kami menyimpannya di objek $ scope.
- Kami kemudian dapat menggunakan variabel $ scope.names dari controller dan menggunakannya dalam tampilan kami untuk menampilkan objek JSON yang sesuai.
Mengambil data dari server yang menjalankan SQL dan MySQL
Angular juga dapat digunakan untuk mengambil data dari server yang menjalankan MySQL atau SQL.
Idenya adalah jika Anda memiliki halaman PHP yang terhubung ke database MySQL atau halaman Asp.Net yang terhubung ke database server MS SQL, maka Anda perlu memastikan bahwa halaman PHP dan ASP.Net menampilkan data dalam format JSON.
Mari kita asumsikan, kita memiliki situs PHP ( http: // example /angular/getTopics.PHP ) yang menyajikan data dari database MySQL atau SQL.
Langkah 1) Langkah pertama adalah memastikan bahwa halaman PHP mengambil data dari database MySQL dan menyajikan data dalam format JSON.
Langkah 2) Tulis kode serupa yang ditunjukkan di atas untuk menggunakan layanan $ http untuk mendapatkan data JSON.
Mari kita lihat kode AngularJS menggunakan $ http yang dapat digunakan untuk mendapatkan data di atas dari server
Langkah 3) Render data dalam tampilan Anda menggunakan direktif ng-repeat.
Di bawah ini kami menggunakan direktif ng-repeat untuk melewati setiap key-value pair di objek JSON yang dikembalikan oleh metode "get" dari layanan $ http.
Untuk setiap objek JSON, kami menampilkan kunci yaitu "Nama" dan nilainya adalah "Deskripsi".
{{x.Name}} {{x.Description}}
Ringkasan:
- Kami telah melihat apa itu arsitektur RESTFUL, yang tidak lain adalah fungsionalitas yang diekspos oleh aplikasi web berdasarkan kata kerja HTTP normal dari GET, POST, PUT dan DELETE.
- Objek $ resource digunakan dengan Angular untuk berinteraksi dengan aplikasi web RESTFUL pada tingkat tinggi yang berarti bahwa kita hanya memanggil fungsionalitas yang diekspos oleh aplikasi web tetapi tidak peduli bagaimana fungsionalitas tersebut diimplementasikan.
- Kami juga melihat layanan $ http yang dapat digunakan untuk mendapatkan data dari aplikasi web. Ini dimungkinkan karena layanan $ http dapat bekerja dengan aplikasi web pada tingkat yang lebih rinci.
- Karena kekuatan layanan $ http, ini dapat digunakan untuk mendapatkan data dari MySQL atau MS SQL Server melalui aplikasi PHP. Data kemudian bisa dirender dalam tabel menggunakan direktif ng-repeat.