angular服务二
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);
?>