http در آنگولار جی اس

http یک سرویس AngularJS برای خواندن داده ها از سرورهای راه دور است.

مقالات

AngularJS $http

سرویس AngularJS $HTTP یک درخواست را برای سرور ایجاد می کند و پاسخ را می دهد.

مثال
یک درخواست ساده برای سرور ایجاد کنید و نتیجه را در یک هدر نمایش دهید:

<div ng-app="myApp" ng-controller="myCtrl"> 

<p>Today's welcome message is:</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>

<p>Today's welcome message is:</p>

<h1>{{myWelcome}}</h1>

</div>

var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope, $http) {

$http.get("welcome.htm")

.then(function(response) {

$scope.myWelcome = response.data;

});

</script>

Methods – متدها

مثال بالا از متد .get از سرویس $HTTP استفاده می کند.

متد.get یکی از متد ها shortcut سرویس $HTTP است. چندین متد shortcut وجود دارد:

.delete ()
.get ()
.head ()
.jsonp ()
.patch ()
.post ()
.put ()
روش های بالا همه میانبرهای فراخوانی سرویس $http هستند:

مثال:

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

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;

});

مثال فوق سرویس $HTTP را با یک شی به عنوان یک آرگومان اجرا می کند.شی این موارد را مشخص می کند متد HTTP و URL , اینکه چه چیز باید با موفقیت صورت بگیرد و چه کاری برای از بین بردن رخ دهد.

Properties

پاسخ از سرور یک شی با این property ها می باشد.

.config شی مورد استفاده برای تولید درخواست.
.data یک رشته یا یک شیء، پاسخ از سرور را حمل می کند.
header یک تابع برای استفاده از اطلاعات هدر است.
.status یک شماره که وضعیت HTTP را مشخص می کند.
.statusSet یک رشته تعریف وضعیت HTTP.

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

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;

});

برای رسیدگی به خطاها یا به اصطلاح error handling ،یک تابع بیش از یک تابع را به متد .the اضافه کنید.

مثال:

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";
    });
});

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

انتظار می رود داده هایی که از پاسخ دریافت می کنید در قالب JSON باشد.

JSON یک راه عالی برای انتقال داده ها است و از AngularJS یا هر JavaScript دیگر استفاده می شود.

مثال: در سرور ما یک فایل داریم که یک شی JSON را که حاوی 15 مشتری است را باز می کند، همه در آرایه به نام پرونده قرار می گیرند.

مثال
دستور ng-repeat برای حلقه کردن از طریق آرایه مناسب است:

<div ng-app="myApp" ng-controller="customersCtrl"> 

<ul>
  <li ng-repeat="x in myData">
    {{ x.Name + ', ' + 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>

<ul>

</li>

</ul>

</div>

var app = angular.module('myApp', []);

app.controller('customersCtrl', function($scope, $http) {

$http.get("customers.php").then(function(response) {

$scope.myData = response.data.records;

});

</script>

توضیح برنامه:

این برنامه یک کنترلر customersCtrl تعریف می کند با یک $scope و شی $http.

$HTTP یک شیء XMLHttpRequest برای درخواست داده های خارجی است.

$ http.get () اطلاعات JSON از https://www.w3schools.com/angular/customers.php را می خواند.

بصورت موفقیت آمیز،controller یک property مثل myData درون scope با داده های JSON از طریق سرور ایجاد می کند.

3.7/5 - (3 امتیاز)

http در آنگولار جی اس – angularjs HTTP

AngularJS $http

Methods – متدها

Properties

JSON

مطالب زیر را حتما مطالعه کنید

دیدگاهتان را بنویسید لغو پاسخ

AngularJS $http

Methods – متدها

Properties

JSON

مطالب زیر را حتما مطالعه کنید

مسیریابی انگولار AngularJS Routing

ساخت انیمیشن با انگولار – angularjs animation

AngularJS Includes

api آنگولار جی اس – Angularjs API

اعتبارسنجی فرم ها با آنگولار – AngularJS Form Validation

ساخت form با آنگولار جی اس – angular forms

دیدگاهتان را بنویسید لغو پاسخ