angular服务二

时间:2023-01-31 09:31:26

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);
?>