angularjs实现与服务器交互分享


Posted in Javascript onJune 24, 2014

真正的应用需要和真实的服务器进行交互,移动应用和新兴的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>

正如我们前面讲过的,从长远来看,让服务来代理与服务器交互的工作对我们有好处,这个服务可以被多个控制器共享。

Javascript 相关文章推荐
Prototype使用指南之enumerable.js
Jan 10 Javascript
使用onbeforeunload属性后的副作用
Mar 08 Javascript
用jquery实现的一个超级简单的下拉菜单
May 18 Javascript
纯js实现div内图片自适应大小(已测试,兼容火狐)
Jun 16 Javascript
javascript中bind函数的作用实例介绍
Sep 28 Javascript
JQuery获取鼠标进入和离开容器的方向
Dec 29 Javascript
详解redux异步操作实践
Aug 15 Javascript
vue-vuex中使用commit提交mutation来修改state的方法详解
Sep 16 Javascript
30分钟快速实现小程序语音识别功能
Nov 27 Javascript
JavaScript常见事件对象与操作实例总结
Jan 05 Javascript
详解如何在Vue项目中导出Excel
Apr 19 Javascript
Vue+iview+webpack ie浏览器兼容简单处理
Sep 20 Javascript
完美兼容各大浏览器获取HTTP_REFERER方法总结
Jun 24 #Javascript
Javascript学习笔记之 函数篇(二) : this 的工作机制
Jun 24 #Javascript
Javascript学习笔记之 函数篇(一) : 函数声明和函数表达式
Jun 24 #Javascript
Javascript学习笔记之 对象篇(四) : for in 循环
Jun 24 #Javascript
Javascript学习笔记之 对象篇(三) : hasOwnProperty
Jun 24 #Javascript
js实现div闪烁原理及实现代码
Jun 24 #Javascript
Javascript 学习笔记之 对象篇(二) : 原型对象
Jun 24 #Javascript
You might like
SONY ICF-SW55的电路分析
2021/03/02 无线电
php中变量及部分适用方法
2008/03/27 PHP
php中大括号作用介绍
2012/03/22 PHP
php运行提示:Fatal error Allowed memory size内存不足的解决方法
2014/12/17 PHP
PHP针对中英文混合字符串长度判断及截取方法示例
2017/03/31 PHP
PHP addslashes()函数讲解
2019/02/03 PHP
Laravel配置全局公共函数的方法步骤
2019/05/09 PHP
php转换上传word文件为PDF的方法【基于COM组件】
2019/06/10 PHP
IE网页js语法错误2行字符1、FF中正常的解决方法
2013/09/09 Javascript
jQuery 删除或是清空某个HTML元素示例
2014/08/04 Javascript
js实现同一个页面多个渐变效果的方法
2015/04/10 Javascript
Jquery实现瀑布流布局(备有详细注释)
2015/07/31 Javascript
jQuery过滤HTML标签并高亮显示关键字的方法
2015/08/07 Javascript
JS异步文件分片断点上传的实现思路
2016/12/25 Javascript
DataTables添加额外的查询参数和删除columns等无用参数实例
2017/07/04 Javascript
vue.js中引入vuex储存接口数据及调用的详细流程
2017/12/14 Javascript
30分钟快速实现小程序语音识别功能
2018/11/27 Javascript
JQuery实现ajax请求的示例和注意事项
2018/12/10 jQuery
深入学习python的yield和generator
2016/03/10 Python
GDAL 矢量属性数据修改方式(python)
2020/03/10 Python
mac系统下安装pycharm、永久激活、中文汉化详细教程
2020/11/24 Python
详解使用HTML5的classList属性操作CSS类
2017/10/13 HTML / CSS
介绍一下OSI七层模型
2012/07/03 面试题
医学护理毕业生自荐信
2013/11/07 职场文书
人事部岗位职责范本
2014/03/05 职场文书
个人承诺书格式
2014/06/03 职场文书
爱护公物标语
2014/06/24 职场文书
装饰公司活动策划方案
2014/08/23 职场文书
小学毕业典礼演讲稿
2014/09/09 职场文书
小学生田径运动会广播稿
2014/09/11 职场文书
员工2014年度工作总结
2014/12/09 职场文书
销售业务员岗位职责
2015/02/13 职场文书
会计工作态度自我评价
2015/03/06 职场文书
position:sticky 粘性定位的几种巧妙应用详解
2021/04/24 HTML / CSS
如何解决php-fpm启动不了问题
2021/11/17 PHP
Mysql的Table doesn't exist问题及解决
2022/12/24 MySQL