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 相关文章推荐
父窗口获取弹出子窗口文本框的值
Jun 27 Javascript
javascript实现网页字符定位的方法
Jul 14 Javascript
JavaScript中几种排序算法的简单实现
Jul 29 Javascript
原生js的数组除重复简单实例
May 24 Javascript
JavaScript实现的CRC32函数示例
Nov 23 Javascript
JavaScript数组迭代方法
Mar 03 Javascript
Bootstrap fileinput组件封装及使用详解
Mar 10 Javascript
详解React 在服务端渲染的实现
Nov 16 Javascript
vue-cli webpack2项目打包优化分享
Feb 07 Javascript
vue的安装及element组件的安装方法
Mar 09 Javascript
vue组件横向树实现代码
Aug 02 Javascript
jQuery HTML设置内容和属性操作实例分析
May 20 jQuery
完美兼容各大浏览器获取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数组操作
2011/12/30 PHP
php类中private属性继承问题分析
2012/11/01 PHP
php简单开启gzip压缩方法(zlib.output_compression)
2013/04/13 PHP
WordPress中重置文章循环的rewind_posts()函数讲解
2016/01/11 PHP
php中Redis的应用--消息传递
2017/03/28 PHP
用jscript实现新建word文档
2007/06/15 Javascript
js模拟类继承小例子
2010/07/17 Javascript
js实现屏蔽默认快捷键调用自定义事件示例
2013/06/18 Javascript
jquery(hide方法)隐藏指定元素实例
2013/11/11 Javascript
分享28款免费实用的 JQuery 图片和内容滑块插件
2014/12/15 Javascript
15个常用的jquery代码片段
2015/12/19 Javascript
JQuery查找子元素find()和遍历集合each的方法总结
2017/03/07 Javascript
vue编译打包本地查看index文件的方法
2018/02/23 Javascript
jQuery实现浏览器之间跳转并传递参数功能【支持中文字符】
2018/03/28 jQuery
mpvue小程序仿qq左滑置顶删除组件
2018/08/03 Javascript
vue+axios+mock.js环境搭建的方法步骤
2018/08/28 Javascript
微信小程序实现同一页面取值的方法分析
2019/04/30 Javascript
Vue 实现输入框新增搜索历史记录功能
2019/10/15 Javascript
微信小程序全选多选效果实现代码解析
2020/01/21 Javascript
javascript使用Blob对象实现的下载文件操作示例
2020/04/18 Javascript
在vue中使用echarts(折线图的demo,markline用法)
2020/07/20 Javascript
布同自制Python函数帮助查询小工具
2011/03/13 Python
Python快速从注释生成文档的方法
2016/12/26 Python
浅析python协程相关概念
2018/01/20 Python
Python实现串口通信(pyserial)过程解析
2019/09/25 Python
Selenium自动化测试工具使用方法汇总
2020/06/12 Python
python3.9和pycharm的安装教程并创建简单项目的步骤
2021/02/03 Python
YOOX美国官方网站:全球著名的多品牌时尚网络概念店
2016/09/11 全球购物
Paul’s Boutique官网:英国时尚手袋品牌
2018/03/31 全球购物
下面代码从性能上考虑,有什么问题
2015/04/03 面试题
如何清空Session
2015/02/23 面试题
综治工作汇报材料
2014/10/27 职场文书
暑假打工感想
2015/08/07 职场文书
Python OpenCV超详细讲解调整大小与图像操作的实现
2022/04/02 Python
MySQL8.0 Undo Tablespace管理详解
2022/06/16 MySQL
Java结构型设计模式之组合模式详解
2022/09/23 Java/Android