AngularJS AJAX - $http
- Önceki Sayfa AngularJS Hizmet
- Sonraki Sayfa AngularJS Tablo
$http, AngularJS'nin uzaktan sunuculardan veri okumak için kullanılan bir hizmetidir.
AngularJS $http
AngularJS $http
Hizmet sunucuya istek gönderir ve yanıt döner.
Example
Sunucuya basit bir istek gönderin ve başlıkta sonuçları gösterin:
<div ng-app="myApp" ng-controller="myCtrl"> <p>Bugünkü hoş geldiniz mesajı:</p> <h1>{{myWelcome}}</h1> </div> <script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope, $http) { $http.get("welcome.htm") .then(function(response) { $scope.myWelcome = response.data; }); }); </script>
yöntemi
Yukarıdaki örnekte $http
hizmeti .get
Yöntem.
.get yöntemi, $http hizmetinin hızlı yollarından biridir. Aşağıdaki hızlı yollar bulunmaktadır:
.delete()
.get()
.head()
.jsonp()
.patch()
.post()
.put()
Yukarıdaki yöntemler, $http hizmetini çağırmak için hızlı yollar olup:
Example
var app = angular.module('myApp', []); app.controller('myCtrl', function($scope, $http) { $http({ method : "GET", url : "welcome.htm" }).then(function mySuccess(response) { $scope.myWelcome = response.data; }, function myError(response) { $scope.myWelcome = response.statusText; }); });
Yukarıdaki örnek, $http hizmetini çalıştırmak için bir nesne olarak parametre olarak kullanılmıştır. Bu nesne HTTP yöntemi, URL, başarılı olduğunda çalıştırılacak işlemler ve başarısız olduğunda çalıştırılacak işlemleri belirtir.
Özellik
Sunucudan gelen yanıt, aşağıdaki özelliklere sahip bir nesnedir:
.config
İstek oluşturmak için kullanılan nesne.data
Sunucudan gelen yanıtı taşıyan bir dizgi veya nesne.headers
The function used to get header information.status
Define the number of HTTP status.statusText
Define the string of HTTP status
Example
var app = angular.module('myApp', []); app.controller('myCtrl', function($scope, $http) { $http.get("welcome.htm") .then(function(response) { $scope.content = response.data; $scope.statuscode = response.status; $scope.statustext = response.statusText; }); });
To handle errors, please send to .then
Add a function to the method:
Example
var app = angular.module('myApp', []); app.controller('myCtrl', function($scope, $http) { $http.get("wrongfilename.htm") .then(function(response) { // First function handles success $scope.content = response.data; }, function(response) { // Second function handles error $scope.content = "Something went wrong"; }); });
JSON
The data obtained from the response should be in JSON format.
JSON is an excellent way to transmit data and is easy to use in AngularJS or any other JavaScript.
For example, we have a file on the server that returns a JSON object containing 15 customers, all wrapped in a named records
in the array.
Please click here to view the JSON object.
Example
The ng-repeat directive is perfect for looping through an array:
<div ng-app="myApp" ng-controller="customersCtrl"> <ul> <li ng-repeat="x in myData"> {{ x.Ad == ', ' + x.Country }} </li> </ul> </div> <script> var app = angular.module('myApp', []); app.controller('customersCtrl', function($scope, $http) { $http.get("customers.php").then(function(response) {}} $scope.myData = response.data.records; }); }); </script>
Uygulama Açıklaması:
uygulama tanımlar customersCtrl
kontrolör, kapsam
ve http
nesnesidir.
$http
bir XMLHttpRequest nesnesidış veri talepleri için kullanılır.
$http.get()
https://www.codew3c.com/angular/customers.php adresinden okunur JSON Verileri.
Başarıyla, kontrolör, kapsamda bir özellik oluşturur myData
tarafından sunulan JSON verileri içerir.
- Önceki Sayfa AngularJS Hizmet
- Sonraki Sayfa AngularJS Tablo