ภาพรวม
คอมไพเลอร์ HTML ของ AngularJS ช่วยให้เบราว์เซอร์สามารถรับรู้ไวยากรณ์ HTML ใหม่ได้ ช่วยให้คุณเชื่อมโยงพฤติกรรมกับองค์ประกอบหรือคุณลักษณะ HTML และยังช่วยให้คุณสร้างองค์ประกอบใหม่ที่มีพฤติกรรมที่กำหนดเอง AngularJS เรียกพฤติกรรมนี้ว่าขยายไปถึง "คำแนะนำ"
HTML มีโครงสร้างที่ประกาศมากมายเพื่อควบคุมรูปแบบเมื่อเขียนหน้าคงที่ ตัวอย่างเช่นหากคุณต้องการให้เนื้อหาเป็นศูนย์กลางคุณไม่จำเป็นต้องบอกเบราว์เซอร์ให้“ ค้นหาจุดกึ่งกลางของหน้าต่างและรวมเข้ากับเนื้อหาตรงกลาง” คุณเพียงแค่ต้องเพิ่มแอตทริบิวต์ Align = "Center" ให้กับองค์ประกอบที่ต้องมีศูนย์กลาง นี่คือพลังของภาษาที่ประกาศ
แต่ภาษาที่ประกาศยังมีบางสิ่งที่ไม่สามารถทำได้และหนึ่งในเหตุผลก็คือคุณไม่สามารถใช้มันเพื่อเปิดใช้งานเบราว์เซอร์เพื่อรับรู้ไวยากรณ์ใหม่ ตัวอย่างเช่นหากคุณไม่ได้อยู่กึ่งกลางเนื้อหา แต่เป็น 1/3 ทางด้านซ้ายมันจะไม่สามารถทำได้ ดังนั้นเราจึงต้องการวิธีการเปิดใช้งานเบราว์เซอร์เพื่อเรียนรู้ไวยากรณ์ HTML ใหม่
นักเรียน AngularJS มาจากคำแนะนำบางอย่างที่มีประโยชน์มากสำหรับการสร้างแอพ นอกจากนี้เรายังหวังว่าคุณจะสามารถสร้างคำแนะนำบางอย่างที่มีประโยชน์สำหรับแอปพลิเคชันของคุณเอง คำแนะนำเพิ่มเติมเหล่านี้คือ "ภาษาเฉพาะโดเมน" ที่คุณสร้างแอพ
กระบวนการรวบรวมจะเกิดขึ้นที่ด้านเบราว์เซอร์ ฝั่งเซิร์ฟเวอร์จะไม่เข้าร่วมในขั้นตอนใด ๆ และจะไม่ถูกคอมไพล์ไว้ล่วงหน้า
ผู้ปฏิบัติตาม
คอมไพเลอร์เป็นบริการที่จัดทำโดย AngularJs มันค้นหาคุณสมบัติที่เกี่ยวข้องโดยการสำรวจ DOM กระบวนการรวบรวมทั้งหมดแบ่งออกเป็นสองขั้นตอน
1. การรวบรวม: สำรวจ DOM และรวบรวมคำแนะนำที่เกี่ยวข้องทั้งหมดเพื่อสร้างฟังก์ชั่นลิงค์
2. ลิงค์: ผูกขอบเขตกับคำสั่งและสร้างมุมมองแบบไดนามิก การเปลี่ยนแปลงใด ๆ ในโมเดลขอบเขตจะสะท้อนให้เห็นในมุมมองและการกระทำของผู้ใช้ในมุมมองจะสะท้อนให้เห็นในโมเดลขอบเขต สิ่งนี้ทำให้โมเดลขอบเขตเป็นสิ่งเดียวที่คุณต้องใส่ใจในตรรกะทางธุรกิจของคุณ
มีคำแนะนำบางอย่างเช่น NG-Repeat ซึ่งโคลนทุกองค์ประกอบ DOM ในชุดข้อมูลหนึ่งครั้ง การฝึกฝนการหารกระบวนการรวบรวมทั้งหมดออกเป็นสองขั้นตอน: การรวบรวมและการเชื่อมโยงช่วยเพิ่มประสิทธิภาพโดยรวมเนื่องจากเทมเพลตโคลนจะต้องรวบรวมเพียงครั้งเดียวทั้งหมดและจากนั้นเชื่อมโยงกับอินสแตนซ์ของโมเดลที่เกี่ยวข้อง
คำแนะนำ
คำสั่งบ่งชี้ว่า "การกระทำที่ควรดำเนินการเมื่อโครงสร้าง HTML ที่เกี่ยวข้องเข้าสู่เฟสการรวบรวม" คำสั่งสามารถเขียนในชื่อขององค์ประกอบในแอตทริบิวต์ในชื่อคลาส CSS และในความคิดเห็น ด้านล่างนี้เป็นตัวอย่างหลายประการของการใช้คำสั่ง NG-bind ที่มีฟังก์ชั่นเดียวกัน
การคัดลอกรหัสมีดังนี้:
<span ng-bind = "exp"> </span>
<span> </span>
<ng-bind> </ng-bind>
<!-Directive: NG-Bind Exp->
คำสั่งเป็นเพียงฟังก์ชั่นที่จำเป็นต้องดำเนินการเมื่อคอมไพเลอร์คอมไพล์กับ DOM ที่เกี่ยวข้อง คุณสามารถค้นหาข้อมูลรายละเอียดเพิ่มเติมเกี่ยวกับคำสั่งในเอกสาร Directive API
ด้านล่างเป็นคำสั่งที่ทำให้องค์ประกอบที่จับได้ หมายเหตุแอตทริบิวต์ draggable ในองค์ประกอบ <span>
index.html:
การคัดลอกรหัสมีดังนี้:
<! doctype html>
<html ng-app = "drag">
<head>
<script src = "http://code.angularjs.org/angular-1.1.0.min.js"> </script>
<script src = "script.js"> </script>
</head>
<body>
<span draggable> ลากฉัน </span>
</body>
</html>
script.js:
การคัดลอกรหัสมีดังนี้:
Angular.module ('Drag', [])
Directive ('draggable', function ($ document) {
var startx = 0, starty = 0, x = 0, y = 0;
ฟังก์ชั่น return (ขอบเขต, องค์ประกอบ, attr) {
element.css ({
ตำแหน่ง: 'ญาติ',
ชายแดน: '1px Solid Red',
BackgroundColor: 'LightGrey'
เคอร์เซอร์: 'ตัวชี้'
-
element.bind ('mousedown', ฟังก์ชั่น (เหตุการณ์) {
startx = event.screenx - x;
starty = event.screeny - y;
$ document.bind ('Mousemove', Mousemove);
$ document.bind ('mouseup', mouseup);
-
ฟังก์ชั่น mousemove (เหตุการณ์) {
y = event.screeny - starty;
x = event.screenx - startx;
element.css ({
ด้านบน: y + 'px'
ซ้าย: x + 'px'
-
-
ฟังก์ชั่น mouseup () {
$ document.unbind ('Mousemove', Mousemove);
$ document.unbind ('Mouseup', Mouseup);
-
-
-
พฤติกรรมใหม่นี้สามารถทำได้โดยการเพิ่มแอตทริบิวต์ draggable ความงามของการปรับปรุงของเราคือเราให้ความสามารถใหม่ของเบราว์เซอร์ เราใช้วิธีที่เป็นธรรมชาติในการขยายความสามารถของเบราว์เซอร์ในการทำความเข้าใจพฤติกรรมใหม่และไวยากรณ์ใหม่ตราบใดที่นักพัฒนาคุ้นเคยกับกฎ HTML
เข้าใจมุมมอง
มีระบบเทมเพลตมากมายออนไลน์ ส่วนใหญ่ของพวกเขา "ผูกเทมเพลตอักขระคงที่และข้อมูลสร้างอักขระใหม่และแทรกลงในองค์ประกอบหน้าผ่าน innerhtml"
ซึ่งหมายความว่าการเปลี่ยนแปลงใด ๆ ในข้อมูลจะทำให้ข้อมูลถูกรวมเข้ากับเทมเพลตเพื่อสร้างอักขระใหม่แล้วแทรกลงใน DOM ปัญหาที่เกิดขึ้น ได้แก่ : การป้อนข้อมูลของผู้ใช้จะต้องอ่านและรวมกับข้อมูลโมเดลการป้อนข้อมูลของผู้ใช้จะต้องถูกเขียนทับกระบวนการอัปเดตทั้งหมดจะต้องมีการจัดการด้วยตนเองและการขาดการแสดงออกที่หลากหลาย
AngularJs แตกต่างกัน คอมไพเลอร์ AngularJS ใช้ DOM พร้อมคำแนะนำแทนที่จะเป็นเทมเพลตสตริง มันส่งคืนฟังก์ชั่นลิงค์ซึ่งรวมกับโมเดลขอบเขตเพื่อสร้างมุมมองแบบไดนามิก กระบวนการเชื่อมโยงของมุมมองและโมเดลนี้คือ "โปร่งใส" นักพัฒนาไม่จำเป็นต้องทำอะไรเกี่ยวกับการอัปเดตมุมมอง และแอปพลิเคชันไม่ได้ใช้ InnerHTML ดังนั้นเราจึงไม่จำเป็นต้องเขียนทับข้อมูลของผู้ใช้ โดยเฉพาะอย่างยิ่งคำสั่งของ Angular ไม่เพียง แต่สามารถใช้การผูกสตริง แต่ยังใช้โครงสร้างบางอย่างที่บ่งบอกถึงพฤติกรรม
การรวบรวม AngularJS จะสร้าง "DOM ที่มีเสถียรภาพ" ซึ่งหมายความว่าอินสแตนซ์ขององค์ประกอบ DOM ที่ผูกพันกับโมเดลข้อมูลจะไม่เปลี่ยนแปลงในระหว่างวงจรชีวิตของการเชื่อมโยง นอกจากนี้ยังหมายความว่ารหัสสามารถรับการอ้างอิงอินสแตนซ์ขององค์ประกอบ DOM และการลงทะเบียนเหตุการณ์โดยไม่ต้องกังวลว่าการอ้างอิงนี้จะหายไปเมื่อเทมเพลตและข้อมูลรวมกัน