AngularJS AJAX

AJAX adalah kependekan dari Asynchronous JavaSkrip dan XML. AJAX terutama dirancang untuk memperbarui bagian halaman web, tanpa memuat ulang seluruh halaman.

Alasan merancang teknologi ini adalah untuk mengurangi jumlah perjalanan bolak-balik yang dilakukan antara klien dan server dan jumlah penyegaran seluruh halaman yang biasanya dilakukan setiap kali pengguna memerlukan informasi tertentu.

AJAX memungkinkan halaman web diperbarui secara asinkron dengan bertukar sejumlah kecil data dengan server di balik layar. Ini berarti memungkinkan untuk memperbarui bagian-bagian halaman web, tanpa memuat ulang seluruh halaman.

Banyak aplikasi web modern yang mengikuti teknik ini untuk menyegarkan halaman atau mengambil data dari server.

Interaksi tingkat tinggi dengan server menggunakan $resource

Angular menyediakan dua API berbeda untuk menangani permintaan Ajax. Mereka

$sumber daya
$http

Kita akan melihat properti “$resource” di Angular, yang digunakan untuk berinteraksi dengan server pada tingkat tinggi.

Ketika kita berbicara tentang interaksi 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 detail sehubungan dengan fungsionalitas ini.

Misalnya, jika server menjadi host suatu aplikasi yang mengelola informasi karyawan suatu perusahaan tertentu, server tersebut mungkin memaparkan fungsionalitas kepada klien seperti GetEmployeeDetails, SetEmployeeDetails, dan lain-lain.

Jadi pada dasarnya, kita tahu apa yang dapat dilakukan kedua fungsi ini, dan kita dapat memanggilnya menggunakan properti $resource. Namun, kita tidak tahu persis detail fungsi “GetEmployeeDetails” dan “SetEmployeeDetails”, dan bagaimana cara penerapannya.

Penjelasan di atas menerangkan apa yang disebut sebagai arsitektur berbasis REST.

REST dikenal sebagai Representational State Transfer, yang merupakan arsitektur yang dianut di banyak sistem berbasis web modern.
Artinya Anda dapat menggunakan kata kerja HTTP normal GET, POST, PUT dan DELETE untuk bekerja dengan aplikasi berbasis web.

Jadi mari kita asumsikan, kita mempunyai aplikasi web yang mengelola daftar Kegiatan.

Jika kita ingin melihat daftar semua peristiwa,

Aplikasi web dapat mengekspos URL seperti http://example/events dan
Kita dapat menggunakan kata kerja “GET” untuk mendapatkan seluruh daftar kejadian jika aplikasi mengikuti arsitektur berbasis REST.

Jadi misalnya, jika ada Peristiwa dengan ID 1, maka kita bisa mendapatkan detail peristiwa ini melalui URL. http://example/events/1

Apa yang dimaksud dengan objek $resource

Objek $resource di Angular membantu dalam bekerja dengan server yang melayani aplikasi pada arsitektur berbasis REST.

Sintaks dasar pernyataan @resource beserta berbagai fungsinya 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. hapus([params], postData, [sukses], [kesalahan]) – Ini dapat digunakan untuk membuat panggilan DELETE standar.

Dalam semua fungsi yang diberikan di bawah ini, parameter 'params' dapat digunakan untuk menyediakan parameter yang diperlukan, yang harus diteruskan dalam URL.

Sebagai contoh,

Misalkan Anda meneruskan nilai Topik: 'Angular' sebagai 'param' dalam fungsi get as
mendapatkan('http://example/events' ,'{ Topik: 'Sudut' }')
URL-nya http://example/events?Topic=Angular dipanggil sebagai bagian dari fungsi get.

Cara menggunakan properti $resource AngularJS

Untuk menggunakan properti $resource, langkah-langkah berikut perlu 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.

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.

