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 相关文章推荐
css图片自适应大小
Nov 28 Javascript
JS图片浏览组件PhotoLook的公开属性方法介绍和进阶实例代码
Nov 09 Javascript
基于jquery的回到页面顶部按钮
Jun 27 Javascript
弹出层之1:JQuery.Boxy (一) 使用介绍
Oct 06 Javascript
推荐8款jQuery轻量级树形Tree插件
Nov 12 Javascript
jQuery处理json数据返回数组和输出的方法
Mar 11 Javascript
Bootstrap项目实战之子栏目资讯内容
Apr 25 Javascript
Vue.js开发环境搭建
Nov 10 Javascript
使用vue实现简单键盘的示例(支持移动端和pc端)
Dec 25 Javascript
详解javascript常用工具类的封装
Jan 30 Javascript
深入浅析Node环境和浏览器的区别
Aug 14 Javascript
详解Vue中组件传值的多重实现方式
Aug 16 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
PHP面向对象编程快速入门
2006/10/09 PHP
PHP脚本的10个技巧(8)
2006/10/09 PHP
PHP APC缓存配置、使用详解
2014/03/06 PHP
在win7中搭建Linux+PHP 开发环境
2014/10/08 PHP
PHP getallheaders无法获取自定义头(headers)的问题
2016/03/23 PHP
php打乱数组二维数组多维数组的简单实例
2016/06/17 PHP
Cookie 注入是怎样产生的
2009/04/08 Javascript
jquery批量设置属性readonly和disabled的方法
2014/01/24 Javascript
浅谈jQuery中的事件
2015/03/23 Javascript
jQuery实现dialog设置focus焦点的方法
2015/06/10 Javascript
AngularJS表单验证中级篇(3)
2016/09/28 Javascript
用jQuery旋转插件jqueryrotate制作转盘抽奖
2017/02/10 Javascript
Vue-Router实现页面正在加载特效方法示例
2017/02/12 Javascript
vuejs父子组件之间数据交互详解
2017/08/09 Javascript
浅谈JavaScript作用域和闭包
2017/09/18 Javascript
让axios发送表单请求形式的键值对post数据的实例
2018/08/11 Javascript
微信小程序wx:for循环的实例详解
2018/10/07 Javascript
Vue 重置组件到初始状态的方法示例
2018/10/10 Javascript
vue使用Google地图的实现示例代码
2018/12/19 Javascript
初学node.js中实现删除用户路由
2019/05/27 Javascript
vue实现自定义H5视频播放器的方法步骤
2019/07/01 Javascript
jquery实现进度条状态展示
2020/03/26 jQuery
JavaScript中如何调用Java方法
2020/09/16 Javascript
原生js实现滑块区间组件
2021/01/20 Javascript
python实现将文本转换成语音的方法
2015/05/28 Python
替换python字典中的key值方法
2018/07/06 Python
django 自定义过滤器的实现
2019/02/26 Python
Python实现微信消息防撤回功能的实例代码
2019/04/29 Python
对pytorch中x = x.view(x.size(0), -1) 的理解说明
2021/03/03 Python
纯CSS3绘制打火机动画火焰效果
2016/07/18 HTML / CSS
人力资源部经理岗位职责规定
2014/02/23 职场文书
房屋出售协议书
2014/04/10 职场文书
灰雀教学反思
2014/04/28 职场文书
检讨书格式
2019/04/25 职场文书
演讲稿之开卷有益
2019/08/07 职场文书
Redis主从复制操作和配置详情
2022/09/23 Redis