1. ความแตกต่างระหว่าง NG-Show/Ng-hide และ NG-IF คืออะไร?
เราทุกคนรู้ ng-show/ng-hide นั้นซ่อนอยู่จริงและแสดงผ่าน display และ ng-if ควบคุมการเพิ่มและการลบของโหนด dom เพื่อให้ได้มัน ดังนั้นหากเราโหลดโหนด dom ตามเงื่อนไขที่แตกต่างกันประสิทธิภาพของ ng-if จะดีกว่า ng-show
2. อธิบายว่า $ Rootscrope คืออะไรและความแตกต่างจาก $ $?
ในแง่ของ Layman หน้า $rootScrope เป็นพ่อทั้งหมดของ $scope
ลองมาดูวิธีสร้าง $rootScope และ $scope
ขั้นตอนที่ 1: Angular Parses ng-app และสร้าง $rootScope ในหน่วยความจำ
ขั้นตอนที่ 2: Angular จะแยกวิเคราะห์ต่อไปค้นหานิพจน์ {{}} และแยกวิเคราะห์เป็นตัวแปร
ขั้นตอนที่ 3: DIV ที่มี ng-controller จะถูกแยกวิเคราะห์และชี้ไปที่ฟังก์ชั่น controller ในเวลานี้ฟังก์ชั่น controller จะกลายเป็นอินสแตนซ์ของวัตถุ $scope
3. นิพจน์ {{yourmodel}} ทำงานอย่างไร?
ขึ้นอยู่กับบริการ $interpolation หลังจากเริ่มต้นหน้า HTML หน้าจะพบการแสดงออกเหล่านี้และทำเครื่องหมาย ดังนั้นทุกครั้งที่พบ {{}} จะตั้งค่า $watch $interpolation จะส่งคืนฟังก์ชั่นด้วยพารามิเตอร์บริบท ในที่สุดฟังก์ชั่นจะถูกดำเนินการและถือว่าเป็นนิพจน์ $parse ไปยังขอบเขตนั้น
4. วัฏจักรย่อยใน Angular คืออะไร?
ในแต่ละรอบ digest Angular จะเปรียบเทียบค่าของ model ใน scope เสมอ โดยทั่วไปวัฏจักร digest จะถูกทริกเกอร์โดยอัตโนมัติและเรายังสามารถใช้ $apply สำหรับการเรียกใช้งานด้วยตนเอง
5. วิธียกเลิก $ หมดเวลาและหยุดดู $ ()?
หยุด $timeout เราสามารถใช้ cancel :
var customtimeout = $ timeout (function () {// รหัสของคุณ}, 1000); $ timeout.cancel (customtimeout);หยุดดู $:
//. $ watch () จะส่งคืนฟังก์ชั่นที่หยุดฟังก์ชั่นการลงทะเบียนที่เราเก็บไว้ในตัวแปร var deregisterwatchfn = $ rootscope. $ watch ('somergloballyavailableproperty' ฟังก์ชั่น (newval) {ถ้า (newval)6. ฉันจะตั้งข้อ จำกัด ในคำสั่งเชิงมุมได้อย่างไร? ความแตกต่างระหว่าง @, =, & ในขอบเขตคืออะไร?
restrict สามารถตั้งค่าแยกกัน:
แอตทริบิวต์การจับคู่
E จับคู่แท็ก
C Match Class
m จับคู่ความคิดเห็น
แน่นอนคุณสามารถตั้งค่าหลายค่าเช่น AEC เพื่อสร้างการแข่งขันหลายรายการ
ใน scope , @, =, & จะแสดงตามลำดับเมื่อทำการเชื่อมโยงค่า
@ รับสตริงชุดซึ่งสามารถตั้งค่าด้วยตัวเองหรือถูกผูกไว้โดยใช้ {{yourModel}} ;
= การผูกมัดแบบสองทิศทางการเชื่อมโยงคุณสมบัติบางอย่างใน scope ;
& ใช้เพื่อดำเนินการนิพจน์บางอย่างใน scope หลัก เราตั้งค่าฟังก์ชั่นบางอย่างที่ต้องดำเนินการ
Angular.module ('docsisolationexample', []) .controller ('คอนโทรลเลอร์', ['$ scope', ฟังก์ชั่น ($ scope) {$ scope.alertName = function () {Alert ('Direct Cope &');}}]) }, เทมเพลต: '<button ng-click = "testclick ()"> คลิกฉัน </button>', คอนโทรลเลอร์: ฟังก์ชั่น ($ scope) {$ scope.testclick = function () {$ scope.clickhandle ();}}}};};});<div ng-app = "docsisolationexample"> <div ng-controller = "คอนโทรลเลอร์"> <my-customer click-handle = "AlertName ()"> </my-customer> </div> </div>
<ทำการผูกทางเดียว
7. รายการอย่างน้อยสามวิธีในการตระหนักถึงการสื่อสารระหว่างโมดูลที่แตกต่างกัน?
1. บริการ
2. เหตุการณ์ระบุเหตุการณ์ที่ถูกผูกไว้
3. ใช้ $ rootscope
4. ใช้ $ parent โดยตรง, $$ Childhead ฯลฯ ระหว่างคอนโทรลเลอร์
5. Directive ระบุแอตทริบิวต์สำหรับการเชื่อมข้อมูล
8. มาตรการใดที่สามารถปรับปรุงประสิทธิภาพเชิงมุม
แนะนำอย่างเป็นทางการ, ปิด debug , $compileProvider
myapp.config (ฟังก์ชั่น ($ compileProvider) {$ compileProvider.debuginfoenabled (false);}); ใช้นิพจน์ที่มีผลผูกพันหนึ่งรายการเช่น {{::yourModel}}
ลดจำนวนผู้เฝ้าดู
หลีกเลี่ยงการใช้ ng-repeat ในการโหลดการเลื่อนที่ไม่มีที่สิ้นสุด
ใช้อุปกรณ์ทดสอบประสิทธิภาพเพื่อสำรวจปัญหาประสิทธิภาพเชิงมุมของคุณ เราสามารถใช้ Simple console.time() หรือใช้เครื่องมือนักพัฒนาและ Batarang
console.time ("Timername"); // codeconsole.timeend ("timername");9. คุณคิดว่าการใช้ jQuery ใน Angular เป็นเรื่องดีหรือไม่?
นี่เป็นคำถามที่เปิดกว้างและแม้ว่าจะมีการอภิปรายมากมายบนอินเทอร์เน็ต แต่ก็เชื่อว่านี่ไม่ใช่ความพยายามที่ดีเป็นพิเศษ ในความเป็นจริงเมื่อเราเรียนรู้เชิงมุมเราควรยอมรับความคิดของ Angular จาก 0, การเชื่อมข้อมูลใช้ API บางส่วนที่ Angular มาด้วยเส้นทางที่สมเหตุสมผลและจัดระเบียบเขียนคำแนะนำและบริการที่เกี่ยวข้อง ฯลฯ Angular มาพร้อมกับ APIs จำนวนมากที่สามารถแทนที่ API ที่ใช้กันทั่วไปใน jQuery เราสามารถใช้ Angular.element, $ http, $ timeout, ng-init ฯลฯ
เราอาจเปลี่ยนมุมมอง หากต้องการความต้องการทางธุรกิจและสำหรับผู้มาใหม่ (คุ้นเคยกับ jQuery มากขึ้น) บางทีการแนะนำ jQuery ของคุณสามารถช่วยแก้ปัญหาได้เช่นการใช้ปลั๊กอินแน่นอนนี่คือการปรับปรุงประสิทธิภาพการทำงานโดยส่งผลกระทบต่อองค์กรรหัส ด้วยความเข้าใจที่ลึกซึ้งยิ่งขึ้นของ Angular รหัสบางอย่างที่ได้รับการแนะนำเมื่อ jQuery จะค่อยๆถูกทอดทิ้งในระหว่างการสร้างใหม่ (?poเป็นคนเช่นนี้ฉันหวังว่าคุณจะไม่ถูกเยาะเย้ย แต่ธุรกิจถูกขับออกไป)
ดังนั้นฉันคิดว่ามันผิดอย่างแน่นอนที่จะบอกว่าทั้งสองเฟรมเวิร์กไม่สามารถใช้ร่วมกันได้เลย แต่เราควรพยายามอย่างเต็มที่เพื่อติดตามการออกแบบเชิงมุม
10. วิธีดำเนินการทดสอบหน่วยเชิงมุม
เราสามารถใช้ karam + jasmine สำหรับการทดสอบหน่วย เราแนะนำแอพเชิงมุมผ่าน NGMOCK จากนั้นเพิ่มกรณีทดสอบของเราด้วยตัวเอง รหัสทดสอบง่าย ๆ :
อธิบาย ('calculator', function () {beforeeach (โมดูล ('calculatorApp')); var $ controller; ก่อนหน้า (inject (ฟังก์ชัน (_ $ controller _) {$ controller = _ $ controller_;}); $ controller ('calculatorcontroller', {$ scope: $ scope});11. สรุป
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาและการทำงานของทุกคน หากคุณมีคำถามใด ๆ โปรดฝากข้อความเพื่อพูดคุย