في Angular ، وحدة التحكم هي وظيفة javaScript (النوع/الفئة) التي يتم استخدامها كمثيل لنطاق الزاوي (//www.vevb.com/article/91749.htm) يمتد باستثناء نطاق الجذر. عندما ننشئ نطاقًا جديدًا للطفل من خلال النطاق. $ API (http://docs.angularjs.org/api/ng.drootscope.scope#$new) ، هناك خيار لتمريره إلى وحدة التحكم كمعلمة من الأسلوب (لم أفهمها هنا ، أنا أعرف فقط أن المعلمة الأولى من جهاز التحكم هي تم إنشاؤها حديثًا. سيخبر هذا Angular أن وحدة التحكم والنطاق الجديد يجب أن يتم دمجها ، وتوسيع سلوكها.
يمكن استخدام وحدة التحكم على النحو التالي:
1. اضبط الحالة الأولية لكائن النطاق.
2. إضافة السلوك إلى النطاق.
1. إعداد الحالة الأولية لكائن النطاق
عادة ، عندما نقوم بإنشاء تطبيق ، نحتاج إلى تعيين حالة التهيئة للنطاق الزاوي.
يطبق Angular كائن نطاق جديد على مُنشئ وحدة التحكم (يقدر أنه يتم تمريره كمعلمة) ، ويؤسس حالة النطاق الأولي. هذا يعني أن Angular لا تنشئ أبدًا مثيلات نوع وحدة التحكم (على سبيل المثال ، لا يستخدم المشغل الجديد لمؤسس وحدة التحكم). يتم تطبيق المنشئ دائمًا على كائنات النطاق الموجودة.
نقوم بإنشاء حالة النطاق الأولية عن طريق إنشاء سمة النموذج. على سبيل المثال:
وظيفة GEATERINGCTRL (نطاق $) {$ scope.greeting = "hola!" ؛}
تقوم وحدة تحكم "MereingCtrl" بإنشاء نموذج يسمى "تحية" يمكن تطبيقه على القالب.
2. إضافة السلوك إلى كائن النطاق
السلوك على كائن النطاق الزاوي هو في شكل سمات طريقة النطاق للقوالب ووجهات النظر. يمكن لهذا السلوك تعديل نموذج التطبيق.
كما تمت مناقشته في فصل النموذج الموجهة (//www.vevb.com/article/91777.htm) ، يتم تعيين أي كائن (أو نوع بدائي) إلى النطاق ويصبح سمة النموذج. تتوفر أي وظيفة متصلة بالنطاق لوجهات نظر القالب ، ويمكن استدعاؤها عبر التعبير الزاوي أو عبر توجيه معالج الأحداث NG (مثل NgClick).
3. استخدام وحدات التحكم بشكل صحيح
بشكل عام ، يجب ألا تحاول وحدات التحكم فعل الكثير. يجب أن يحتوي فقط على منطق العمل المطلوب لرؤية واحدة (ولم يدور حولها ، وكنت أعتقد دائمًا أن وحدة التحكم هي مجرد إعادة توجيه ...).
للحفاظ على وحدة التحكم بسيطة ، فإن الطريقة الشائعة هي استخراج العمل الذي لا ينتمي إلى وحدة التحكم في الخدمة ، واستخدام هذه الخدمات من خلال حقن التبعية في وحدة التحكم. ستتم مناقشة هذه الأشياء في فصل خدمات حقن التبعية في المعالج.
لا تفعل ما يلي في وحدة التحكم:
4. ربط وحدات التحكم بأشياء النطاق الزاوي
يمكننا أن نربط بشكل صريح من أجهزة التحكم والكائنات النطاق من خلال النطاق. $ جديد ، أو نستخدم ضمنيًا توجيه NgController (http://docs.angularjs.org/api/ng.directive:ngController) أو $ route service (http://docs.angularjshularj.
1. مثال على مُنشئ وحدة التحكم والطريقة
لتوضيح كيفية عمل مكون وحدة التحكم في Angular ، دعنا ننشئ تطبيقًا صغيرًا باستخدام المكونات التالية:
تحتوي الرسالة الموجودة في قالبنا على ملزمة لنموذج التوابل ، والذي يتم تعيينه على "جدا" بشكل افتراضي. اضبط قيمة نموذج التوابل على "Chili" أو "Jalapeño" وفقًا للزر الذي يتم النقر عليه ، وسيتم تحديث الرسالة تلقائيًا عن طريق ربط البيانات.
<! doctype html> <html ng-app> <head> <meta http-equiv = "content-type" content = "text/html ؛ charset = utf-8"/> <title> controller meta> <meta content = "ie = edge = 1" type = "text/css"> .ng-cloak {display: none ؛ } </style> </head> <body> <div ng-controller = "sipicyctrl"> <button ng-click = "chilispicy ()"> chili </button> <button ng-click = "jalapenospicy ('jalapeño')"> jalapeño </button> src = "../ Angular-1.0.1.js" type = "text/javaScript"> </script> <script type = "text/javaScript"> function sipicyctrl ($ scope) {$ scope.spice = "جدا" ؛ $ scope.chilispicy = function () {$ scope.spice = "chili" ؛ } ؛ $ scope.jalapenospicy = function (val) {this.spice = val ؛ } ؛ } </script> </body> </html>أشياء يجب ملاحظتها في المثال أعلاه:
يمكن أن تأخذ طريقة وحدة التحكم معلمات ، كما هو موضح في المثال التالي:
<! doctype html> <html ng-app> <head> <meta http-equiv = "content-type" content = "text/html ؛ charset = utf-8"/> <title> method-methics </title> <meta content = "ie = rege = 1" type = "text/css"> .ng-cloak {display: none ؛ } </style> </head> <body> <div ng-controller = "sipicyctrl"> <input ng-model = "customspice" value = "wasabi"/> <button ng-click = "spicy (customspice)" {{spice}} حار! </p> </viv> <script src = "../ Angular 1.0.1.js" type = "text/javaScript"> </script> <script type = "text/javaScript"> وظيفة spicyctrl ($ scope) $ scope.spicy = function (Spice) {$ scope.spice = Spice ؛ } ؛ } </script> </body> </html>لاحظ أن وحدة تحكم MicyCtrl الآن تحدد طريقة فقط مع معلمة "التوابل" وتسمى "حار". يمكن أن يشير القالب إلى طريقة وحدة التحكم وتمرير سلسلة ثابتة أو قيمة نموذجية إليها.
ويستند ميراث وحدة التحكم في الزاوي على الميراث النطاق. لنلقي نظرة على المثال التالي:
<! doctype html> <html ng-app> <head> <meta http-equiv = "content-type" content = "text/html ؛ charset = utf-8"/> <title> inheritance </title> <meta content = "ie = edge ، chrome = 1" http-equiv = type = "text/css"> .ng-cloak {display: none ؛ } </style> </head> <body> <div ng-controller = "mainctrl"> <p> Good {{timeofday}} ، {{name}}! </p> <div ng-controller = "childctrl"> <p> good {{timeofday} ، {{} ng-controller = "babyctrl"> Good {{timeOfday}} ، {{name}}! </p> </viv> </viv> <script src = "../ Angular-1.1.js" type = "text/javaScript"> </script> $ scope.timeofday = 'الوقت الرئيسي' ؛ $ scope.name = 'main name' ؛ } وظيفة childCtrl ($ scope) {$ scope.name = 'child name' ؛ } وظيفة babyctrl (scope $) {$ scope.timeofday = 'baby time' ؛ $ scope.name = 'baby name' ؛ } </script> </body> </html>لاحظ كيف نعشش 3 نانوغرام مباشرة في القالب. من وجهة نظرنا ، سيؤدي بنية القالب هذه إلى إنشاء 4 نطاقات:
العمل الموروث هو نفسه في وحدة التحكم والنموذج. لذلك في مثالنا السابق ، يمكن إعادة كتابة جميع النماذج من خلال وحدة التحكم.
ملاحظة: لا يعمل ميراث النموذج الأولي بين وحدات تحكمين كما اعتقدنا ، لأنه كما ذكرنا سابقًا ، لا يتم تهيئة وحدة التحكم مباشرة من خلال الزاوي ، ولكنها تطبق هذا الكائن النطاق. (لا يتم إنشاء جهاز تحكم مباشرة بواسطة Angular ، ولكن يتم تطبيقه على كائن النطاق ، هنا هو نفسه كما كان من قبل ، ما زلت لا أفهم.)
5. اختبار وحدة التحكم
في حين أن هناك العديد من الطرق لاختبار وحدات التحكم ، فإن واحدة من أفضل الاتفاقيات ، كما هو موضح أدناه ، تتطلب حقن $ rootscope ووحدة تحكم $. (يجب تنسيق الاختبار مع jasmine.js)
<! doctype html> <html ng-app> <head> <meta http-equiv = "content-type" content = "text/html ؛ charset = utf-8"/> <title> controller-test </meta content = "ie = edge ، chrome = 1" http-equiv = href = "../ jasmine.css"> <style type = "text/css"> .ng-cloak {display: none ؛ } </style> </head> <body> <script src = "../ Angular 1.0.1.js" type = "text/javaScript"> </script> <script src = "../ Angular-Scenario-1.0.1.js type = "text/javaScript"> </script> <script src = "../ angular-mocks-1.0.1.js" type = "text/javaScript"> </script> <script type = "text/javaScript"> function myController ($ scope) {$ scope.spices = {"name": "jalapeno" ، "التوابل": "Hot Hot Hot!"} ، {"name": "habanero" ، "spiceness": "Lava Hot !!"}] ؛ $ scope.spice = "habanero" ؛ } وصف ("MyController Function" ، function () {وصف ("myController" ، function () {var scope ؛ isheach (enject (function ($ rootscope ، $ controller) {scope = $ rootscope. $ new () التوابل '، function () }) ؛ (function () {var jasmineenv = jasmine.getenv () ؛ jasmineenv.updateinterval = 1000 ؛ var trivialReporter = new jasmine.trivialReporter () ؛ Var CurrentWondload = window.onload ؛إذا احتجنا إلى اختبار وحدة التحكم المتداخلة ، فنحن بحاجة إلى إنشاء نفس علاقة الميراث النطاق في الاختبار كما في DOM.
<! doctype html> <html ng-app> <head> <meta http-equiv = "content-type" content = "text/html ؛ charset = utf-8"/> <title> controller-test </meta content = "ie = edge ، chrome = 1" http-equiv = href = "../ jasmine.css"> <style type = "text/css"> .ng-cloak {display: none ؛ } </style> </head> <body> <script src = "../ Angular 1.0.1.js" type = "text/javaScript"> </script> <script src = "../ Angular-Scenario-1.0.1.js type = "text/javaScript"> </script> <script src = "../ Angular-mocks-1.0.1.js" type = "text/javaScript"> </script> <script type = "text/javaScript"> function mainctrl ($ scope) $ scope.name = 'main name' ؛ } وظيفة childCtrl ($ scope) {$ scope.name = 'child name' ؛ } وظيفة babyctrl (scope $) {$ scope.timeofday = 'baby time' ؛ $ scope.name = 'baby name' ؛ } وصف ("myController" ، function () {var mainscope ، childscope ، babyscope ؛ quitteach (just (function ($ rootscope ، $ controller) {mainscope = $ rootscope. $ new () $ controller (childctrl ، {$ scope: توقع (الاسم الرئيسي). (function () {var jasmineenv = jasmine.getenv () ؛ jasmineenv.updateinterval = 1000 ؛ var trivialReporter = new jasmine.trivialReporter () ؛ Var CurrentWondload = window.onload ؛ما سبق هو المعلومات حول angularjs فهم مكون وحدة التحكم. سنستمر في إضافة المعلومات ذات الصلة في المستقبل. شكرا لك على دعمك!