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 相关文章推荐
Firebug 字幕文件JSON地址获取代码
Oct 28 Javascript
js 字符串转化成数字的代码
Jun 29 Javascript
验证码在IE中不刷新而谷歌等浏览器正常的解决方案
Mar 18 Javascript
Javascript核心读书有感之语句
Feb 11 Javascript
JavaScript中计算网页中某个元素的位置
Jun 10 Javascript
jQuery实现响应鼠标背景变化的动态菜单效果代码
Aug 27 Javascript
基于JS代码实现当鼠标悬停表格上显示这一格的全部内容
Jun 12 Javascript
AngularJS自定义插件实现网站用户引导功能示例
Nov 07 Javascript
Angular中封装fancyBox(图片预览)遇到问题小结
Sep 01 Javascript
深入浅析Vue.js计算属性和侦听器
May 05 Javascript
JQuery判断radio单选框是否选中并获取值的方法
Jan 17 jQuery
帮你彻底搞懂JS中的prototype、__proto__与constructor(图解)
Aug 23 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+DBM的同学录程序(2)
2006/10/09 PHP
用PHP实现多级树型菜单
2006/10/09 PHP
PHP版本常用的排序算法汇总
2015/12/20 PHP
php-app开发接口加密详解
2018/04/18 PHP
PHP封装cURL工具类与应用示例
2019/07/01 PHP
Nigma vs Liquid BO3 第二场2.14
2021/03/10 DOTA
超越Jquery_01_isPlainObject分析与重构
2010/10/20 Javascript
2010年最佳jQuery插件整理
2010/12/06 Javascript
基于jQuery实现的当离开页面时出现提示的实现代码
2011/06/27 Javascript
javaScript函数中执行C#代码中的函数方法总结
2013/08/07 Javascript
Js中的onblur和onfocus事件应用介绍
2013/08/27 Javascript
jQuery+ajax实现鼠标单击修改内容的方法
2014/06/27 Javascript
JavaScript立即执行函数的三种不同写法
2014/09/05 Javascript
如何减少浏览器的reflow和repaint
2015/02/26 Javascript
JavaScript实现的字符串replaceAll函数代码分享
2015/04/02 Javascript
基于javascript实现动态时钟效果
2020/08/18 Javascript
JavaScript图像延迟加载库Echo.js
2016/04/05 Javascript
jQuery中的deferred对象和extend方法详解
2017/05/08 jQuery
微信小程序中使用Promise进行异步流程处理的实例详解
2017/08/17 Javascript
TypeScript中的方法重载详解
2019/04/12 Javascript
vue滚动固定顶部及修改样式的实例代码
2019/05/30 Javascript
js数据类型转换与流程控制操作实例分析
2019/12/18 Javascript
python数据类型_元组、字典常用操作方法(介绍)
2017/05/30 Python
pandas 使用均值填充缺失值列的小技巧分享
2019/07/04 Python
python 使用pdfminer3k 读取PDF文档的例子
2019/08/27 Python
Python使用qrcode二维码库生成二维码方法详解
2020/02/17 Python
Python3标准库之threading进程中管理并发操作方法
2020/03/30 Python
Python grequests模块使用场景及代码实例
2020/08/10 Python
HTML5不支持标签和新增标签详解
2016/06/27 HTML / CSS
职业技术学校毕业生推荐信
2013/12/03 职场文书
爱国演讲稿400字
2014/05/07 职场文书
乳制品整治工作方案
2014/05/29 职场文书
2015届本科毕业生自我鉴定
2014/09/27 职场文书
解决python3安装pandas出错的问题
2021/05/20 Python
Python中glob库实现文件名的匹配
2021/06/18 Python
win10清理dns缓存
2022/04/19 数码科技