مقدمة إلى AngularJS

AngularJS هو إطار عمل JavaScriptيمكن إضافته إلى صفحة HTML باستخدام علامة التبويب <script>.

AngularJS من خلالتعليماتتوسعت خصائص HTML واستخدمتعباراتbinds البيانات إلى HTML.

AngularJS هو إطار عمل JavaScript

AngularJS هو إطار عمل JavaScript مكتوب بلغة JavaScript.

يُوزع AngularJS كملف JavaScript ويُمكن إضافته إلى الصفحة عبر علامة التبويب script:

<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular.min.js"></script>

توسعت AngularJS HTML

يستخدم AngularJS تعليمات ng-توسعت HTML.

ng-app تعليمات تعرف تطبيق AngularJS.

ng-model تعليمات binds قيمة عنصر التحكم HTML (input, select, textarea) إلى بيانات التطبيق.

ng-bind تعليمات binds بيانات التطبيق إلى عرض HTML.

مثال AngularJS

<!DOCTYPE html>
<html>
<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
  <p>الاسم: <input type="text" ng-model="name"></p>
  <p ng-bind="name"></p>
</div>
</body>
</html>

جرب بنفسك

مثال على التوضيح:

عند اكتمال تحميل الصفحة، يبدأ AngularJS تلقائيًا.

ng-app تعليمات AngularJS تُخبر AngularJS،<div> عناصر هي AngularJS التطبيقمالك.

ng-model التعليمات تربط قيمة حقل الإدخال مع متغير التطبيق الاسم。

ng-bind تعريف التعليمات يقوم بتحديد محتوى عنصر <p> إلى متغير التطبيق. الاسم。

تعليمات AngularJS

كما ترون، التعليمات في AngularJS تحتوي على ng سمة الخصائص HTML.

ng-init تعريف التعليمات بتحديد متغيرات تطبيق AngularJS.

مثال AngularJS

<div ng-app="" ng-init="firstName='Bill'">
<p>اسمه هو <span ng-bind="firstName"></span></p>
</div>

جرب بنفسك

أو يمكنكم استخدام HTML الصحيح:

مثال AngularJS

<div data-ng-app="" data-ng-init="firstName='Bill'">
<p>اسمه هو <span data-ng-bind="firstName"></span></p>
</div>

جرب بنفسك

إذا أردتم أن يكون HTML في الصفحة فعالاً، يمكنكم استخدام data-ng- بدلاً من ng-。

ستجدون معلومات أكثر عن التعليمات في الجزء التالي من الدليل.

تعبيرات AngularJS

تعبيرات AngularJS تُكتب داخل قوسين كبيرين:{{ تعبير }}。

AngularJS سيقوم "الخروج" بالبيانات في المكان الذي يوجد فيه التعبير:

مثال AngularJS

<!DOCTYPE html>
<html>
<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
  <p>تعبيري الأول:{{ 5 + 5 }}</p>
</div>
</body>
</html>

جرب بنفسك

تعبيرات AngularJS ستبين بيانات AngularJS على HTML، مثل ng-bind تعريف التعليمات بنفس الطريقة.

مثال AngularJS

<!DOCTYPE html>
<html>
<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
  <p>الاسم: <input type="text" ng-model="name"></p>
  <p>{{name}}</p>
</div>
</body>
</html>

جرب بنفسك

ستجدون معلومات أكثر عن التعبيرات في الجزء التالي من الدليل.

تطبيق AngularJS

AngularJS الوحدةتحديد تطبيق AngularJS.

AngularJS التحكمتحكم في تطبيق AngularJS.

ng-app تعريف التطبيق،ng-controller تعريف التعليمات بتحديد التحكم.

مثال AngularJS

<div ng-app="myApp" ng-controller="myCtrl">
اسم：<input type="text" ng-model="firstName"><br>
الاسم العائلي: <input type="text" ng-model="lastName"><br>
<br>
الاسم الكامل: {{firstName + " " + lastName}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.firstName= "Bill";
  $scope.lastName= "Gates";
});
</script>

جرب بنفسك

يحدد مكون AngularJS التطبيق:

مكونات AngularJS

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

مستشار AngularJS يتحكم في التطبيق:

مستشار AngularJS

app.controller('myCtrl', function($scope) {
  $scope.firstName= "Bill";
  $scope.lastName= "Gates";
});

ستتعرف على المزيد عن المكونات والمستشارين في هذا الدليل.