angularjs與伺服器互動

edagarli發表於2014-06-23
AngularJS伺服器

真正的應用需要和真實的伺服器進行互動，移動應用和新興的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>

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

來自《AngularJS開發下一代Web應用》一書 

線上版在https://github.com/edagarli/AngularJSWeb

相關文章