AngularJS(八):http服务

本文也同步发表在我的公众号“我的天空

http服务

之前我们的示例都是在本地获取模拟数据,在实际应用中,所有的项目都将不可避免的从后台获取数据,我们都是通过Ajax来实现与服务器的通信。在AngularJS中,我们使用http服务来实现与后台的数据交互,http服务的使用请看以下代码:

var app=angular.module("myApp",[]);
    app.controller("person",function($scope,$http){
        $http.get(‘http://test.php‘)
       .success(function(data){
           //加载成功后的处理,data为返回的数据
       }).error(function(data){
           //加载失败后的处理,data为返回的数据
       })
     });

在以上代码中,我们在控制器代码中添加了$http模块,这样便可以使用http服务了,我们采取get的方式访问了一个url,随后在success()与error函数中分别针对加载成功或失败做相应的处理。测试http服务时请注意,所请求的url必须是在web服务上的,而不能在本地测试。如果要向后台传递参数,则应该添加params参数,如下:

$http.get(‘http://test.php‘,{params:{id:‘5‘,name:‘张三‘}
    }) .success(function(data){
           ......
    }).error(function(data){
           ......
     })

在以上代码中,我们添加了两个传递到后台的参数,分别是id和name,其值分别是“5”与“张三”。

如果要使用POST方式与后台通信,则应使用$http.post()方法,要注意的是params参数应该放在第三个参数位置,如下:

$http.post(‘http://test.php‘,‘‘,{params:{id:‘5‘,name:‘张三‘}})

通常,我们会给请求传递一个配置对象,以便灵活的对请求进行配置,其调用形式如下:$http(config),config为一个对象,可对其设置请求方式(get/post)、请求的url、传递参数、超时时间等。如以上的示例可写成如下代码:

$http({
    method:‘post‘,
    url:‘http://test.php‘,
    params:{id:5,name:‘张三‘}
   }).success(function(data){
        ......
   }).error(function(data){
       ......
  })

对于config的更多配置参数,可以查阅AngularJS相关文档。

时间: 2024-08-07 21:20:04

AngularJS(八):http服务的相关文章

转走进AngularJs(八) ng的路由机制

走进AngularJs(八) ng的路由机制 2013-12-19 我来说两句 收藏 我要投稿 今天心情不错~,公司请了个中医来给按摩拔罐刮痧,一套下来那个爽啊~,趁着精力充沛了解了下Angular的路由机制,在此分享出来与大家共同学习. 在谈路由机制前有必要先提一下现在比较流行的单页面应用,就是所谓的single page APP.为了实现无刷新的视图切换,我们通常会用ajax请求从后台取数据,然后套上HTML模板渲染在页面上,然而ajax的一个致命缺点就是导致浏览器后退按钮失效,尽管我们可以

angularjs学习笔记--服务

在angularjs中,服务是一个函数或对象,可在angularjs应用中使用.其中$location服务可以返回当前页面的url地址.要使用它,需要在controller中进行定义,作为一个参数传入到controller中. <!DOCTYPE html> <html lang="en"> <head> <script src="../angular/angular.js"></script> </

activiti搭建(四)八项服务介绍

转载请注明源地址:http://www.cnblogs.com/lighten/p/5927949.html 1.前言 之前学习的时候一直在其它文章看到activiti提供了七个接口来操作工作流,但在5.21版本中,查看源码发现目前是提供了八个服务.这里说个查看源码的小技巧,查看源码要弄明白创作者的思路,也就要看其写的功能模块和类的继承体系了,在eclipse中点击类名,按F4就能查看这个类的相关信息和继承了这个类的子类,一般都是点在抽象类和接口上,这样可以很快看到有些什么内容.举个例子,act

Angularjs[13] - 定义服务 $provide 中 provider 方法

服务本身是一个任意的对象,ng提供的服务过程涉及它的依赖注入机制. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div ng-app="myApp"> <div ng-controller=

AngularJs(三) deployd 服务的使用

使用服务建立数据 在AngularJS(二)中,我搭建好了deployd服务,现在启动服务,创建正在的数据(开始是使用模拟数据),使用cmd命令 一.开启Mongodb数据. 贴图: 二:测试是否正常开启,使用mongo命令.在CMD中输入: Mongodb默认建立的数据时test,说明mongodb已经开启. 三. 使用我们搭建好的deployd 服务建立数据,首先是开启服务. -p  表示:我的Mongodb数据库的默认端口是27017. 四.在dpd中输入 dashboard 命令: 后会

【AngularJS】—— 13 服务Service

在AngularJS中有很多的服务,常用的比如$http,$location等等. 本篇文章会介绍一下的内容: 1 $http这种Angular提供的服务的使用 2 如何自定义服务,并总结服务需要注意的几个小点. $http的使用 AngularJS为我们提供了很多种服务,$http用于发送http请求,动态的请求数据. 这样就需要使用web容器来运行代码了,先看看程序源码,视图方面还是跟普通的代码相同: <div ng-controller="myAppCtrl"> &l

走进AngularJs(八) ng的路由机制

在谈路由机制前有必要先提一下现在比较流行的单页面应用,就是所谓的single page APP.为了实现无刷新的视图切换,我们通常会用ajax请求从后台取数据,然后套上HTML模板渲染在页面上,然而ajax的一个致命缺点就是导致浏览器后退按钮失效,尽管我们可以在页面上放一个大大的返回按钮,让用户点击返回来导航,但总是无法避免用户习惯性的点后退.解决此问题的一个方法是使用hash,监听hashchange事件来进行视图切换,另一个方法是用HTML5的history API,通过pushState(

AngularJS订阅API服务

本篇使用AngularJS实现订阅某个API服务. 首页大致是: 其中,what's on显示首页内容,Search通过输入关键词调用API服务显示到页面,MyShows显示订阅的内容. Sarch页界面如下: 通过在搜索框中输入关键词,把查询到信息显示在当前页面,并且可以点击订阅和取消订阅按钮. My Shows页界面如下: 显示订阅的内容,并且提供取消订阅按钮. 首先,需要了解API提供方所要求的格式.大致是:http://api.themoviedb.org/3/search/tv?api

Node.js开发入门—使用AngularJS内置服务

在上一篇,"AngularJS简单示例"中演示了一个非常简单的使用Angular的小demo,那篇已经太长,原本要介绍的一些内容只好单另开篇了.这些内容,就是如何使用Angular服务. 我们还是基于"AngularJS简单示例"中的示例来改造一下.新的示例,能从Node.js+Express构造的服务器上获取管理菜单.为了实现这个,需要做几部分改造: 服务器提供adminMenu的下载功能,需要修改app.js,处理路由 修改Angular实现的控制器x-cont

AngularJS开发指南15:AngularJS的创建服务,将服务注入到控制器,管理服务依赖详解

创建服务 虽然AngularJS提供了很多有用的服务,但是如果你要创建一个很棒的应用,你可能还是要写自己的服务.你可以通过在模块中注册一个服务工厂函数,或者通过Module#factory api或者直接通过模块配置函数中的$provide api来实现. 所有的服务都符合依赖注入的原则.它们用一个唯一的名字将自己注册进AngularJS的依赖注入系统(injector),并且声明需要提供给工厂函数的依赖.它们的依赖在测试中可以是虚拟的,这使得它们能很好地被测试. 注册服务 要注册服务,你首先要