سرویس http$ در AngularJS

سرویس http$ در AngularJS

http$ یک سرویس AngularJS است که جهت خواندن داده ها از سرورهای راه دور (remote server) بکار می رود.

فراهم کردن دادن داده ها

داده ی زیر می تواند به وسیله ی یک سرویس دهنده ی وب (web server) ارائه شود:

{ "records": [ { "Name" : "Alfreds Futterkiste", "City" : "Berlin", "Country" : "Germany" }, { "Name" : "Berglunds snabbköp", "City" : "Luleå", "Country" : "Sweden" }, { "Name" : "Centro comercial Moctezuma", "City" : "México D.F.", "Country" : "Mexico" }, { "Name" : "Ernst Handel", "City" : "Graz", "Country" : "Austria" } , { "Name" : "FISSA Fabrica Inter. Salchichas S.A.", "City" : "Madrid", "Country" : "Spain" }, { "Name" : "Galería del gastrónomo", "City" : "Barcelona", "Country" : "Spain" }, { "Name" : "Island Trading", "City" : "Cowes", "Country" : "UK" } , { "Name" : "Königlich Essen", "City" : "Brandenburg", "Country" : "Germany" }, { "Name" : "Laughing Bacchus Wine Cellars", "City" : "Vancouver", "Country" : "Canada" }, { "Name" : "Magazzini Alimentari Riuniti", "City" : "Bergamo", "Country" : "Italy" }, { "Name" : "North/South", "City" : "London", "Country" : "UK" }, { "Name" : "Paris spécialités", "City" : "Paris", "Country" : "France" }, { "Name" : "Rattlesnake Canyon Grocery", "City" : "Albuquerque", "Country" : "USA" }, { "Name" : "Simons bistro", "City" : "København", "Country" : "Denmark" }, { "Name" : "The Big Cheese", "City" : "Portland", "Country" : "USA" }, { "Name" : "Vaffeljernet", "City" : "Århus", "Country" : "Denmark" }, { "Name" : "Wolski Zajazd", "City" : "Warszawa", "Country" : "Poland" } ] }

AngularJS $http

یک سرویس اصلی است که برای خواندن اطلاعات از سرویس دهنده های وب کاربرد دارد.

http.get(url)$ یک تابع است که برای خواندن داده های سرویس دهنده مورد استفاده قرار می گیرد.

<!DOCTYPE html> <html> <head> <title></title> <script src="Angular.js"> </script> </head> <body> <div ng-app="myApp" ng-controller="customersCtrl"> <ul> <li ng-repeat="x in names"> {{ x.Name + ', ' + x.Country }} </li> </ul> </div> <script> var app = angular.module('myApp', []); app.controller('customersCtrl', function ($scope, $http) { $http.get("customers.htm") .then(function (response) { $scope.names = response.data.records; }); }); </script> </body> </html>

شرح برنامه:

دستور ng-app ، همان طور که در فواصل پیشین شرح داده شد برنامه ی AngularJS را تعریف کرده و به عبارتی عنصر آغازین را مشخص می کند. برنامه ی حاضر درون یک تگ div اجرا می‌شود.

ng-controller را می توان شی کنترلگر controller object نامید.

تابع customersCtrl یک سازنده ی شی object constructor متعارف جاوا اسکریپت است.

AngularJS با استفاده از اشیا $scope و $http ، تابع customersCtrl را فرامی خواند.

$scope در واقع شی application است (همان مالک و متغیرها و توابع برنامه)

سرویس $http یک شی XMLHttpRequest است که توسط آن داده های خارجی را درخواست می کنید.

در صورت موفقیت، کنترلگر مورد نظر یک خاصیت (names) را در شی scope با داده های JSON از سرویس دهنده، ایجاد می کند.



نظرات کاربران



عبارت امنیتی : حاصل 3 × 3 می شود :
متن پیام :