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 相关文章推荐
通过 Dom 方法提高 innerHTML 性能
Mar 26 Javascript
js 设置选中行的样式的实现代码
May 24 Javascript
jquery中ajax调用json数据的使用说明
Mar 17 Javascript
jquery插件开发注意事项小结
Jun 04 Javascript
javascript for-in有序遍历json数据并探讨各个浏览器差异
Nov 30 Javascript
浅谈JavaScript异步编程
Jan 20 Javascript
微信小程序中实现一对多发消息详解及实例代码
Feb 14 Javascript
vue2实现移动端上传、预览、压缩图片解决拍照旋转问题
Apr 13 Javascript
详解vue2.0 transition 多个元素嵌套使用过渡
Jun 19 Javascript
JavaScript执行环境及作用域链实例分析
Aug 01 Javascript
基于vue.js中关于下拉框的值默认及绑定问题
Aug 22 Javascript
JavaScript严格模式不支持八进制的问题讲解
Nov 07 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生成EXCEL的东东
2006/10/09 PHP
php 无限级数据JSON格式及JS解析
2010/07/17 PHP
PHP代码网站如何防范SQL注入漏洞攻击建议分享
2012/03/01 PHP
基于php中使用excel的简单介绍
2013/08/02 PHP
PHP实现判断数组是一维、二维或几维的方法
2017/02/06 PHP
PHP基于socket实现客户端和服务端通讯功能
2017/07/13 PHP
PHP中递归的实现实例详解
2017/11/14 PHP
php设计模式之备忘模式分析【星际争霸游戏案例】
2020/03/24 PHP
location.href语句与火狐不兼容的问题
2010/07/04 Javascript
在JavaScript中获取请求的URL参数[正则]
2010/12/25 Javascript
解析Javascript中大括号“{}”的多义性
2013/12/02 Javascript
jQuery使用ajaxSubmit()提交表单示例
2014/04/04 Javascript
js中各种类型的变量在if条件中是true还是false
2014/07/16 Javascript
Jquery动态添加输入框的方法
2015/05/29 Javascript
ES6新特性三: Generator(生成器)函数详解
2017/04/21 Javascript
webpack4 从零学习常用配置(小结)
2019/05/28 Javascript
vue+elementUI 复杂表单的验证、数据提交方案问题
2019/06/24 Javascript
JavaScript实现简单的图片切换功能(实例代码)
2020/04/10 Javascript
在vue中配置不同的代理同时访问不同的后台操作
2020/09/11 Javascript
Vue中nprogress页面加载进度条的方法实现
2020/11/13 Javascript
python检测远程udp端口是否打开的方法
2015/03/14 Python
virtualenv实现多个版本Python共存
2017/08/21 Python
Python实现调度算法代码详解
2017/12/01 Python
python基于socket实现的UDP及TCP通讯功能示例
2019/11/01 Python
Python json模块与jsonpath模块区别详解
2020/03/05 Python
Pytorch 使用不同版本的cuda的方法步骤
2020/04/02 Python
Kmeans均值聚类算法原理以及Python如何实现
2020/09/26 Python
CSS类名支持中文命名的示例
2014/04/04 HTML / CSS
html5配合css3实现带提示文字的输入框(摆脱js)
2013/03/08 HTML / CSS
NBA欧洲商店(英国):NBA Europe Store UK
2018/07/27 全球购物
大学老师推荐信
2014/02/25 职场文书
员工趣味活动方案
2014/08/27 职场文书
2014年车间工作总结
2014/11/21 职场文书
2015公务员年度考核评语
2015/03/25 职场文书
面试被问select......for update会锁表还是锁行
2021/11/11 MySQL
vue-cil之axios的二次封装与proxy反向代理使用说明
2022/04/07 Vue.js