Jika Anda melakukan ini, maka objek $resource akan memiliki kemampuan untuk menjalankan 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, layanan dibuat dengan menggunakan pernyataan 'DemoApp.services' di mana DemoApp adalah nama yang diberikan untuk aplikasi Angular kami.
Metode .factory digunakan untuk membuat rincian layanan baru ini.
'Entri' adalah nama yang kami berikan pada layanan kami yang dapat berupa nama apa pun yang ingin Anda berikan.
Dalam layanan ini, kami membuat fungsi yang akan memanggil $resource API
$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. Titik akhir REST kami (/example /Event/:1) menunjukkan bahwa ada aplikasi Event yang berada di situs utama kami “example”. 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() , delete(), delete() ) yang dapat dipanggil.

Langkah 4) Kita sekarang dapat menggunakan metode yang dikembalikan pada langkah di atas (yang merupakan get() , query() , save() , delete(), delete() ) di pengontrol kita.

Dalam cuplikan kode di bawah ini, kita 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 /contoh /Event/:1.
Parameter:1 pada URL diganti dengan $scope.id.
Fungsi get() akan mengembalikan objek kosong yang diisi secara otomatis ketika data sebenarnya berasal dari server.
Argumen kedua untuk get() adalah panggilan balik yang dijalankan ketika data tiba dari server. Output yang mungkin dari keseluruhan kode adalah objek JSON yang akan mengembalikan daftar Peristiwa yang diekspos dari situs web “contoh”. Contoh dari apa yang dapat dikembalikan ditunjukkan 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 Angular JS 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, kita mempunyai a PHP halaman ( 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 mengambil data di atas dari server

<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>

Dalam contoh di atas

Kami menambahkan layanan $http ke fungsi Pengendali kami sehingga kami dapat menggunakan fungsi "dapatkan" 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 catatan data dan selanjutnya kami menyimpannya di objek $scope.
Kita kemudian dapat menggunakan variabel $scope.names dari pengontrol dan menggunakannya dalam tampilan kita untuk menampilkan objek JSON yang sesuai.

Cara Mengambil Data Dari Dari SQL dan MySQL Servernya menggunakan AngularJS

Angular juga dapat digunakan untuk mengambil data dari server yang sedang berjalan MySQL atau SQL.

Idenya adalah jika Anda memiliki halaman PHP yang terhubung ke a MySQL basis data atau sebuah Asp.Net halaman menghubungkan ke MS SQL database server, maka Anda perlu memastikan halaman PHP dan ASP.Net merender data dalam format JSON.

Berikut adalah Proses Langkah demi Langkah tentang Cara Mengambil Data Dari SQL dan MySQL Servernya menggunakan AngularJS.

Mari kita asumsikan, kita memiliki situs PHP (http://example /angular/getTopics.PHP) menyajikan data dari a MySQL atau basis data SQL.

Langkah 1) Ambil data dari a MySQL Database
Langkah pertama adalah memastikan bahwa halaman PHP mengambil data dari a MySQL database dan menyajikan data dalam format JSON.

Langkah 2) Dapatkan data JSON menggunakan layanan $http
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 mengambil data di atas dari server

<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>

Langkah 3) Render data dalam tampilan Anda menggunakan arahan ng-ulangi

Di bawah ini kita menggunakan direktif ng-repeat untuk menelusuri setiap pasangan nilai kunci dalam objek JSON yang dikembalikan oleh metode “get” dari layanan $http.

Untuk setiap objek JSON, kami menampilkan kunci yaitu “Nama” dan nilainya adalah “Description".

<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>

Ringkasan

Bentuk lengkap AJAX adalah Asynchronous JavaNaskah dan XML.
Kita telah melihat apa a TENANG Arsitektur adalah suatu fungsi yang diekspos oleh aplikasi web berdasarkan kata kerja HTTP normal GET, POST, PUT dan DELETE.
Objek $resource digunakan dengan Angular untuk berinteraksi dengan aplikasi web RESTFUL pada tingkat tinggi yang berarti bahwa kita hanya menjalankan 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. Hal ini dimungkinkan karena layanan $http dapat bekerja dengan aplikasi web pada tingkat yang lebih detail.
Karena kekuatan layanan $http, ini dapat digunakan untuk mendapatkan data dari a MySQL atau MS SQL Server melalui aplikasi PHP. Data kemudian dapat dirender dalam tabel menggunakan direktif ng-repeat.