angularjs實作與伺服器互動分享_AngularJS
- WBOY原創
- 2016-05-16 16:43:141447瀏覽
真正的應用需要和真實的伺服器進行交互，移動應用和新興的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>
正如我們前面講過的，從長遠來看，讓服務來代理與伺服器互動的工作對我們有好處，這個服務可以被多個控制器共享。
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn