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 document.images实例
May 27 Javascript
jquery实现加载等待效果示例
Sep 25 Javascript
javascript中SetInterval与setTimeout的定时器用法
Aug 24 Javascript
微信小程序 加载 app-service.js 错误解决方法
Oct 12 Javascript
JS正则子匹配实例分析
Dec 22 Javascript
angular2倒计时组件使用详解
Jan 12 Javascript
canvas的神奇用法
Feb 03 Javascript
Bootstrap路径导航与分页学习使用
Feb 08 Javascript
深入剖析Express cookie-parser中间件实现示例
Feb 01 Javascript
微信小程序自定义组件之可清除的input组件
Jul 17 Javascript
Vue实现动态添加或者删除对象和对象数组的操作方法
Sep 21 Javascript
利用node 判断打开的是文件 还是 文件夹的实例
Jun 10 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模板引擎SMARTY
2006/10/09 PHP
类的另类用法--数据的封装
2006/10/09 PHP
随机广告显示(PHP函数)
2006/10/09 PHP
PHP MVC模式在网站架构中的实现分析
2010/03/04 PHP
php url路由入门实例
2014/04/23 PHP
浅谈Eclipse PDT调试PHP程序
2014/06/09 PHP
PHP实现随机生成水印图片功能
2017/03/22 PHP
关于php支持的协议与封装协议总结(推荐)
2017/11/17 PHP
LaravelS通过Swoole加速Laravel/Lumen详解
2018/03/02 PHP
让网页根据不同IE版本显示不同的内容
2009/02/08 Javascript
JSON序列化与解析原生JS方法且IE6和chrome测试通过
2013/09/05 Javascript
JS Replace 全部替换字符的用法小结
2013/12/24 Javascript
通过扫描二维码打开app的实现代码
2016/11/10 Javascript
Node.js+ELK日志规范的实现
2019/05/23 Javascript
JS+DIV实现拖动效果
2020/02/11 Javascript
JavaScript实现轮播图片完整代码
2020/03/07 Javascript
JavaScript如何实现监听键盘输入和鼠标监点击
2020/07/20 Javascript
使用Python进行新浪微博的mid和url互相转换实例(10进制和62进制互算)
2014/04/25 Python
解析Python中的变量、引用、拷贝和作用域的问题
2015/04/07 Python
Python实现将不规范的英文名字首字母大写
2016/11/15 Python
python3制作捧腹网段子页爬虫
2017/02/12 Python
python 二分查找和快速排序实例详解
2017/10/13 Python
Python使用progressbar模块实现的显示进度条功能
2018/05/31 Python
把csv文件转化为数组及数组的切片方法
2018/07/04 Python
详解django中使用定时任务的方法
2018/09/27 Python
python 数据生成excel导出(xlwt,wlsxwrite)代码实例
2019/08/23 Python
OpenCV+face++实现实时人脸识别解锁功能
2019/08/28 Python
使用Python爬虫库requests发送请求、传递URL参数、定制headers
2020/01/25 Python
python3+opencv生成不规则黑白mask实例
2020/02/19 Python
完美解决TensorFlow和Keras大数据量内存溢出的问题
2020/07/03 Python
Python3+PyCharm+Django+Django REST framework配置与简单开发教程
2021/02/16 Python
教师对学生的寄语
2014/04/03 职场文书
快餐公司创业计划书
2014/04/29 职场文书
国贸专业毕业求职信
2014/06/11 职场文书
英语自我介绍演讲稿
2014/09/01 职场文书
java泛型通配符详解
2021/07/25 Java/Android