English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

دليل AngularJS الأساسي

Ajax لـ AngularJS

AngularJS يقدم عنصر التحكم $http، والذي يمكن استخدامه كخدمة لقراءة البيانات من الخادم. يقوم الخادم بإجراء استدعاءات قاعدة البيانات للحصول على السجلات المطلوبة. يتطلب AngularJS بيانات في صيغة JSON. بعد إعداد البيانات، يمكنك استخدام $http للحصول على البيانات من الخادم باستخدام الطريقة التالية -

function　studentController($scope,$https:)　{
　　　var　url　=　"data.txt";
　　　$https:.get(url).success(　function(response)　{
　　　　　　$scope.students　=　response;　
　　　});
}

هنا، ملف data.txt يحتوي على سجلات الطلاب.$http يرسل طلب Ajax ويقوم بتعيين استجابة إلى الخاصية students. يمكن استخدام نموذج الطلاب لرسم جدول HTML.

مثال

data.txt

[
　　　{
　　　　　　"الاسم"　:　"Sea　Gull",
　　　　　　"رقم الطالب"　:　101,
　　　　　　"نسبة المئوية"　:　"80%"
　　　},
　　　{
　　　　　　"الاسم"　:　"Dinkar　Kad",
　　　　　　"رقم الطالب"　:　201,
　　　　　　"نسبة المئوية"　:　"70%"
　　　},
　　　{
　　　　　　"الاسم"　:　"Robert",
　　　　　　"رقم الطالب"　:　191,
　　　　　　"نسبة المئوية"　:　"75%"
　　　},
　　　{
　　　　　　"الاسم"　:　"Julian　Joe",
　　　　　　"رقم الطالب"　:　111,
　　　　　　"نسبة المئوية"　:　"77%"
　　　}]

testAngularJS.htm

<html>
　　　<head>
　　　　　　<title>مكونات Angular JS</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-Ajax</h2>
　　　　　　<div　ng-app　=　""　ng-controller　=　"studentController">
　　　　　　
　　　　　　　　　<table>
　　　　　　　　　　　　<tr>
　　　　　　　　　　　　　　　<th>الاسم</th>
　　　　　　　　　　　　　　　<th>رقم الطالب</th>
　　　　　　　　　　　　　　　<th>نسبة المئوية</th>
　　　　　　　　　　　　<td>{{ student.Percentage }}</td>
　　　　　　　　　
　　　　　　　　　　　　<tr　ng-repeat　=　"student　in　students">
　　　　　　　　　　　　　　　<td>{{ student.Name　}}</td>
　　　　　　　　　　　　　　　{{　student.RollNo　}}
　　　　　　　　　　　　　　　<td>{{ student.RollNo }}</td>
　　　　　　　　　　　　<td>{{ student.Percentage }}</td>
　　　　　　　　　</tr>
　　　　　　</table>
　　　　　　
　　　　　　</div>
　　　　　　　　　<script>
　　　　　　　　　　　　function studentController($scope, $http) {
　　　　　　　　　　　　var url = "/run/angularjs/data.txt";
　　　　　　　　　　　　　　　$scope.students = response.data;
　　　　　　　　　　　　});
　　　　　　　　　}
　　　　　　</script>
　　　　　　
　　　　　　<script src="https://cdn.staticfile.org/angular.js/1.2.15/angular.min.js">
　　　　　　</script>
　　　　　　
　　　</body>
</html>
اختبار لمعرفة‹/›

نتائج الإخراج

لتنفيذ هذا المثال، تحتاج إلى تثبيتtestAngularJS.htmوdata.txtتثبيت الملف على خادم الويب. افتح الملف باستخدام عنوان URL للخادم في متصفح الويبtestAngularJS.htm، ثم انظر إلى النتيجة.

مناظر AngularJSتضمين AngularJS