Simple AngularJS Front-End untuk REST API

1. Ikhtisar

Dalam tutorial singkat ini kita akan belajar bagaimana menggunakan RESTful API dari front-end AngularJS sederhana.

Kami akan menampilkan data dalam tabel, membuat sumber daya, memperbaruinya, dan akhirnya menghapusnya.

2. REST API

Pertama, mari kita lihat API sederhana kami - mengekspos sumber daya Feed dengan pagination:

  • mendapatkan paginasi - GET / api / myFeeds? page = {page} & size = {size} & sortDir = {dir} & sort = {propertyName}
  • buat - POST / api / myFeeds
  • perbarui - PUT / api / myFeeds / {id}
  • hapus - HAPUS / api / myFeeds / {id}

Catatan singkatnya di sini adalah bahwa penomoran halaman menggunakan 4 parameter berikut:

  • halaman : indeks halaman yang diminta
  • size [ukuran] : jumlah maksimum record per halaman
  • sort : nama properti yang digunakan dalam pengurutan
  • sortDir : arah penyortiran

Dan berikut adalah contoh tampilan resource Feed :

{ "id":1, "name":"baeldung feed", "url":"/feed" }

3. Halaman Feed

Sekarang, mari kita lihat halaman feed kami:

      Add New RSS Feed 
    
{{row.name}} {{row.url}} Edit Delete

Perhatikan bahwa kami menggunakan ng-table untuk menampilkan data - lebih lanjut tentang itu di bagian berikut.

4. Pengontrol Sudut

Selanjutnya, mari kita lihat pengontrol AngularJS kami:

var app = angular.module('myApp', ["ngTable", "ngResource"]); app.controller('mainCtrl', function($scope, NgTableParams, $resource) { ... });

Perhatikan bahwa:

  • Kami menyuntikkan modul ngTable untuk digunakan untuk menampilkan data kami dalam tabel yang ramah pengguna dan menangani operasi pagination / penyortiran
  • Kami juga memasukkan modul ngResource untuk menggunakannya untuk mengakses resource REST API kami

5. An AngularJS DataTable

Sekarang mari kita lihat sekilas modul ng-table - berikut konfigurasinya:

$scope.feed = $resource("api/myFeeds/:feedId",{feedId:'@id'}); $scope.tableParams = new NgTableParams({}, { getData: function(params) { var queryParams = { page:params.page() - 1, size:params.count() }; var sortingProp = Object.keys(params.sorting()); if(sortingProp.length == 1){ queryParams["sort"] = sortingProp[0]; queryParams["sortDir"] = params.sorting()[sortingProp[0]]; } return $scope.feed.query(queryParams, function(data, headers) { var totalRecords = headers("PAGING_INFO").split(",")[0].split("=")[1]; params.total(totalRecords); return data; }).$promise; } });

API mengharapkan gaya penomoran halaman tertentu, jadi kita perlu menyesuaikannya di sini di tabel untuk mencocokkannya. Kami menggunakan params dari ng-module dan membuat queryParams kami sendiri di sini.

Beberapa catatan tambahan tentang pagination:

  • params.page () dimulai dari 1 jadi kita juga perlu memastikannya menjadi nol diindeks saat berkomunikasi dengan API
  • params.sorting () mengembalikan objek - misalnya {"name": "asc"} , jadi kita perlu memisahkan kunci dan nilai sebagai dua parameter berbeda - sort , sortDir
  • kami mengekstrak jumlah elemen total dari header HTTP dari Respon

6. Lebih Banyak Operasi

Akhirnya, kita dapat melakukan banyak operasi menggunakan modul ngResource - $ resource mencakup semantik HTTP lengkap dalam hal operasi yang tersedia. Kami juga dapat menentukan fungsionalitas khusus kami.

Kami telah menggunakan kueri di bagian sebelumnya untuk mendapatkan daftar umpan. Perhatikan bahwa get dan query melakukan GET - tetapi query digunakan untuk menangani respons array.

6.1. Tambahkan Umpan Baru

Untuk menambahkan feed baru kita akan menggunakan metode $ resource save - sebagai berikut:

$scope.feed = {name:"New feed", url: "//www.example.com/feed"}; $scope.createFeed = function(){ $scope.feeds.save($scope.feed, function(){ $scope.tableParams.reload(); }); }

6.2. Perbarui Feed

Kita dapat menggunakan metode kustom kita sendiri dengan $ resource - sebagai berikut:

$scope.feeds = $resource("api/myFeeds/:feedId",{feedId:'@id'},{ 'update': { method:'PUT' } }); $scope.updateFeed = function(){ $scope.feeds.update($scope.feed, function(){ $scope.tableParams.reload(); }); } 

Perhatikan bagaimana kami mengonfigurasi metode pembaruan kami sendiri untuk mengirimkan permintaan PUT .

6.3. Hapus Feed

Terakhir, kita dapat menghapus feed dengan menggunakan metode delete :

$scope.confirmDelete = function(id){ $scope.feeds.delete({feedId:id}, function(){ $scope.tableParams.reload(); }); }

7. Dialog AngularJs

Sekarang, mari kita lihat bagaimana menggunakan modul ngDialog untuk menampilkan formulir sederhana untuk menambah / memperbarui feed kita.

Berikut adalah template kami, kami dapat menentukannya di halaman HTML terpisah atau di halaman yang sama:

{{feed.name}}

Save

Dan kemudian kami akan membuka dialog kami untuk menambah / mengedit umpan:

$scope.addNewFeed = function(){ $scope.feed = {name:"New Feed", url: ""}; ngDialog.open({ template: 'templateId', scope: $scope}); } $scope.editFeed = function(row){ $scope.feed.id = row.id; $scope.feed.name = row.name; $scope.feed.url = row.url; ngDialog.open({ template: 'templateId', scope: $scope}); } $scope.save = function(){ ngDialog.close('ngdialog1'); if(! $scope.feed.id){ $scope.createFeed(); } else{ $scope.updateFeed(); } }

Perhatikan bahwa:

  • $ scope.save () dipanggil ketika pengguna mengklik tombol Simpan di dialog kita
  • $scope.addNewFeed() is called when user clicks Add New Feed button in feeds page – it initializes a new Feed object (without id)
  • $scope.editFeed() is called when user wants to edit a specific row in Feeds table

8. Error Handling

Finally, let's see how to handle response error messages using AngularJS.

In order to handle server error responses globally – instead of per request – we'll register an interceptor to the $httpProvider:

app.config(['$httpProvider', function ($httpProvider) { $httpProvider.interceptors.push(function ($q,$rootScope) { return { 'responseError': function (responseError) { $rootScope.message = responseError.data.message; return $q.reject(responseError); } }; }); }]);

And here's our message representation in HTML:

 {{message}} 

9. Conclusion

This was a quick writeup of consuming a REST API from AngularJS.

The implementasi penuh dari tutorial ini dapat ditemukan dalam proyek github - ini adalah proyek berbasis Eclipse, sehingga harus mudah untuk impor dan berjalan seperti itu.