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 相关文章推荐
jQuery的12招常用技巧分享
Aug 08 Javascript
Javascript学习笔记之 对象篇(三) : hasOwnProperty
Jun 24 Javascript
jquery实现简单的二级导航下拉菜单效果
Sep 07 Javascript
jQuery结合CSS制作动态的下拉菜单
Oct 27 Javascript
ES6记录异步函数的执行时间详解
Aug 31 Javascript
详解Angular2中的编程对象Observable
Sep 17 Javascript
javascript高级模块化require.js的具体使用方法
Oct 31 Javascript
Angular实现的内置过滤器orderBy排序与模糊查询功能示例
Dec 29 Javascript
微信小程序网络请求封装示例
Jul 24 Javascript
Vue项目引进ElementUI组件的方法
Nov 11 Javascript
基于vue实现一个禅道主页拖拽效果
May 27 Javascript
微信小程序自定义底部弹出框动画
Nov 18 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 删除记录同时删除图片文件的实现代码
2010/05/12 PHP
基于python发送邮件的乱码问题的解决办法
2013/04/25 PHP
Smarty模板常见的简单应用分析
2016/11/15 PHP
php实现水印文字和缩略图的方法示例
2016/12/29 PHP
PHP数字前补0的自带函数sprintf 和number_format的用法(详解)
2017/02/06 PHP
如何离线执行php任务
2017/02/21 PHP
php+resumablejs实现的分块上传 断点续传功能示例
2017/04/18 PHP
JS控制显示隐藏兼容问题(IE6、IE7、IE8)
2010/04/01 Javascript
用Jquery重写windows.alert方法实现思路
2013/04/03 Javascript
对于this和$(this)的个人理解
2013/09/08 Javascript
浅析JavaScript函数的调用模式
2016/08/10 Javascript
Bootstrap按钮功能之查询按钮和重置按钮
2016/10/26 Javascript
jQuery的ready方法实现原理分析
2016/10/26 Javascript
利用jQuery插件imgAreaSelect实现图片上传裁剪(放大缩小)
2016/12/02 Javascript
JavaScript实现旋转轮播图
2020/08/18 Javascript
详解Vue路由History mode模式中页面无法渲染的原因及解决
2017/09/28 Javascript
vue使用mint-ui实现下拉刷新和无限滚动的示例代码
2017/11/06 Javascript
js实现简单的随机点名器
2020/09/17 Javascript
[06:23]2014DOTA2西雅图国际邀请赛 小组赛7月12日TOPPLAY
2014/07/12 DOTA
[00:09]DOTA2新版本PA至宝特效动作展示
2014/11/19 DOTA
Python中分数的相关使用教程
2015/03/30 Python
Python基于递归算法实现的走迷宫问题
2017/08/04 Python
详解Python用户登录接口的方法
2019/04/17 Python
python selenium 执行完毕关闭chromedriver进程示例
2019/11/15 Python
Windows10+anacond+GPU+pytorch安装详细过程
2020/03/24 Python
Python3爬虫带上cookie的实例代码
2020/07/28 Python
HTML5 MiranaVideo播放器 (代码开源)
2010/06/11 HTML / CSS
日本PLST在线商店:日本时尚杂志刊载的人气服装
2016/12/10 全球购物
加拿大休闲和工业服装和鞋类零售商:L’Équipeur
2018/01/12 全球购物
临床医学系毕业生推荐信
2013/11/09 职场文书
一封普通求职者的求职信
2013/11/20 职场文书
学生实习推荐信范文
2013/11/26 职场文书
珍珠奶茶店创业计划书
2014/01/11 职场文书
会议接待欢迎词
2014/01/12 职场文书
人与自然观后感
2015/06/16 职场文书
使用pipenv管理python虚拟环境的全过程
2021/09/25 Python