ในส่วนก่อนหน้านี้เฟรมเวิร์ก JS เชิงมุมจะถูกนำเสนอสั้น ๆ ในส่วนนี้จะมีกลไก bootstrap ของ Angular (bootstrap) และคอมไพเลอร์ (การรวบรวม) ต่อไป
1: bootstrap: การเริ่มต้นเชิงมุม
1: ระบบอัตโนมัติเริ่มต้นที่แนะนำโดย Angular มีดังนี้:
<! doctype html> <html xmlns: ng = "http://angularjs.org" ng-app> <body> ... <script src = "angular.js"> </body> </html
ใช้ NGAPP เพื่อทำเครื่องหมายโหนดรูทที่คุณต้องการบูตแอปพลิเคชันโดยอัตโนมัติซึ่งโดยทั่วไปเป็นแท็ก HTML เมื่อเหตุการณ์ domcontentloaded กระตุ้นเชิงมุมมันจะค้นหา NGAPP เป็นโหนดรูทของแอปพลิเคชันโดยอัตโนมัติ หากพบการดำเนินการต่อไปนี้จะดำเนินการ:
1. โหลดโมดูล (โมดูล) คำสั่งที่เกี่ยวข้อง (คำแนะนำ)
2. สร้างหัวฉีดแอปพลิเคชัน (กลไกการฉีดของ Angular)
3. รวบรวมและประมวลผล NG-APP เป็นคำแนะนำโหนดรูท สิ่งนี้ช่วยให้คุณสามารถปรับแต่งการเลือกโหนด DOM เป็นโหนดรูทแอปพลิเคชัน
<! doctype html> <html ng-app = "potaintalModulename"> <body> ฉันสามารถเพิ่ม: {{ +}}. <script src = "angular.js"> </script> </body> </html>2: การเริ่มต้นด้วยตนเอง:
หากคุณต้องการควบคุมการเริ่มต้นมากขึ้นคุณสามารถใช้วิธีการบูตแบบแมนนวลที่กำหนดเองเพื่อเริ่มต้นแทนการเริ่มต้นอัตโนมัติของ Angular ตัวอย่างเช่นคุณต้องทำอะไรบางอย่างก่อนที่จะรวบรวมเทมเพลตเชิงมุมเช่นการเปลี่ยนเนื้อหาบางอย่างของเทมเพลต วิธีการบูตแบบแมนนวลจะเป็นดังนี้:
<! doctype html> <html xmlns: ng = "http://angularjs.org"> <body> สวัสดี {{'โลก'}}! {angular.bootstrap (เอกสาร);}); </script> </body> </html>1. หลังจากโหลดรหัสทั้งหมดในหน้าแล้วให้ค้นหาโหนดรูทเทมเพลต HTML (องค์ประกอบเอกสารทั่วไป)
2. โทร API/Angular.bootstrap (Angular.bootstrap (องค์ประกอบ [, โมดูล])) เพื่อรวบรวมเทมเพลตเพื่อให้สามารถทำงานได้
สอง: คอมไพเลอร์: คำแปลของ Angular
กลไกการรวบรวมของ Angular ช่วยให้นักพัฒนาสามารถเพิ่มไวยากรณ์ HTML ใหม่ลงในเบราว์เซอร์ช่วยให้เราสามารถเพิ่มโหนด HTML แอตทริบิวต์และแม้แต่สร้างโหนดที่กำหนดเองแอตทริบิวต์ Angular ขยายพฤติกรรมเหล่านี้เป็นคำสั่งการสร้างคำสั่งที่มีประโยชน์และช่วยให้เราสามารถสร้างคำสั่งเฉพาะโดเมน
1: การประมวลผลคอมไพเลอร์แบ่งออกเป็นสองขั้นตอน:
1. แปลง DOM, รวบรวมคำสั่งและฟังก์ชั่นลิงค์ (การเชื่อมต่อ)
2. ผสานคำแนะนำและขอบเขตเพื่อสร้างมุมมองชีวิต การเปลี่ยนแปลงใด ๆ ในโหมดขอบเขตจะถูกสะท้อนลงในมุมมองและการโต้ตอบของผู้ใช้จากมุมมองจะถูกซิงโครไนซ์กับโมเดลขอบเขตและขอบเขตเป็นแหล่งข้อมูลเดียว
2: คำสั่ง Directive
Directive เป็นการกระทำที่จะดำเนินการโดยการแก้ไขการออกแบบ HTML พิเศษ สามารถวางไว้ในชื่อแอตทริบิวต์คลาสของโหนดหรือแม้แต่ในความคิดเห็น HTML นี่คือวิธีการเขียนที่เทียบเท่าของ NG-bind ของ Angular:
<span ng-bind = "exp"> </span> <span> </span> <ng-bind> </ng-bind> <!-คำสั่ง: ng-bind exp>
Directive เป็นเพียงฟังก์ชั่นที่จะดำเนินการโดย Angular ใน DOM นี่คือตัวอย่างของการลากและหยดที่สามารถนำไปใช้กับแอตทริบิวต์ของ Span และ Div:
Angular.module ('Drag', []). Directive ('Draggable', ฟังก์ชั่น ($ document) {var startx =, starty =, x =, y =; ฟังก์ชั่นคืน (ขอบเขต, องค์ประกอบ, attr) {element.css ({ตำแหน่ง: 'ญาติ' (เหตุการณ์) {startx = event.screenx - x; 'px', ซ้าย: x + 'px'});การสาธิต
คุณสามารถลากและย้ายฉันไปที่ใดก็ได้!
3: ดูความเข้าใจ
เอ็นจิ้นเทมเพลตจำนวนมากได้รับการออกแบบมาเพื่อรวมเทมเพลตและรุ่นเพื่อส่งคืนสตริงจากนั้นผนวกเข้ากับโหนด DOM โดยใช้ InnerHTML ซึ่งคิดว่าการเปลี่ยนแปลงใด ๆ ในข้อมูลจะต้องรวมอยู่ในการสร้างเนื้อหาใหม่และต่อท้าย DOM รูปต่อไปนี้เป็นของเทคโนโลยีการเชื่อมโยงทางเดียว:
Angular ไม่ได้ใช้คำสั่งคำสั่งมากกว่าสตริง ค่าส่งคืนเป็นฟังก์ชั่นลิงค์ที่ผสานโมเดลข้อมูล การเชื่อมโยงมุมมองและโมเดลเป็นไปโดยอัตโนมัติและโปร่งใสและไม่ต้องการให้นักพัฒนาเพิ่มการดำเนินการเพิ่มเติมเพื่ออัปเดตมุมมอง Angular ไม่เพียง แต่มีผลผูกพันของแบบจำลองข้อมูล แต่ยังเป็นแนวคิดของพฤติกรรม เป็นรูปแบบสองทางรูปร่างมีดังนี้:
วัสดุ:
1. เว็บไซต์อย่างเป็นทางการ: http://angularjs.org/
2. การดาวน์โหลดรหัส: https://github.com/angular/angular.js
ด้านบนเป็นกลไก bootstrap เชิงมุมและกลไกคอมไพเลอร์ที่แนะนำโดยตัวแก้ไข ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันและบรรณาธิการจะตอบกลับคุณทันเวลา ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Wulin.com!