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 自定义的联动下拉框
Feb 07 Javascript
jquery $.getJSON()跨域请求
Dec 21 Javascript
jQuery中bind(),live(),delegate(),on()绑定事件方法实例详解
Jan 19 Javascript
Bootstrap基本组件学习笔记之进度条(15)
Dec 08 Javascript
canvas的神奇用法
Feb 03 Javascript
关于jQuery EasyUI 中刷新Tab选项卡后一个页面变形的解决方法
Mar 02 Javascript
Vue2.0实现购物车功能
Jun 05 Javascript
vue项目中axios使用详解
Feb 07 Javascript
用react-redux实现react组件之间数据共享的方法
Jun 08 Javascript
JavaScript实现构造json数组的方法分析
Aug 17 Javascript
vue element table中自定义一些input的验证操作
Jul 18 Javascript
Vant+postcss-pxtorem 实现浏览器适配功能
Feb 05 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
使用apache模块rewrite_module (转)
2007/02/14 PHP
php与mysql建立连接并执行SQL语句的代码
2011/07/04 PHP
慎用preg_replace危险的/e修饰符(一句话后门常用)
2013/06/19 PHP
免费手机号码归属地API查询接口和PHP使用实例分享
2014/04/10 PHP
PHP5.3与5.5废弃与过期函数整理汇总
2014/07/10 PHP
PHP与Ajax相结合实现登录验证小Demo
2016/03/16 PHP
PHP注释语法规范与命名规范详解篇
2018/01/21 PHP
PHP7 foreach() 函数修改
2021/03/09 PHP
jQuery获取文本节点之 text()/val()/html() 方法区别
2011/03/01 Javascript
SeaJS入门教程系列之完整示例(三)
2014/03/03 Javascript
jsPDF导出pdf示例
2014/05/02 Javascript
jquery获取radio值实例
2014/10/16 Javascript
javascript委托(Delegate)blur和focus用法实例分析
2015/05/26 Javascript
vueJS简单的点击显示与隐藏的效果【实现代码】
2016/05/03 Javascript
JS中对象与字符串的互相转换详解
2016/05/20 Javascript
JavaScript地理位置信息API
2016/06/11 Javascript
详解js运算符单竖杠“|”与“||”的用法和作用介绍
2016/11/04 Javascript
详谈angularjs中路由页面强制更新的问题
2017/04/24 Javascript
jQuery开源组件BootstrapValidator使用详解
2017/06/29 jQuery
基于rem的移动端响应式适配方案(详解)
2017/07/07 Javascript
vue如何判断dom的class
2018/04/26 Javascript
详解Koa中更方便简单发送响应的方式
2018/07/20 Javascript
简谈创建React Component的几种方式
2019/06/15 Javascript
Python cx_freeze打包工具处理问题思路及解决办法
2016/02/13 Python
python分布式环境下的限流器的示例
2017/10/26 Python
1分钟快速生成用于网页内容提取的xslt
2018/02/23 Python
Python使用Pandas库实现MySQL数据库的读写
2019/07/06 Python
pytorch 图像预处理之减去均值,除以方差的实例
2020/01/02 Python
Python3实现监控新型冠状病毒肺炎疫情的示例代码
2020/02/13 Python
HTML5 通信API 跨域门槛将不再高、数据推送也不再是梦
2013/04/25 HTML / CSS
德国隐形眼镜店:LuckyLens
2018/07/29 全球购物
市场总经理岗位职责
2014/04/11 职场文书
帮一个朋友写的求职信
2014/08/09 职场文书
亮剑观后感
2015/06/05 职场文书
网络妈妈观后感
2015/06/08 职场文书
护士年终工作总结不会写?各科护士模板总结
2020/01/02 职场文书