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 相关文章推荐
javascript 面向对象,实现namespace,class,继承,重载
Oct 29 Javascript
jquery lazyload延迟加载技术的实现原理分析
Jan 24 Javascript
jquery插件格式实例分析
Jun 16 Javascript
AngularJs Managing Service Dependencies详解
Sep 02 Javascript
JavaScript实现url参数转成json形式
Sep 25 Javascript
微信小程序 判断手机号的实现代码
Apr 19 Javascript
vue实现商城购物车功能
Nov 27 Javascript
Vue2.5 结合 Element UI 之 Table 和 Pagination 组件实现分页功能
Jan 26 Javascript
vue-baidu-map 进入页面自动定位的解决方案(推荐)
Apr 28 Javascript
JS实现520 表白简单代码
May 21 Javascript
JavaScript函数的4种调用方法实例分析
Mar 05 Javascript
js+canvas实现两张图片合并成一张图片的方法
Nov 01 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 从数据库提取二进制图片的处理代码
2009/09/09 PHP
一些需要禁用的PHP危险函数(disable_functions)
2012/02/23 PHP
PHP 读取Postgresql中的数组
2013/04/14 PHP
浅谈使用PHP开发微信支付的流程
2015/10/04 PHP
PHP程序员的技术成长规划
2016/03/25 PHP
PHP Filter过滤器全面解析
2016/08/09 PHP
解决laravel(5.5)访问public报错的问题
2019/10/12 PHP
基于jquery的loading效果实现代码
2010/11/05 Javascript
JQuery设置和去除disabled属性的5种方法总结
2013/05/16 Javascript
node.js中的console.info方法使用说明
2014/12/09 Javascript
js函数内变量的作用域分析
2015/01/12 Javascript
SWFObject基本用法实例分析
2015/07/20 Javascript
JS验证邮件地址格式方法小结
2015/12/01 Javascript
JavaScript进阶练习及简单实例分析
2016/06/03 Javascript
详解Vue 事件驱动和依赖追踪
2017/04/22 Javascript
关于Vue单页面骨架屏实践记录
2017/12/13 Javascript
vue 做移动端微信公众号采坑经验记录
2018/04/26 Javascript
利用百度echarts实现图表功能简单入门示例【附源码下载】
2019/06/10 Javascript
Vue使用vue-recoure + http-proxy-middleware + vuex配合promise实现基本的跨域请求封装
2019/10/21 Javascript
Vue关于组件化开发知识点详解
2020/05/13 Javascript
浅谈JavaScript中等号、双等号、 三等号的区别
2020/08/06 Javascript
探究Python中isalnum()方法的使用
2015/05/18 Python
Python使用matplotlib绘制三维图形示例
2018/08/25 Python
python GUI库图形界面开发之PyQt5状态栏控件QStatusBar详细使用方法实例
2020/02/28 Python
Python 解析库json及jsonpath pickle的实现
2020/08/17 Python
CSS3使用多列制作瀑布流
2016/05/10 HTML / CSS
css3实现背景模糊的三种方式(小结)
2020/05/15 HTML / CSS
AmazeUI 评论列表的实现示例
2020/08/13 HTML / CSS
英国健身仓库:Bodybuilding Warehouse
2019/03/06 全球购物
美国一家著名的手表在线折扣网站:Discount Watch Store
2020/02/24 全球购物
工地门卫岗位职责
2013/12/30 职场文书
进步之星获奖感言
2014/02/22 职场文书
社区网格化管理实施方案
2014/03/21 职场文书
《画杨桃》教学反思
2014/04/13 职场文书
三年级小学生评语
2014/04/22 职场文书
竞选体育委员演讲稿
2014/04/26 职场文书