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 التي كتبها نغ التطبيق = "اسم التطبيق". يتم تشغيل التطبيق داخل <div>.
ونانوغرام تحكم = "myCtrl" السمة توجيه AngularJS. ويعرف وحدة تحكم.
وظيفة myCtrl هي وظيفة جافا سكريبت.
سوف AngularJS استدعاء وحدة تحكم مع كائن $ النطاق.
في AngularJS، $ نطاق هو كائن التطبيق (صاحب متغيرات التطبيق وظائف).
وحدة تحكم يخلق خاصيتين (المتغيرات) في نطاق (الاسم الأول واسم العائلة).
توجيهات نانوغرام نموذج ربط حقول الإدخال إلى خصائص تحكم (الاسم الأول واسم العائلة).
طرق تحكم
في المثال أعلاه أظهرت كائن وحدة تحكم مع خاصيتين: اسم العائلة والاسم الأول.
وحدة تحكم يمكن أيضا أن أساليب (المتغيرات وظائف):
AngularJS مثال
<div ng-app="myApp" ng-controller="personCtrl">
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{fullName()}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('personCtrl',
function($scope) {
$scope.firstName = "John";
$scope.lastName
= "Doe";
$scope.fullName = function() {
return $scope.firstName + " " + $scope.lastName;
};
});
</script>
انها محاولة لنفسك » التحكم في ملفات خارجية
في تطبيقات أكبر، فإنه من الشائع إلى وحدات تحكم مخزن في الملفات الخارجية.
مجرد نسخ رمز بين العلامات <script> في ملف خارجي اسمه personController.js :
AngularJS مثال
<div ng-app="myApp" ng-controller="personCtrl">
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 src="personController.js"></script>
انها محاولة لنفسك » مثال آخر
لالمثال التالي سوف نقوم بإنشاء ملف وحدة تحكم جديدة:
angular.module('myApp', []).controller('namesCtrl',
function($scope) {
$scope.names = [
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}
];
});
حفظ الملف كما namesController.js :
ومن ثم استخدام ملف تحكم في التطبيق:
AngularJS مثال
<div ng-app="myApp" ng-controller="namesCtrl">
<ul>
<li ng-repeat="x in names">
{{ x.name + ', ' + x.country }}
</li>
</ul>
</div>
<script src="namesController.js"></script>
انها محاولة لنفسك »