وحدة تحكم AngularJS
يتحكم AngularJS Controller في البيانات من تطبيقات AngularJS.
وحدة تحكم AngularJS هي كائن JavaScript العادي.
وحدة تحكم AngularJS
يتم التحكم في تطبيق AngularJS بواسطة وحدة التحكم.
يحدد توجيه NG-Controller وحدة تحكم التطبيق.
وحدة التحكم هي كائن JavaScript الذي تم إنشاؤه بواسطة مُنشئ كائن JavaScript القياسي.
مثيل AngularJS
<! doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js ng-controller = "personctrl"> الاسم: <input type = "text" ng-model = "firstName"> <br> الاسم: {{fullname ()}} </div> <script> var app = angular.module ('myapp' ، [] $ scope.lastname = "doe" ؛نتائج التشغيل:
اسم:
اسم العائلة:
الاسم: جون دو
يتم تعريف تطبيقات AngularJS بواسطة NG-App. يعمل التطبيق ضمن <Div>.
خاصية NG-Controller = "MyCtrl" هي توجيه AngularJS. تستخدم لتحديد وحدة تحكم.
وظيفة myctrl هي وظيفة javaScript.
يستخدم AngularJS كائن نطاق $ للاتصال بوحدة التحكم.
في AngularJS ، نطاق $ هو كائن تطبيق (ينتمي إلى متغيرات التطبيق ووظائفه).
يتم استخدام نطاق وحدة التحكم $ (أي ما يعادل النطاق والتحكم) لحفظ كائن نموذج AngularJS.
تقوم وحدة التحكم بإنشاء خصائصين (FirstName و LastName) في النطاق.
يربط توجيه NG-Model مجال الإدخال بخصائص وحدة التحكم (FirstName و LastName).
طريقة وحدة التحكم
يوضح المثال أعلاه كائن وحدة تحكم مع خصائصين: اسم LastName و FirstName.
يمكن أن يكون لدى وحدة التحكم أيضًا طرق (المتغيرات والوظائف):
مثيل AngularJS
<! doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js ng-controller = "personctrl"> الاسم: <input type = "text" ng-model = "firstName"> <br> الاسم: {{fullname ()}} </div> <script> var app = angular.module ('myapp' ، [] $ scope.lastname = "doe" ؛تأثير الجري:
اسم:
اسم العائلة:
الاسم: جون دو
وحدات التحكم في الملفات الخارجية
في التطبيقات الكبيرة ، يتم تخزين وحدة التحكم عادة في ملف خارجي.
ما عليك سوى نسخ الكود في علامة <script> إلى ملف خارجي يسمى personcontroller.js:
مثيل AngularJS
<! doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js ng-controller = "personctrl"> الاسم: <type type = "text" ng-model = "firstName"> <br> الاسم: <input type = "text" ng-model = "lastName"> <br> <br> الاسم: {{firstName + " + lastName}} </div> src = "personcontroller.js"> </script> </body> </html>نتائج التشغيل:
اسم:
اسم العائلة:
الاسم: جون دو
أمثلة أخرى
المثال التالي ينشئ ملف وحدة تحكم جديدة:
Angular.Module ('myapp' ، []). Controller ('namesctrl' ، function ($ scope) {$ scope.names = [{{name: 'Jani' ، Country: 'Norway'} ، {name: 'Hege' ، Country: 'Sweden'} ،احفظ الملف كـ NAMESCONTROLLER.JS:
ثم ، استخدم ملف وحدة التحكم في التطبيق:
مثيل AngularJS
<! doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js ng-controller = "namesctrl"> <ul> <li ng-repeat = "x in names"> {{x.name + '،' + x.country}} </li></ul> </viv> <script src = "namescontroller.jsتأثير الجري:
ما سبق هو تجميع بيانات وحدة تحكم AngularJS ، وسيتم استكماله لاحقًا.