AngularJS هو إطار جافا سكريبت. ويمكن أن نضيف إلى صفحة HTML مع العلامة <script>.
AngularJS يمتد سمات HTML مع التوجيهات، ويربط البيانات إلى HTML مع التعبير.
AngularJS هو الإطار جافا سكريبت
AngularJS هو إطار جافا سكريبت. وهي مكتوبة في مكتبة جافا سكريبت.
يتم توزيع AngularJS كملف جافا سكريبت، ويمكن أن تضاف إلى صفحة ويب مع علامة النصي:
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>AngularJS يمتد HTML
AngularJS يمتد HTML مع نانوغرام التوجيهات.
يعرف التوجيه نانوغرام التطبيق تطبيق AngularJS.
التوجيه نانوغرام نموذج يربط قيمة عناصر HTML (المدخلات، حدد، جزء النص) لبيانات التطبيق.
التوجيه نانوغرام ربط يربط بيانات التطبيق إلى عرض HTML.
AngularJS مثال
<!DOCTYPE html>
<html>
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/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 يبدأ تلقائيا عند صفحة الويب وتحميلها.
التوجيه نانوغرام التطبيق يقول AngularJS أن <div> العنصر هو "مالك" تطبيق AngularJS.
التوجيه نانوغرام نموذج يربط قيمة حقل الإدخال إلى اسم متغير التطبيق.
التوجيه نانوغرام ربط يربط HTML داخلي للعنصر <ص> إلى اسم المتغير التطبيق.
AngularJS التوجيهات
كما رأيتم بالفعل، AngularJS التوجيهات هي سمات HTML مع بادئة نانوغرام.
التوجيه نانوغرام الحرف الأول تهيئة المتغيرات تطبيق 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>
انها محاولة لنفسك »  | يمكنك استخدام البيانات ng-، بدلا من ng-، إذا كنت تريد أن تجعل HTML صفحتك صالحة. |
|---|
سوف تتعلم الكثير عن توجيهات في وقت لاحق في هذا البرنامج التعليمي.
AngularJS التعبير
مكتوبة AngularJS تعبيرات داخل الأقواس مزدوجة: {{التعبير}}.
AngularJS سوف البيانات "إخراج" بالضبط حيث تتم كتابة التعبير:
AngularJS مثال
<!DOCTYPE html>
<html>
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="">
<p>My first expression: {{ 5 + 5 }}</p>
</div>
</body>
</html>
انها محاولة لنفسك » AngularJS تعبيرات ربط البيانات AngularJS إلى HTML بنفس طريقة التوجيه نانوغرام مأزق.
AngularJS مثال
<!DOCTYPE html>
<html>
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/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.
يعرف التوجيه نانوغرام التطبيق التطبيق، التوجيه نانوغرام تحكم يحدد وحدة تحكم.
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";
});
سوف تتعلم المزيد عن وحدات وحدات التحكم في وقت لاحق في هذا البرنامج التعليمي.