<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p>Remote data is:</p>
<h1>{{remoteData}}</h1>
</div>
<p>The $http service requests a page on the server, and the response is set as the value of the "remoteData" variable.</p>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
$http({
method : "GET",
url : "//api.jsonbin.io/b/5a9c123e73fb541c61a5d4b0/latest"
}).then(function mySuccess(response) {
$scope.remoteData = response.data;
}, function myError(response) {
$scope.myWelcome = response.statusText;
});
});
</script>
</body>
</html>
// Code goes here
/* Styles go here */
<div>
w3s123-AngularJS Service Http
<br/>
code example:
<hr>
index.html
<br/>
<textarea
id='codeoutput'
style="width: 100%;height: 300px;background-color: #dffff4;
font-size: 1em;font-family: Verdana, Arial, Helvetica, sans-serif;
border: 1px solid black;">
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p>Remote data is:</p>
<h1>{{remoteData}}</h1>
</div>
<p>The $http service requests a page on the server, and the response is set as the value of the "remoteData" variable.</p>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
$http({
method : "GET",
url : "//api.jsonbin.io/b/5a9c123e73fb541c61a5d4b0/latest"
}).then(function mySuccess(response) {
$scope.remoteData = response.data;
}, function myError(response) {
$scope.myWelcome = response.statusText;
});
});
</script>
</body>
</html>
</textarea>
<hr/>
<iframe
allowfullscren="allowfullscren"
frameborder="0"
src="https://embed.plnkr.co/aPmMVmEVbZup3RS9Mf6X?show=preview"
style="height: 400px; width: 100%;">
</iframe>
<hr>
https://www.w3schools.com/angular/angular_http.asp
<hr>
201603
</div>