تعتمد تطبيقات AngularJS بشكل أساسي على وحدات التحكم للتحكم في تدفق البيانات في التطبيق. يتم تعريف وحدة التحكم باستخدام تعليمات NG-Controller. وحدة التحكم هي وظيفة تحتوي على خصائص/خصائص وكائنات JavaScript. يقبل كل وحدة تحكم معلمة SCOPE $ لتحديد التطبيق/الوحدة النمطية ، والتي يتم التحكم فيها بواسطة وحدة التحكم.
<div ng-app = "" ng-controller = "studentController"> ... </div>
لقد أعلننا هنا عن وحدة تحكم الطالب التي تستخدم توجيه NG-Controller. كخطوة تالية ، سنقوم بتحديد الطالب على النحو التالي
<script> function studentController ($ scope) {$ scope.student = {firstName: "yiibai" ، lastName: "com" ، fullname: function () {var studentObject ؛ studentObject = $ scope.student ؛ إرجاع studentObject.firstName + "" + studentObject.lastname ؛ }} ؛} </script>يحدد StudentController نطاق $ كمعلمة كائن JavaScript.
يمثل نطاق $ التطبيق ، باستخدام كائن StudentController.
$ scope.student هو خاصية لكائن الطالب.
FirstName و LastName هماانان من كائن $ scope.student. لقد مررنا القيمة الافتراضية لهم.
FullName هي وظيفة لنطاق $. كائن أساسي ، ومهمته هي إرجاع الاسم المدمج.
في وظيفة FullName ، نريد الآن أن يعيد كائن الطالب اسم المجموعة.
كتوضيح ، من الممكن أيضًا تحديد كائن وحدة التحكم في ملف JS منفصل ووضع صفحات HTML في الملف.
يمكنك الآن استخدام نموذج NG أو استخدام التعبير على النحو التالي لاستخدام خصائص StudentController.
أدخل الاسم الأول: <input type = "text" ng-model = "student.firstName"> <br> أدخل الاسم الأخير: <input type = "text"
يوجد الآن مربعان للإدخال: student.firstname و student.lastname.
الآن هناك طريقة الطالب. fullName () تمت إضافتها إلى HTML.
الآن ، ما عليك سوى إدخال الاسم الأول ومربع إدخال اسم LastName لإدخال ما يجب إدخاله ، ويمكنك أن ترى أنه يتم تحديث الاسمين تلقائيًا.
مثال
المثال التالي سيظهر استخدام وحدة تحكم.
محتوى ملف testangularjs.html هو كما يلي:
<html> <head> <title> وحدة تحكم js الزاوية </title> </head> <body> <h2> ANGULALJS Application </h2> <div ng-app = "" ng-controller = "studentController"> أدخل الاسم الأول: <input type = "text" ng-model = "student.firstname" ng-model = "student.lastname"> <br> <br> أنت تدخل: {{student.fullname ()}} </div> <script> function studentController ($ scope) {$ scope.student = {firstName: "mahesh" ، lastname: studentObject = $ scope.student ؛ إرجاع studentObject.firstName + "" + studentObject.lastname ؛ }} ؛} </script> <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"> </script> </body> </html>الإخراج
افتح textangularjs.html في متصفح الويب وشاهد النتائج التالية:
ما سبق هو المعلومات التي تقوم بفرز وحدة تحكم AngularJS. سوف نستمر في فرز المعرفة ذات الصلة في المستقبل. شكرا لك على دعمك لهذا الموقع.