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 相关文章推荐
ExtJS Store的数据访问与更新问题
Apr 28 Javascript
js模拟类继承小例子
Jul 17 Javascript
jQuery UI 应用不同Theme的办法
Sep 12 Javascript
深入理解JavaScript系列(10) JavaScript核心(晋级高手必读篇)
Jan 15 Javascript
jQuery实现类似滑动门切换效果的层切换
Sep 23 Javascript
jQuery插件EasyUI校验规则 validatebox验证框
Nov 29 Javascript
javascript入门之string对象【新手必看】
Nov 22 Javascript
js 博客内容进度插件详解
Feb 19 Javascript
微信小程序实现实时圆形进度条的方法示例
Feb 24 Javascript
js浏览器滚动条卷去的高度scrolltop(实例讲解)
Jul 07 Javascript
微信小程序利用云函数获取手机号码
Dec 17 Javascript
详解js中的原型,原型对象,原型链
Jul 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/12/06 PHP
javascript开发技术大全-第1章javascript概述
2011/07/03 Javascript
解决jquery submit()提交表单提示:f[s] is not a function
2013/01/23 Javascript
jquery mobile事件多次绑定示例代码
2013/09/13 Javascript
网页中表单按回车就自动提交的问题的解决方案
2014/11/03 Javascript
JavaScritp添加url参数并将参数加入到url中及更改url参数的方法
2015/10/26 Javascript
js读取并解析JSON类型数据的方法
2015/11/14 Javascript
JavaScript实现刷新不重记的倒计时
2016/08/10 Javascript
Vue.js之slot深度复制详解
2017/03/10 Javascript
jQuery滚动插件scrollable.js用法分析
2017/05/25 jQuery
JQuery.dataTables表格插件添加跳转到指定页
2017/06/09 jQuery
使用webpack构建应用的方法步骤
2019/03/04 Javascript
迅速了解一下ES10中Object.fromEntries的用法使用
2019/03/05 Javascript
vue使用一些外部插件及样式的配置代码
2019/11/18 Javascript
微信h5静默和非静默授权获取用户openId的方法和步骤
2020/06/08 Javascript
js实现ajax的用户简单登入功能
2020/06/18 Javascript
react+antd 递归实现树状目录操作
2020/11/02 Javascript
使用Django和Python创建Json response的方法
2018/03/26 Python
通过实例解析Python调用json模块
2019/12/11 Python
Python抓包并解析json爬虫的完整实例代码
2020/11/03 Python
地图可视化神器kepler.gl python接口的使用方法
2020/12/22 Python
extern是什么意思
2016/03/10 面试题
英文版餐饮运营管理求职信
2013/11/06 职场文书
饲料采购员岗位职责
2013/12/19 职场文书
四年级科学教学反思
2014/02/10 职场文书
健康教育评估方案
2014/05/25 职场文书
超市优秀员工获奖感言
2014/08/15 职场文书
个人师德师风自我剖析材料
2014/09/29 职场文书
2015年度个人业务工作总结
2015/04/27 职场文书
惹女朋友生气检讨书
2015/05/06 职场文书
预备党员半年考察意见
2015/06/01 职场文书
消费者理赔投诉书
2015/07/02 职场文书
高中物理教学反思
2016/02/19 职场文书
怎样写好演讲稿题目?
2019/08/21 职场文书
Python中常见的导入方式总结
2021/05/06 Python
Redis6.0搭建集群Redis-cluster的方法
2021/05/08 Redis