مقدمة AngularJS
AngularJS هو إطار عمل JavaScript . يمكن إضافته إلى صفحة HTML بعلامة <script>.
يقوم AngularJS بتوسيع سمات HTML باستخدام التوجيهات ، وربط البيانات بـ HTML باستخدام التعبيرات .
AngularJS هو إطار عمل JavaScript
AngularJS هو إطار عمل JavaScript مكتوب بلغة JavaScript.
يتم توزيع AngularJS كملف JavaScript ، ويمكن إضافته إلى صفحة ويب بعلامة البرنامج النصي:
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
يقوم AngularJS بتوسيع HTML
يقوم AngularJS بتوسيع HTML باستخدام توجيهات ng .
يحدد التوجيه ng-app تطبيق AngularJS.
يربط التوجيه ng-model قيمة عناصر تحكم HTML (الإدخال ، التحديد ، textarea) ببيانات التطبيق.
يربط التوجيه ng-bind بيانات التطبيق بطريقة عرض HTML.
مثال AngularJS
<!DOCTYPE html>
<html>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
<p>Name: <input type="text" ng-model="name"></p>
<p ng-bind="name"></p>
</div>
</body>
</html>
شرح المثال:
يبدأ AngularJS تلقائيًا عند تحميل صفحة الويب.
يخبر التوجيه ng-app AngularJS أن العنصر <div> هو "مالك" تطبيق AngularJS .
يربط التوجيه ng-model قيمة حقل الإدخال باسم متغير التطبيق .
يربط التوجيه ng-bind محتوى العنصر <p> باسم متغير التطبيق .
توجيهات AngularJS
كما سبق ورأيت ، توجيهات AngularJS هي سمات HTML ببادئة ng .
يقوم التوجيه ng-init بتهيئة متغيرات تطبيق AngularJS.
مثال AngularJS
<div ng-app="" ng-init="firstName='John'">
<p>The name is <span ng-bind="firstName"></span></p>
</div>
بدلاً من ذلك باستخدام HTML صالح:
مثال AngularJS
<div data-ng-app="" data-ng-init="firstName='John'">
<p>The name is <span data-ng-bind="firstName"></span></p>
</div>
يمكنك استخدام data-ng- ، بدلاً من ng- ، إذا كنت تريد جعل صفحة HTML صالحة.
سوف تتعلم المزيد عن التوجيهات لاحقًا في هذا البرنامج التعليمي.
تعبيرات AngularJS
تتم كتابة تعبيرات AngularJS داخل أقواس مزدوجة: {{تعبير}} .
ستخرج AngularJS البيانات بالضبط في مكان كتابة التعبير:
مثال AngularJS
<!DOCTYPE html>
<html>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
<p>My first expression: {{ 5 + 5 }}</p>
</div>
</body>
</html>
تربط تعبيرات AngularJS بيانات AngularJS بـ HTML بنفس طريقة التوجيه ng-bind .
مثال AngularJS
<!DOCTYPE html>
<html>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
<p>Name:
<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">
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl',
function($scope) {
$scope.firstName= "John";
$scope.lastName= "Doe";
});
</script>
تحدد وحدات AngularJS التطبيقات:
وحدة AngularJS
var app = angular.module('myApp', []);
تتحكم وحدات تحكم AngularJS في التطبيقات:
تحكم AngularJS
app.controller('myCtrl',
function($scope) {
$scope.firstName= "John";
$scope.lastName= "Doe";
});
سوف تتعلم المزيد عن الوحدات ووحدات التحكم لاحقًا في هذا البرنامج التعليمي.