Rumah > Artikel > hujung hadapan web > angularjs melaksanakan perkongsian interaktif dengan server_AngularJS

angularjs melaksanakan perkongsian interaktif dengan server_AngularJS

WBOYasal: 2016-05-16 16:43:141414semak imbas

Aplikasi sebenar perlu berinteraksi dengan pelayan sebenar dan aplikasi desktop Chrome yang muncul mungkin pengecualian, tetapi untuk semua aplikasi lain, sama ada anda mahu meneruskan data ke awan atau perlu berkomunikasi dengan yang lain Untuk interaksi masa nyata. , pengguna perlu membiarkan aplikasi berinteraksi dengan pelayan.

Untuk mencapai matlamat ini, Angular menyediakan perkhidmatan yang dipanggil $http. Ia menyediakan senarai kaedah abstrak yang boleh diperluaskan untuk memudahkan interaksi dengan pelayan. Ia menyokong kaedah HTTP, JSONP dan CORS. Ia juga termasuk sokongan keselamatan untuk mengelakkan kelemahan format JSON dan XSRF. Ia membolehkan anda mengubah data permintaan dan tindak balas dengan mudah dan juga melaksanakan caching mudah.

Sebagai contoh, kami berhasrat untuk membenarkan tapak beli-belah mendapatkan maklumat produk daripada pelayan dan bukannya mendapatkan data palsu daripada ingatan. Cara menulis kod sebelah pelayan adalah di luar skop buku ini, jadi mari bayangkan kami telah mencipta pelayan yang, apabila menanyakan laluan /products, mengembalikan senarai produk dalam format JSON.

Contoh respons yang dikembalikan adalah seperti berikut:

[

 {

  "id": 0,

  "title": "Paint pots",

  "description": "Pots full of paint",

  "price": 3.95

 },

 {

  "id": 1,

  "title": "Polka dots",

  "description": "Dots with that polka groove",

  "price": 12.95

 },

 {

  "id": 2,

  "title": "Pebbles",

  "description": "Just little rocks, really",

  "price": 6.95

 }

 ...etc...

]

Kita boleh menulis kod pertanyaan seperti ini:

function ShoppingController($scope, $http) {

 $http.get('/products').success(function(data, status, headers, config) {

  $scope.items = data;

 });

}

Kemudian gunakannya dalam templat anda seperti ini:

<body ng-controller="ShoppingController">

  <h1>Shop!</h1>

  <table>

   <tr ng-repeat="item in items">

    <td>{{item.title}}</td>

    <td>{{item.description}}</td>

    <td>{{item.price | currency}}</td>

   </tr>

  </table>

 </div>

</body>

Seperti yang kami katakan sebelum ini, dalam jangka masa panjang, ia akan memberi manfaat kepada kami untuk mempunyai proksi perkhidmatan yang berfungsi untuk berinteraksi dengan pelayan Perkhidmatan ini boleh dikongsi oleh berbilang pengawal.

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：kod contoh acara klik mengikat jquery untuk tag_jqueryArtikel seterusnya：kod contoh acara klik mengikat jquery untuk tag_jquery

Artikel berkaitan

Lihat lagi