angularjs melaksanakan perkongsian interaktif dengan server

angularjs melaksanakan perkongsian interaktif dengan server_AngularJS

WBOY

Lepaskan： 2016-05-16 16:43:14

asal

1415 orang telah melayarinya

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

]

Salin selepas log masuk

Kita boleh menulis kod pertanyaan seperti ini:

function ShoppingController($scope, $http) {

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

  $scope.items = data;

 });

}

Salin selepas log masuk

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>

Salin selepas log masuk

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.