angular請求http基本操作
阿新 • • 發佈：2019-02-13
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<script type="text/javascript" src="js/angular.js" ></script>
<script>
var app = angular.module("myApp",[]);
app.controller("myCtrl",function($scope,$location,$timeout,$interval,$http){
$scope.myUrl = $location.absUrl();
$scope.a = $location.host();
$scope.b = $location.protocol();
$scope.c = $location.path();
$scope.d = $location.port();
//timeout
$scope.str = "";
$timeout(function(){
$scope.str ="我是2秒鐘以後出現"
},2000);
//$interval
$scope.currentTime = "";
$interval(function(){
var _date = new Date().toLocaleTimeString();
$scope.currentTime = _date;
},1000);
//http
$scope.dataJson="";
/*$http({//請求一個json，，本地的
method:"get",
url:"haha.json"
}).then(function success(response){//請求成功了
$scope.dataJson = response.data;
//debugger;
},function error(response){//請求失敗了
});
$scope.deleteP = function($index){
$scope.dataJson.splice($index,1);
};*/
//通過http內建服務，請求網路資料，展示
$scope.jsonFromNet = "";
$http({
method:"get",
url:"http://result.eolinker.com/pWEDzFn48fd146c3a725c1571f997a44281b94d1201b661?uri=myjson1"
}).then(function success(response){
$scope.jsonFromNet = response.data;
debugger;
},function error(response){
debugger;
});
$scope.deleteG = function($index){
$scope.jsonFromNet.data.splice($index,1);
}
});
</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<p>1 {{myUrl}}</p>
<p>2 {{a}}</p>
<p>3 {{b}}</p>
<p>4 {{c}}</p>
<p>5 {{d}}</p>
<p>{{str}}</p>
<p>當前時間：{{currentTime}}</p>
<p>通過http服務獲取本地json，展示</p>
<!--<table>
<tr><th>序號</th><th>名字</th><th>年齡</th><th>性別</th><th>操作</th></tr>
<tr ng-repeat="p in dataJson">
<td>{{$index}}</td>
<td>{{p.name}}</td>
<td>{{p.age}}</td>
<td>{{p.sex}}</td>
<td><input type="button" ng-click="deleteP($index);" value="刪除"/></td>
</tr>
</table>-->
<p>通過http服務獲取網路json，展示</p>
<table>
<tr><th>序號</th><th>detectionId</th><th>detectionItem</th><th>detectionInfo</th><th>圖片</th><th>操作</th></tr>
<tr ng-repeat="g in jsonFromNet.data ">
<td>{{$index}}</td>
<td>{{g.detectionId}}</td>
<td>{{g.detectionItem}}</td>
<td>{{g.detectionInfo | limitTo:5}}</td>
<td><img src="http://www.sinaimg.cn/ty/deco/2013/1108/nbalogo/20.png"/></td>
<td><input type="button" ng-click="deleteG($index);" value="刪除"/></td>
</tr>
</table>
</body>
</html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<script type="text/javascript" src="js/angular.js" ></script>
<script>
var app = angular.module("myApp",[]);
app.controller("myCtrl",function($scope,$location,$timeout,$interval,$http){
$scope.myUrl = $location.absUrl();
$scope.a = $location.host();
$scope.b = $location.protocol();
$scope.c = $location.path();
$scope.d = $location.port();
//timeout
$scope.str = "";
$timeout(function(){
$scope.str ="我是2秒鐘以後出現"
},2000);
//$interval
$scope.currentTime = "";
$interval(function(){
var _date = new Date().toLocaleTimeString();
$scope.currentTime = _date;
},1000);
//http
$scope.dataJson="";
/*$http({//請求一個json，，本地的
method:"get",
url:"haha.json"
}).then(function success(response){//請求成功了
$scope.dataJson = response.data;
//debugger;
},function error(response){//請求失敗了
});
$scope.deleteP = function($index){
$scope.dataJson.splice($index,1);
};*/
//通過http內建服務，請求網路資料，展示
$scope.jsonFromNet = "";
$http({
method:"get",
url:"http://result.eolinker.com/pWEDzFn48fd146c3a725c1571f997a44281b94d1201b661?uri=myjson1"
}).then(function success(response){
$scope.jsonFromNet = response.data;
debugger;
},function error(response){
debugger;
});
$scope.deleteG = function($index){
$scope.jsonFromNet.data.splice($index,1);
}
});
</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<p>1 {{myUrl}}</p>
<p>2 {{a}}</p>
<p>3 {{b}}</p>
<p>4 {{c}}</p>
<p>5 {{d}}</p>
<p>{{str}}</p>
<p>當前時間：{{currentTime}}</p>
<p>通過http服務獲取本地json，展示</p>
<!--<table>
<tr><th>序號</th><th>名字</th><th>年齡</th><th>性別</th><th>操作</th></tr>
<tr ng-repeat="p in dataJson">
<td>{{$index}}</td>
<td>{{p.name}}</td>
<td>{{p.age}}</td>
<td>{{p.sex}}</td>
<td><input type="button" ng-click="deleteP($index);" value="刪除"/></td>
</tr>
</table>-->
<p>通過http服務獲取網路json，展示</p>
<table>
<tr><th>序號</th><th>detectionId</th><th>detectionItem</th><th>detectionInfo</th><th>圖片</th><th>操作</th></tr>
<tr ng-repeat="g in jsonFromNet.data ">
<td>{{$index}}</td>
<td>{{g.detectionId}}</td>
<td>{{g.detectionItem}}</td>
<td>{{g.detectionInfo | limitTo:5}}</td>
<td><img src="http://www.sinaimg.cn/ty/deco/2013/1108/nbalogo/20.png"/></td>
<td><input type="button" ng-click="deleteG($index);" value="刪除"/></td>
</tr>
</table>
</body>
</html>