真正的應用需要和真實的伺服器進行互動,行動裝置 App和新興的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>
正如我們前面講過的,從長遠來看,讓服務來代理與伺服器互動的工作對我們有好處,這個服務可以被多個控制器共用。