1. เริ่มต้น
ทุกคนควรรู้ว่าเมื่อเบราว์เซอร์โหลดหน้า HTML มันจะแยกวิเคราะห์หน้า HMTL ลงในทรี DOM ก่อนจากนั้นโหลดแต่ละโหนดองค์ประกอบในทรี DOM ทีละหนึ่ง เราสามารถรักษา AngularJS เป็นห้องสมุด JS คล้ายกับ jQuery เราแนะนำให้เป็น HTML ผ่านแท็ก <Script> ในเวลานี้ Angular จะเป็นโหนด Dom ธรรมดาที่รอให้เบราว์เซอร์แยกวิเคราะห์ เมื่อเบราว์เซอร์แยกวิเคราะห์โหนดนี้และพบว่าเป็นไฟล์ JS เบราว์เซอร์จะหยุดแยกวิเคราะห์โหนด DOM ที่เหลือและเริ่มดำเนินการ JS นี้ (เช่น Angular.js) ในเวลาเดียวกัน Angular จะตั้งค่าฟังเหตุการณ์เพื่อฟังเหตุการณ์ DomcontentLoaded ของเบราว์เซอร์ เมื่อเชิงมุมฟังเหตุการณ์นี้แอปพลิเคชันเชิงมุมจะเริ่มต้นขึ้น
2. ขั้นตอนการเริ่มต้น
หลังจากเริ่มต้นเชิงมุมมันจะมองหาคำสั่ง NG-APP จากนั้นเริ่มต้นชุดของส่วนประกอบที่จำเป็น (เช่น $ injector, $ Compile Service และ $ Rootscope) จากนั้นเริ่มแยกวิเคราะห์ต้นไม้ DOM อีกครั้ง
3. คอมไพล์และลิงค์
บริการ $ Compile ค้นหาองค์ประกอบ DOM ที่มีคำแนะนำที่ประกาศโดยการสำรวจต้นไม้ DOM เมื่อพบองค์ประกอบ DOM ที่มีคำแนะนำอย่างน้อยหนึ่งคำแนะนำมันจะเรียงลำดับคำแนะนำ (ตามลำดับความสำคัญของคำสั่ง) จากนั้นใช้บริการ $ หัวฉีดเพื่อค้นหาและรวบรวมฟังก์ชั่นคอมไพล์ของคำสั่งและดำเนินการ
หลังจากใช้วิธีการรวบรวมของแต่ละโหนดบริการ $ Compile จะเรียกใช้ฟังก์ชันลิงก์ ฟังก์ชั่นลิงค์นี้ตั้งค่าการตรวจสอบสำหรับคำแนะนำที่ถูกผูกไว้กับขอบเขตปิด พฤติกรรมนี้สร้างมุมมองสด
ในที่สุดหลังจากบริการ $ Compile เสร็จสมบูรณ์แล้ว AngularJS Runtime ก็พร้อม
4. ขั้นตอนการดำเนินการ
Angular ให้ลูปเหตุการณ์ของตัวเอง คำสั่งนั้นลงทะเบียนผู้ฟังเหตุการณ์ดังนั้นเมื่อเหตุการณ์ถูกเรียกใช้ฟังก์ชั่นคำสั่งจะทำงานในห่วง $ digest ของ AngularJs $ Digest Loop จะรอรายการนิพจน์ $ watch เมื่อตรวจพบการเปลี่ยนแปลงของโมเดลฟังก์ชัน $ watch จะถูกเรียกและจากนั้นรายการนาฬิกา $ จะถูกดูอีกครั้งเพื่อให้แน่ใจว่าไม่มีการเปลี่ยนแปลงแบบจำลอง
เมื่อ $ digest loop เสถียรและไม่พบการเปลี่ยนแปลงที่อาจเกิดขึ้นกระบวนการดำเนินการจะออกจากบริบทเชิงมุมและมักจะกลับไปที่เบราว์เซอร์และ DOM จะแสดงผลที่นี่
วาดขั้นตอนสำคัญของกระบวนการข้างต้นลงในกราฟดังต่อไปนี้:
ข้างต้นเป็นการแนะนำรายละเอียดเกี่ยวกับกระบวนการดำเนินการ AngularJS เราจะจัดระเบียบข้อมูลที่เกี่ยวข้องต่อไปในอนาคต ขอบคุณสำหรับการสนับสนุนเว็บไซต์นี้