angularjs与服务器交互

标签: angularjs 服务器 | 发表时间:2014-06-24 07:24 | 作者:www19940501a
出处:http://blog.csdn.net

真正的应用需要和真实的服务器进行交互,移动应用和新兴的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>

正如我们前面讲过的,从长远来看,让服务来代理与服务器交互的工作对我们有好处,这个服务可以被多个控制器共享。

来自《AngularJS开发下一代Web应用》一书 

在线版在 https://github.com/edagarli/AngularJSWeb

作者:www19940501a 发表于2014-6-23 23:24:43 原文链接
阅读:126 评论:0 查看评论

相关 [angularjs 服务器] 推荐:

angularjs与服务器交互

- - CSDN博客Web前端推荐文章
真正的应用需要和真实的服务器进行交互,移动应用和新兴的Chrome桌面应用可能是个例外,但是对于此外的所有应用来说,无论你是想把数据持久化到云端,还是需要与其他用户进行实时交互,都需要让应用与服务器进行交互. 为了实现这一点,Angular提供了一个叫做$http的服务. 它提供了一个可扩展的抽象方法列表,使得与服务器的交互更加容易.

AngularJS与服务器交互

- - JavaScript - Web前端 - ITeye博客
        对于AJAX应用(使用XMLHttpRequests)来说,向服务器发起请求的传统方式是:获取一个XMLHttpRequest对象的引用、发起请求、读取响应、检查状态码,最后处理服务端的响应. }else if(xmlhttp.status == 400) { //或者可以是任何以4开头的状态码.

学习AngularJS实例

- - Web前端 - ITeye博客
怎么样快速学习AngularJS. 相信很多初学者都有过或者类似的疑问,其实这个问题没有标准的答案,每个人的技术背景、工作经验等等都不经相同,所以学习AngularJS的切入点肯定也就不同,我之前初略使用过knockoutjs,当我第一眼看到AngularJS的Helloworld案例后,顿时就被声明式的语法和强大的双向绑定特性所吸引.

AngularJS表单验证

- - JavaScript - Web前端 - ITeye博客
        通过AngularJS我们不仅可以隐藏/显示错误提示消息,高亮输入框,还可以通过编写指令来随心所欲的控制表单验证方式. $scope.reset=function(){ //表单重置. 表单验证.
表单验证
.

AngularJS基本特性介绍

- - ITeye博客
使用AngularJS非常简单,如下:. 以指令ng-app定义AngularJS的作用域,然后引入angular-1.0.1.min.js,这就是AngularJS的Hello World,简单但是无用. HTML执行表达式(Expressions). AngularJS允许在HTML直接执行表达式,如下:.

使用AngularJS构建大型Web应用

- - InfoQ cn
AngularJS是由Google创建的一种JS框架,使用它可以扩展应用程序中的HTML词汇,从而在web应用程序中使用HTML声明动态内容. 在该团队工作的软件工程师 Brian Ford近日撰写了一篇 blog,分享了如何使用AngularJS构建大型Web应用的经验. 这些经验对于使用其他JS框架构建大型应用的开发者也极具借鉴意义.

使用angularJS的三个重要原因

- - Web前端 - ITeye博客
如果你不熟悉什么是Angular.js的话,小编我强烈推荐你阅读 Javascript教程:AngularJS的五个超酷特性. 简单来说Angular.js是google开发者设计和开发的一套前端开发框架,帮助你简化前端开发的负担. 当然,这里有很多其它的前端开发框架,但是如何选择合适的前端框架对于我们这些开发人员来说就不是那么容易了.

AngularJS的IE浏览器兼容性

- - JavaScript - Web前端 - ITeye博客
        如果你要让你的AngularJS应用兼容IE8和IE8以下的版本的话,你需要做一些特殊处理. 要让你的AngularJS应用在IE中正常运行你必须:.     a.确保JSON字符串能被正常解析(IE7需要),你可以使用JSON2或者JSON3来实现.     b.不能使用自定义的元素标签,如(你只能使用属性的形式,如
).

借助AngularJS写优雅的代码

- - 四火的唠叨
接触 AngularJS还真有点碰巧,在用JQuery写数据绑定的时候,我被数据对象和DOM之间的同步整烦了,要写一大堆方法绑定和取值/设值的代码逻辑,丑得要死. 数据对象发生变更以后,要及时更新DOM树;. 用户操作改变DOM树以后,要回头更新数据对象. 这个问题还是举例来说清楚一些,比如我定义了这样一个queryObj:.

AngularJS 最常用的八种功能

- - Web前端 - ITeye博客
本文地址: http://zhaoyanblog.com/archives/99.html. 第一 迭代输出之ng-repeat标签. ng-repeat让table ul ol等标签和js里的数组完美结合. 你甚至可以指定输出的顺序:. 第二 动态绑定之ng-model标签. 任何有用户输入,只要是有值的html标签,都可以动态绑定js中的变量,.