首頁 > web前端 > js教程 > angularjs實作與伺服器互動分享_AngularJS

angularjs實作與伺服器互動分享_AngularJS

WBOY
發布: 2016-05-16 16:43:14
原創
1481 人瀏覽過

真正的應用需要和真實的伺服器進行交互,移動應用和新興的Chrome桌面應用可能是個例外,但是對於此外的所有應用來說,無論你是想把數據持久化到雲端,還是需要與其他使用者進行即時交互,都需要讓應用程式與伺服器進行交互。

為了實現這一點,Angular提供了一個叫做$http的服務。它提供了一個可擴展的抽象方法列表,使得與伺服器的互動更加容易。它支援HTTP、JSONP和CORS方式。它還包含了安全性支持,避免JSON格式的脆弱性和XSRF。它讓你可以輕鬆地轉換請求和回應數據,甚至實現了簡單的快取。

例如,我們打算讓購物站點從伺服器上獲取商品信息,而不是從內存假數據獲取。如何寫服務端程式碼已經超越了本書的範疇,所以,我們只是想像一下,比方說我們已經創建了一個伺服器,當查詢/products 路徑時,它會以JSON格式傳回一個商品列表。

回傳的回應範例如下:

[

 {

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

]

登入後複製

我們可以像下面這樣寫查詢程式碼:

function ShoppingController($scope, $http) {

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

  $scope.items = data;

 });

}
登入後複製

然後在模板中這樣使用它:

<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>
登入後複製

正如我們前面講過的,從長遠來看,讓服務來代理與伺服器互動的工作對我們有好處,這個服務可以被多個控制器共享。

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板