بخش های اصلی

آموزش AngularJS

آموزش AngularJS – کار با Ajax

AngularJS، کنترلِ $http را ارائه میده که بعنوان سرویسی برای خواندن داده از سرور کار می کنه. سرور، برای گرفتن رکورد دلخواه، یک فراخوانی از پایگاه داده انجام میده. AngularJS داده ها را با فرمتِ JSON می گیره. وقتی داده آماده میشه، $http، برای گرفتن داده از سرور به روش زیر استفاده میشه:

function studentController($scope,$https:) {
var url = "data.txt";

   $https:.get(url).success( function(response) {
      $scope.students = response; 
   });
}

در ادامه فایلِ data.txt را میبینین که شاملِ رکوردهای student است. سرویسِ $http، یک فراخوانیِ ajaxای انجام میده و پاسخ را در پراپرتیِ student قرار میده. مدلِ students برای رسم جدول در HTML استفاده میشه.

مثال

data.txt

[
   {
      "Name" : "Hamid Tadayoni",
      "RollNo" : 101,
      "Percentage" : "80%"
   },
	
   {
      "Name" : "Dinkar Kad",
      "RollNo" : 201,
      "Percentage" : "70%"
   },
	
   {
      "Name" : "Robert",
      "RollNo" : 191,
      "Percentage" : "75%"
   },
	
   {
      "Name" : "Julian Joe",
      "RollNo" : 111,
      "Percentage" : "77%"
   }
]

testAngularJS.htm

<html>
   <head>
      <title>Angular JS Includes</title>
      
      <style>
         table, th , td {
            border: 1px solid grey;
            border-collapse: collapse;
            padding: 5px;
         }
         
         table tr:nth-child(odd) {
            background-color: #f2f2f2;
         }
         
         table tr:nth-child(even) {
            background-color: #ffffff;
         }
      </style>
      
   </head>
   <body>
      <h2>AngularJS Sample Application</h2>
      <div ng-app = "" ng-controller = "studentController">
      
         <table>
            <tr>
               <th>Name</th>
               <th>Roll No</th>
               <th>Percentage</th>
            </tr>
         
            <tr ng-repeat = "student in students">
               <td>{{ student.Name }}</td>
               <td>{{ student.RollNo }}</td>
               <td>{{ student.Percentage }}</td>
            </tr>
         </table>
      </div>
      
      <script>
         function studentController($scope,$https:) {
            var url = "data.txt";
         
            $https:.get(url).success( function(response) {
               $scope.students = response;
            });
         }
      </script>
      
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
      
   </body>
</html>

خروجی

برای اجرای این مثال، باید testAngularJS.htm و data.txt را در سرور مستقر کنین. testAngularJS.htm را با استفاده از URL سرورتان در مرورگر باز کنین و نتیجه را ببینین.

در صورتی که سوال و یا نظری دارید، از بخش نظرات با ما در میان بگذارید.

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد

شما چه نظر و یا سوالی درباره این نوشته دارید؟

مبحث آموزشی

آموزش AngularJS

Learn AngularJS

پرســیدن سؤال جدید

سؤال های تخصصی خود را از ما بپرسید

دنبال کردن تلگرام کانال سافت اسکیل

https://telegram.me/softskill_ir

عملیات کاربران

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد