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 相关文章推荐
JS面向对象编程浅析
Aug 28 Javascript
document.execCommand()的用法小结
Jan 08 Javascript
JS将所有对象s的属性复制给对象r(原生js+jquery)
Jan 25 Javascript
浅谈JS继承_寄生式继承 &amp; 寄生组合式继承
Aug 16 Javascript
Servlet实现文件上传,可多文件上传示例
Dec 05 Javascript
javaScript基础详解
Jan 19 Javascript
js中Number数字数值运算后值不对的解决方法
Feb 28 Javascript
Express URL跳转(重定向)的实现方法
Apr 07 Javascript
Angular 组件之间的交互的示例代码
Mar 24 Javascript
vue强制刷新组件的方法示例
Feb 28 Javascript
jquery实现拖拽添加元素功能
Dec 01 jQuery
vue下拉刷新组件的开发及slot的使用详解
Dec 23 Vue.js
完美兼容各大浏览器获取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
php array的学习笔记
2012/05/10 PHP
php实现中文转数字
2016/02/18 PHP
WordPress中设置Post Type自定义文章类型的实例教程
2016/05/10 PHP
使用WAMP搭建PHP本地开发环境
2017/05/10 PHP
PHP网页缓存技术优点及代码实例
2020/07/29 PHP
jquery 定位input元素的几种方法小结
2013/07/28 Javascript
js查找某元素中的所有图片地址的方法
2014/01/16 Javascript
JavaScript中创建字典对象(dictionary)实例
2015/03/31 Javascript
jQuery代码实现发展历程时间轴特效
2015/07/30 Javascript
教你用javascript实现随机标签云效果_附代码
2016/03/16 Javascript
使用js获取地址栏参数的方法推荐(超级简单)
2016/06/14 Javascript
prototype.js常用函数详解
2016/06/18 Javascript
Angular2平滑升级到Angular4的步骤详解
2017/03/29 Javascript
Bootbox将后台JSON数据填充Form表单的实例代码
2018/09/10 Javascript
element-ui多文件上传的实现示例
2019/04/10 Javascript
图解javascript作用域链
2019/05/27 Javascript
Vue 解决父组件跳转子路由后当前导航active样式消失问题
2020/07/21 Javascript
全面了解Python的getattr(),setattr(),delattr(),hasattr()
2016/06/14 Python
django上传图片并生成缩略图方法示例
2017/12/11 Python
pygame实现贪吃蛇游戏(下)
2019/10/29 Python
HTML5 客户端数据库简易使用:IndexedDB
2019/12/19 HTML / CSS
魔声耳机官方网站:Monster是世界第一品牌的高性能耳机
2016/10/26 全球购物
攀岩、滑雪、徒步旅行装备:Black Diamond Equipment
2019/08/16 全球购物
美国孕妇装购物网站:Motherhood Maternity
2019/09/22 全球购物
linux比较文件内容的命令是什么
2013/03/04 面试题
打架检讨书300字
2014/02/02 职场文书
小学标准化建设汇报材料
2014/08/16 职场文书
软环境建设心得体会
2014/09/09 职场文书
公司离职证明范本(5篇)
2014/09/17 职场文书
湖南省召开党的群众路线教育实践活动总结大会报告
2014/10/21 职场文书
车间统计员岗位职责
2015/04/14 职场文书
四年级语文教学反思
2016/03/03 职场文书
超市啤酒狂欢夜策划方案范文!
2019/07/03 职场文书
2019七夕节祝福语36句,快来收藏吧
2019/08/06 职场文书
3招让你摆脱即兴讲话冷场尴尬
2019/08/08 职场文书
Java 在生活中的 10 大应用
2021/11/02 Java/Android