angular服务

###$http
***


- 实现客户端与服务器端异步请求

get方式

test.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body ng-app="myApp">
<div ng-controller="myCtr">
{{data}}
</div> <script src="angular.min.js"></script>
<script src="jquery-3.1.1.min.js"></script>
<script>
var app = angular.module("myApp", [])
app.controller('myCtr', ["$scope","$http", function($scope,$http){
$http({ //$http配置快
method:'get',
url:'1.php',
cache:true //设置为true后,会将异步请求数据保存到缓存中,下次请求便不会请求服务器了,从缓存中取数据即可,减少服务器压力
}).then(function(response){ //then方法共有两个参数,第一个返回成功信息,第二个返回失败信息(与服务器异步请求有成功、失败两种情况)
$scope.data = response.data; //将返回信息的data字段作为数据绑定
},
function(response){ //第二个返回失败信息 })
}]);
</script>
</body>
</html>

1.php

<?php
$data = ["name"=>"刘德华", "title"=>"长城"];
echo json_encode($data,JSON_UNESCAPED_UNICODE);
?>

post方式

  • 去Network下的XHR下查看结果
  • 方式一

test.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body ng-app="myApp">
<div ng-controller="myCtr">
{{data}}
</div> <script src="angular.min.js"></script>
<script src="jquery-3.1.1.min.js"></script>
<script>
var app = angular.module("myApp", [])
app.controller('myCtr', ["$scope","$http", function($scope,$http){
$http({
method:"post",
url:"1.php",
data: $.param({id:'007',name:'奔波霸'}),
headers:{"Content-type":"application/x-www-form-urlencoded"}
}).then(function(reponse){ },
function(response){ });
}]);
</script>
</body>
</html>

1.php

<?php
print_r($_POST);
?>
  • 方式二

test.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body ng-app="myApp">
<div ng-controller="myCtr">
{{data}}
</div> <script src="angular.min.js"></script>
<script src="jquery-3.1.1.min.js"></script>
<script>
var app = angular.module("myApp", [])
app.controller('myCtr', ["$scope","$http", function($scope,$http){
$http({
method:"post",
url:"1.php",
data: {id:'007',name:'奔波霸'}
}).then(function(reponse){ },
function(response){ });
}]);
</script>
</body>
</html>

1.php

<?php
$content = file_get_contents('php://input');
print_r(json_decode($content, true));
?>

get请求简写

$http.get("1.php",{cache:true}).then(function(response){

  },
function(response){ });

自定义服务(factory)


test.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body ng-app="myApp">
<div ng-controller="myCtr">
{{data}}
</div> <script src="angular.min.js"></script>
<script src="jquery-3.1.1.min.js"></script>
<script>
var app = angular.module("myApp", []);
app.factory("vedioServer",["$http",function($http){
return {
vedioS: function(){
return $http({url:'1.php'});
}
}
}]);
app.controller('myCtr', ["$scope","vedioServer", function($scope,vedioServer){
vedioServer.vedioS().then(function(response){
$scope.data = response.data;
})
}]);
</script>
</body>
</html>

1.php

<?php
$data = ["name"=>"刘德华", "title"=>"长城"];
echo json_encode($data,JSON_UNESCAPED_UNICODE);
?>

自定义服务(service)


test.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body ng-app="myApp">
<div ng-controller="myCtr">
{{data}}
</div> <script src="angular.min.js"></script>
<script src="jquery-3.1.1.min.js"></script>
<script>
var app = angular.module("myApp", []);
app.service("vedioServer",["$http", function($http){
this.vedioS = function(response){
return $http({url:'1.php'}).then(function(response){
return response.data;
});
}
}])
app.controller('myCtr', ["$scope","vedioServer", function($scope,vedioServer){
vedioServer.vedioS().then(function(data){
$scope.data = data;
})
}]);
</script>
</body>
</html>

1.php

<?php
$data = ["name"=>"刘德华", "title"=>"长城"];
echo json_encode($data,JSON_UNESCAPED_UNICODE);
?>

angular服务二的更多相关文章

  1. angular服务一

    angular服务 [$apply()] jquery内数据绑定 要用$apply(),不然不能在js内通过angular绑定数据 <!DOCTYPE html> <html lan ...

  2. Springboot & Mybatis 构建restful 服务二

    Springboot & Mybatis 构建restful 服务二 1 前置条件 成功执行完Springboot & Mybatis 构建restful 服务一 2 restful ...

  3. 5、SAMBA服务二:配置实例

    ①:SAMBA服务一:参数详解 ②:SAMBA服务二:配置实例 5.2.3.Samba共享目录配置实例 1.允许匿名用户读取/it共享目录,修改/etc/samba/smb.conf,在最后添加以下内 ...

  4. angular 服务 service factory provider constant value

    angular服务 服务是对公共代码的抽象,由于依赖注入的要求,服务都是单例的,这样我们才能到处注入它们,而不用去管理它们的生命周期. angular的服务有以下几种类型: 常量(Constant): ...

  5. openstack-r版(rocky)搭建基于centos7.4 的openstack swift对象存储服务 二

    openstack-r版(rocky)搭建基于centos7.4 的openstack swift对象存储服务 一 openstack-r版(rocky)搭建基于centos7.4 的openstac ...

  6. .NET Core微服务二:Ocelot API网关

    .NET Core微服务一:Consul服务中心 .NET Core微服务二:Ocelot API网关 .NET Core微服务三:polly熔断与降级 本文的项目代码,在文章结尾处可以下载. 本文使 ...

  7. 腾讯云OCR服务二次开发

    本文记录了对腾讯云OCR服务二次开发的代码和开发过程中遇到的问题.

  8. 理解 Angular 服务

    理解 Angular 服务 本文写于 2021 年 3 月 29 日 理解 Angular 服务 什么是服务 服务写法 原理简述 提供服务 1. 在服务中注册 2. 在 module 中注册 3. 在 ...

  9. angularJS 服务二

    $http服务 一 介绍 AngularJS为我们提供了很多种服务,$http用于发送http请求,动态的请求数据.我们可以使用内置的$http服务直接同外部进行通信.$http服务只是简单的封装了浏 ...

随机推荐

  1. wamp集成环境开启rewrite伪静态支持

    wamp集成环境在安装完后,默认是没有开启伪静态的,所以有时把项目部署进去时如果源码里包含.htaccess文件的话,可能会出现500错误,这一般是因为不支持伪静态造成的,解决这个问题的办法就是开启伪 ...

  2. sea.js模块化编程

    * 为什么要模块化? 解决文件依赖 解决命名冲突 ; var var2 = 2; function fn1(){ } function fn2(){ } return { fn1: fn1, fn2: ...

  3. android 帧动画,补间动画,属性动画的简单总结

      帧动画——FrameAnimation 将一系列图片有序播放,形成动画的效果.其本质是一个Drawable,是一系列图片的集合,本身可以当做一个图片一样使用 在Drawable文件夹下,创建ani ...

  4. Android XML中引用自定义内部类view的四个why

    今天碰到了在XML中应用以内部类形式定义的自定义view,结果遇到了一些坑.虽然通过看了一些前辈写的文章解决了这个问题,但是我看到的几篇都没有完整说清楚why,于是决定做这个总结. 使用自定义内部类v ...

  5. The user specified as a definer ('root'@'%') does not exist 异常解决

    参考:http://www.cnblogs.com/Magicam/archive/2013/07/22/3207382.html 权限问题,授权 给 root  所有sql 权限 mysql> ...

  6. [Hadoop in Action] 第1章 Hadoop简介

    编写可扩展.分布式的数据密集型程序和基础知识 理解Hadoop和MapReduce 编写和运行一个基本的MapReduce程序   1.什么是Hadoop   Hadoop是一个开源的框架,可编写和运 ...

  7. APUE学习之出错处理

         当UNIX函数发生错误时,通常会返回一个负值,而且整形变量errno通常被设置为具有特定信息的值.        errno是全局变量,仅当函数出错才有被改变.对待errno,应注意两条规则 ...

  8. CFD冲蚀模拟的一些理论

    [TOC] 在CFD中计算颗粒对固体壁面的冲蚀往往采用冲蚀模型(Erosion Model). 1 冲蚀速率(Erosion Rate) 冲蚀速率定义为壁面材料在单位时间单位面积上损失的质量(单位:\ ...

  9. python学习7

    1.函数作为返回值 eg: 调用执行结果如下: 在函数lazy_sum中又定义了函数sum,并且,内部函数sum可以引用外部函数lazy_sum的参数和局部变量(eg:args),当lazy_sum返 ...

  10. [No00008B]远程桌面发送“Ctrl+Alt+Delete”组合键调用任务管理器

    向远程桌面发送"Ctrl+Alt+Delete"组合键的两种方法 1.在本地按下Ctrl+Alt+End,可以成功发送"Ctrl+Alt+Delete"组合键! ...