เมื่อเรากำลังเขียนแอปพลิเคชัน AngularJS มันเป็นเรื่องยากมากที่จะได้รับข้อมูล (ข้อมูล) และบริการที่ซ่อนอยู่ในแอปพลิเคชันผ่านคอนโซล JavaScript ของ Chrome, Firefox และ IE ต่อไปนี้เป็นเคล็ดลับง่ายๆที่สามารถช่วยให้เราใช้คอนโซล JavaScript เพื่อตรวจสอบและควบคุมแอปพลิเคชันเชิงมุมที่ใช้งานได้ทำให้ง่ายต่อการทดสอบปรับเปลี่ยนหรือแม้แต่เขียนแอปพลิเคชันเชิงมุมแบบเรียลไทม์
1: รับขอบเขต (ขอบเขต)
เราสามารถใช้บรรทัดของรหัส JS เพื่อรับขอบเขตใด ๆ (หรือแม้กระทั่งขอบเขตที่แยกได้):
คัดลอกรหัสดังนี้:> angular.element (TargetNode) .Scope ()
-> ChildScope {$ id: "005", นี่: ChildScope, $$ ผู้ฟัง: Object, $$ ListenerCount: Object, $ Parent: ขอบเขต…}
หรือได้รับขอบเขตที่แยกได้:
คัดลอกรหัสดังนี้:> angular.element (targetNode) .isolatescope ()
-> ขอบเขต {$ id: "009", $$ ChildTail: ChildScope, $$ Childhead: ChildScope, $$ prevsibling: ChildScope, $$ NextSibling: ขอบเขต…}
TargetNode ที่นี่หมายถึงโหนด HTML (โหนด HTML) คุณสามารถใช้ document.querySelector () ได้อย่างง่ายดาย
2: ทรีขอบเขตการตรวจสอบ (ต้นไม้ขอบเขต)
เพื่อให้ดีขึ้นดีบั๊กแอปพลิเคชันของเราบางครั้งเราจำเป็นต้องตรวจสอบโครงสร้างขอบเขต (ขอบเขต) บนหน้า ในเวลานี้เราต้องใช้ AngularJs
Baratang และ NG-Inspector เป็นส่วนขยายของเบราว์เซอร์โครเมี่ยมสองตัวเพื่อช่วยให้เราดูขอบเขตแบบเรียลไทม์ และส่วนขยายทั้งสองนี้มีคุณสมบัติอื่น ๆ ที่มีประโยชน์มาก
(1) .angularjs baratang
(2) .ng-Inspector
3: บริการรวบรวมข้อมูล (บริการ)
เราสามารถใช้ฟังก์ชั่นหัวฉีดที่กำหนดองค์ประกอบ NGAPP เพื่อคว้าบริการ (บริการ) หรือรับบริการ (บริการ) ทางอ้อมผ่านองค์ประกอบใด ๆ ที่มีคลาสขอบเขต NG
คัดลอกรหัสดังนี้:> angular.element (document.QuerySelector ('html')). หัวฉีด (). รับ ('myservice')
-> วัตถุ {undo: function, redo: function, _pushaction: function, newDocument: ฟังก์ชั่น, init: function …}
// หรือทั่วไปมากกว่าเล็กน้อย
> angular.element (document.QuerySelector ('. ng-scope')). หัวฉีด (). รับ ('myService')
ต่อไปเราสามารถใช้บริการที่เกี่ยวข้องเช่นเดียวกับที่เราทำหลังจากฉีดในโปรแกรม
4: รับคอนโทรลเลอร์จากคำสั่ง
มีคำสั่ง (คำแนะนำ) ที่กำหนดฟังก์ชั่นบางอย่าง (ปกติ) เป็นคอนโทรลเลอร์ ในการรับตัวอย่างคอนโทรลเลอร์ที่มีคำสั่งที่ระบุจากคอนโซลเราจำเป็นต้องใช้ฟังก์ชันคอนโทรลเลอร์ () เท่านั้น
คัดลอกรหัสดังนี้:> angular.element ('my-pages'). คอนโทรลเลอร์ ()
-> Constructor {}
อันสุดท้ายไม่ได้ใช้กันทั่วไป แต่เป็นเทคนิคขั้นสูงมากขึ้น
5: คุณสมบัติ Chrome Console (คอนโซล)
Chrome มีคำสั่งทางลัดที่มีประโยชน์มากมายสำหรับการดีบักเว็บแอปพลิเคชันในคอนโซล (คอนโซล) นี่คือคำสั่งที่มีประโยชน์ที่สุดสำหรับการพัฒนาเชิงมุม:
$ 0 - $ 4: รับองค์ประกอบ DOM 5 ตัวสุดท้ายในหน้าต่างผู้ตรวจสอบ (จอภาพ) วิธีทางลัดนี้สามารถช่วยให้เราคว้าขอบเขต (ขอบเขต) ขององค์ประกอบที่เลือกได้: Angular.element ($ 0) .Scope ()
$ (ตัวเลือก) และ $$ (ตัวเลือก): สามารถแทนที่ querySelector () และ querySelectorall ได้อย่างสะดวก
ขอบคุณ @zgohr สำหรับเคล็ดลับนี้!
สรุป
ด้วยเคล็ดลับง่าย ๆ เหล่านี้เราสามารถรับข้อมูลในขอบเขตใด ๆ ตรวจสอบลำดับชั้นของขอบเขตบริการฉีดและคำสั่งควบคุม
ดังนั้นครั้งต่อไปเมื่อคุณต้องการปรับแต่งรหัสหรือควบคุมแอปพลิเคชัน AngularJS จากคอนโซลฉันหวังว่าคุณจะจำเคล็ดลับเหล่านี้ได้เช่นฉันและใช้งานได้มากขึ้น
หากต้องการดูไวยากรณ์ AngularJS เพิ่มเติมคุณสามารถติดตามได้: คู่มือการอ้างอิง AngularJS เวอร์ชันภาษาอังกฤษและฉันหวังว่าทุกคนจะสนับสนุน wulin.com เพิ่มเติม