快捷導(dǎo)航

angularjs實(shí)現(xiàn)與服務(wù)器交互分享

更新時(shí)間：2014年06月24日 10:16:26 投稿：hebedich

AngularJS是Google開(kāi)發(fā)的純客戶(hù)端JavaScript技術(shù)的WEB框架,用于擴(kuò)展、增強(qiáng)HTML功能,它專(zhuān)為構(gòu)建強(qiáng)大的WEB應(yīng)用而設(shè)計(jì)。

真正的應(yīng)用需要和真實(shí)的服務(wù)器進(jìn)行交互，移動(dòng)應(yīng)用和新興的Chrome桌面應(yīng)用可能是個(gè)例外，但是對(duì)于此外的所有應(yīng)用來(lái)說(shuō)，無(wú)論你是想把數(shù)據(jù)持久化到云端，還是需要與其他用戶(hù)進(jìn)行實(shí)時(shí)交互，都需要讓?xiě)?yīng)用與服務(wù)器進(jìn)行交互。

為了實(shí)現(xiàn)這一點(diǎn)，Angular提供了一個(gè)叫做$http的服務(wù)。它提供了一個(gè)可擴(kuò)展的抽象方法列表，使得與服務(wù)器的交互更加容易。它支持HTTP、JSONP和CORS方式。它還包含了安全性支持，避免JSON格式的脆弱性和XSRF。它讓你可以輕松地轉(zhuǎn)換請(qǐng)求和響應(yīng)數(shù)據(jù)，甚至還實(shí)現(xiàn)了簡(jiǎn)單的緩存。

例如，我們打算讓購(gòu)物站點(diǎn)從服務(wù)器上獲取商品信息，而不是從內(nèi)存假數(shù)據(jù)獲取。如何編寫(xiě)服務(wù)端代碼已經(jīng)超越了本書(shū)的范疇，所以，我們僅僅來(lái)想象一下，比方說(shuō)我們已經(jīng)創(chuàng)建了一個(gè)服務(wù)器，當(dāng)查詢(xún)/products 路徑時(shí)，它會(huì)以JSON格式返回一個(gè)商品列表。

返回的響應(yīng)示例如下：

[

 {

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

]

我們可以像下面這樣編寫(xiě)查詢(xún)代碼：

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>

正如我們前面講過(guò)的，從長(zhǎng)遠(yuǎn)來(lái)看，讓服務(wù)來(lái)代理與服務(wù)器交互的工作對(duì)我們有好處，這個(gè)服務(wù)可以被多個(gè)控制器共享。

您可能感興趣的文章: