عندما نكتب تطبيقات AngularJS ، من الصعب للغاية الحصول على البيانات (البيانات) والخدمات المختبئة في التطبيق من خلال لوحات مفاتيح JavaScript من Chrome و Firefox و IE. فيما يلي بعض النصائح البسيطة التي يمكن أن تساعدنا في استخدام وحدة التحكم JavaScript لمراقبة التطبيق الزاوي الجري والتحكم فيه ، مما يسهل اختبار التطبيقات الزاوية أو تعديلها أو حتى الكتابة في الوقت الفعلي.
1: الحصول على النطاقات (النطاق)
يمكننا استخدام سطر من رمز JS للحصول على أي نطاق (أو حتى نطاقات معزولة):
انسخ الرمز كما يلي:> Angular.Element (TargetNode) .scope ()
-> childscope {$ id: "005" ، هذا: childrscope ، $$ المستمعين: كائن ، $$ leadercount: كائن ، $ الوالد: النطاق ...}
أو الحصول على نطاقات معزولة:
انسخ الرمز كما يلي:> Angular.Element (TargetNode) .IsolatesCope ()
-> Scope {$ ID: "009" ، $$ Childraild: childscope ، $$ childhead: childscope ، $$ prevsibling: childscope ، $$ nextsibling: scope ...}
يشير TargetNode هنا إلى عقدة HTML (عقدة HTML). يمكنك بسهولة استخدام Document.QuerySelector () للحصول عليها.
2: شجرة نطاق الشاشة (شجرة النطاق)
من أجل تصحيح تطبيقنا بشكل أفضل ، نحتاج في بعض الأحيان إلى التحقق من هيكل النطاق (النطاق) على الصفحة. في هذا الوقت ، نحتاج إلى استخدام AngularJS
Baratang و NG-inspector هما ملحقان متصفح Chrome لمساعدتنا في عرض النطاق في الوقت الفعلي. وهذان الامتدادان لهما بعض الميزات الأخرى المفيدة للغاية.
(1) .angularjs Baratang
(2) .ng-inspector
3: خدمات الزحف (الخدمات)
يمكننا استخدام وظيفة الحاقن التي تحدد عنصر NGAPP للاستيلاء على أي خدمة (خدمة) أو الحصول على الخدمة (الخدمة) بشكل غير مباشر من خلال أي عنصر مع فئة NG-Scope.
انسخ الرمز كما يلي:> Angular.Element (document.queryselector ('html')). enjector (). get ('myservice')
-> Object {undo: function ، redo: function ، _pushAction: function ، newDocument: function ، init: function ...}
// أو أكثر بقليل
> Angular.Element (document.queryseletric ('. ng-scope')). enjector (). get ('myservice')
بعد ذلك ، يمكننا استخدام الخدمة ذات الصلة تمامًا كما فعلنا بعد الحقن في البرنامج.
4: احصل على وحدة تحكم من التوجيه
هناك توجيهات (تعليمات) تحدد وظائف معينة (عادة شائعة) كوحدة تحكم. للحصول على مثال وحدة تحكم مع توجيه محدد من وحدة التحكم ، نحتاج فقط إلى استخدام وظيفة وحدة التحكم ().
انسخ الرمز كما يلي:> Angular.Element ('my-pages'). controller ()
-> مُنشئ {}
آخر واحد لا يستخدم بشكل شائع ولكنه تقنية أكثر تقدماً.
5: ميزات Crome Console (وحدة التحكم)
لدى Chrome العديد من أوامر الاختصار المفيدة للغاية لتصحيح تطبيقات الويب في وحدة التحكم (وحدة التحكم). فيما يلي بعض من أكثر الأوامر فائدة للتطور الزاوي:
$ 0 - $ 4: احصل على آخر 5 عناصر DOM في نافذة Inspotor (شاشة). يمكن أن تساعدنا طريقة الاختصار هذه على الاستيلاء على النطاقات (النطاق) للعنصر المحدد: Angular.Element ($ 0) .scope ()
$ (محدد) و $$ (محدد): يمكن أن تحل محل QuerySelector () و QuerySelectorAlctall بسهولة.
شكرا ZgoHr لهذه النصيحة!
لخص
باستخدام هذه النصائح البسيطة ، يمكننا الحصول على بيانات في أي نطاق ، ومراقبة التسلسل الهرمي ، وخدمات الحقن ، وتوجيهات التحكم.
لذلك في المرة القادمة ، عندما تريد القيام ببعض ضبط الرمز أو الفحص أو التحكم في تطبيق AngularJS من وحدة التحكم ، آمل أن تتذكر هذه النصائح مثلي واستخدامها أكثر.
لعرض المزيد من بناء جملة AngularJS ، يمكنك متابعة: الإصدار اليدوي المرجعي لـ AngularJS ، وآمل أن يدعم الجميع wulin.com أكثر.