angularjs實現與服務器交互分享
更新時間：2014年06月24日 10:16:26 投稿：hebedich
AngularJS是Google開發(fā)的純客戶端JavaScript技術的WEB框架,用于擴展、增強HTML功能,它專為構建強大的WEB應用而設計。
真正的應用需要和真實的服務器進行交互，移動應用和新興的Chrome桌面應用可能是個例外，但是對于此外的所有應用來說，無論你是想把數據持久化到云端，還是需要與其他用戶進行實時交互，都需要讓應用與服務器進行交互。
為了實現這一點，Angular提供了一個叫做$http的服務。它提供了一個可擴展的抽象方法列表，使得與服務器的交互更加容易。它支持HTTP、JSONP和CORS方式。它還包含了安全性支持，避免JSON格式的脆弱性和XSRF。它讓你可以輕松地轉換請求和響應數據，甚至還實現了簡單的緩存。
例如，我們打算讓購物站點從服務器上獲取商品信息，而不是從內存假數據獲取。如何編寫服務端代碼已經超越了本書的范疇，所以，我們僅僅來想象一下，比方說我們已經創(chuàng)建了一個服務器，當查詢/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 select加載數據選中默認值的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
詳解基于Bootstrap+angular的一個豆瓣電影app
本篇文章主要介紹了基于Bootstrap+angular的一個豆瓣電影app ，非常具有實用價值，需要的朋友可以參考下2017-06-06
這篇文章主要介紹了Angular2 NgModule 模塊詳解的相關資料,并附簡單實例，需要的朋友可以參考下2016-10-10
AngularJS基礎 ng-model 指令詳解及示例代碼
本文主要介紹AngularJS ng-model 指令,這里幫大家整理了ng-model的基本資料,并附有示例代碼,有需要的小伙伴可以參考下2016-08-08
Angular依賴注入optional?constructor?parameters概念
這篇文章主要為大家介紹了Angular?依賴注入領域里?optional?constructor?parameters?的概念及使用,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-11-11
這篇文章主要介紹了AngularJS select設置默認值的實現方法的相關資料,這里提供實現方法幫助大家實現這樣的功能，需要的朋友可以參考下2017-08-08
在Angular?中不管是模板驅動表單還是響應式表單,對于動態(tài)創(chuàng)建表單的支持都很好,下面這篇文章主要給大家介紹了關于angular表單動態(tài)驗證的一種新思路,需要的朋友可以參考下2022-03-03
深入解析AngularJS框架中$scope的作用與生命周期
這篇文章主要介紹了AngularJS中$scope的作用與生命周期,包括在DOM中添加controller對象的相關用法,需要的朋友可以參考下2016-03-03
本文主要介紹AngularJS API（接口）,這里對AngularJS API的知識做了詳細講解,并附簡單代碼實例,有需要的小伙伴可以參考下2016-07-07
路由是實現單頁面應用的一種方式,通過監(jiān)聽hash或者history的變化,渲染不同的組件,起到局部更新的作用,避免每次URL變化都向服務器請求數據,本文給大家介紹Angular 中的路由,感興趣的朋友一起看看吧2023-11-11