ข้อความต้นฉบับยังคงดำเนินต่อไปและหนังสือเล่มนี้ยังคงอยู่ต่อไป - - ยังคงอ้างถึง http://code.angularjs.org/1.0.2/docs/guide/compiler
1. สรุป
คอมไพเลอร์ HTML ของ Angular ช่วยให้นักพัฒนาสามารถปรับแต่งไวยากรณ์ HTML ใหม่ คอมไพเลอร์ช่วยให้เราสามารถแนบพฤติกรรมกับองค์ประกอบหรือแอตทริบิวต์ HTML ใด ๆ หรือแม้กระทั่งแท็ก HTML ใหม่แอตทริบิวต์ (เช่น <eafeafle girl = "cf"> </eaface>) Angular เรียกคำสั่งพฤติกรรมเพิ่มเติมเหล่านี้
HTML มีโครงสร้างสไตล์ HTML ที่กำหนดไว้ล่วงหน้าจำนวนมากซึ่งจัดรูปแบบเอกสารแบบคงที่โดยเฉพาะ (ซึ่งสามารถบอกเบราว์เซอร์ว่าจะแสดงเนื้อหาที่ติดแท็กได้อย่างไร) สมมติว่าบางสิ่งบางอย่างจำเป็นต้องมีศูนย์กลางและเราไม่จำเป็นต้องสอนเบราว์เซอร์ว่าจะทำอย่างไร (คำที่ไม่ละเว้นที่นี่) เราเพียงแค่ต้องเพิ่ม Align = "center" ลงในแท็กที่ต้องมีศูนย์กลาง นี่คือสิ่งที่ยอดเยี่ยมเกี่ยวกับภาษาที่ประกาศ
แต่ภาษาที่ประกาศยังมีข้อ จำกัด นั่นคือคุณไม่สามารถบอกเบราว์เซอร์ได้ถึงวิธีจัดการกับไวยากรณ์นอกขอบเขตที่กำหนดไว้ล่วงหน้า ตัวอย่างเช่นเราไม่สามารถบอกเบราว์เซอร์ได้อย่างง่ายดายเพียงวิธีการจัดเรียงข้อความ 1/3 ของเบราว์เซอร์ ดังนั้นเราต้องการวิธีที่จะทำให้เบราว์เซอร์เคลื่อนที่ไปตามเวลาและเรียนรู้ไวยากรณ์ใหม่
Angular pre-binds คำสั่งบางอย่างที่มีประโยชน์ในการสร้างแอปพลิเคชัน นอกจากนี้เรายังสามารถสร้างคำสั่งที่ไม่ซ้ำกันสำหรับแอปพลิเคชันของเราเอง ส่วนขยายคำสั่งเหล่านี้จะกลายเป็น "ภาษาเฉพาะโดเมน" ของแอปพลิเคชันของเราเอง
การรวบรวมเหล่านี้จะเกิดขึ้นที่ด้านเบราว์เซอร์เท่านั้นและไม่จำเป็นต้องใช้ฝั่งเซิร์ฟเวอร์หรือขั้นตอนการเปรียบเทียบล่วงหน้า
2. คอมไพเลอร์
ในฐานะที่เป็นบริการเชิงมุมคอมไพเลอร์มีหน้าที่ในการข้ามโครงสร้าง DOM และค้นหาคุณสมบัติ กระบวนการรวบรวมแบ่งออกเป็นสองขั้นตอน:
1. คอมไพล์: สำรวจทรีโหนด DOM และรวบรวมคำสั่งทั้งหมด ผลลัพธ์คือฟังก์ชั่นการเชื่อมโยง
2. ลิงค์: ผูกคำสั่งเป็นขอบเขตและสร้างมุมมองสด การเปลี่ยนแปลงใด ๆ ในขอบเขตจะสะท้อนให้เห็นในมุมมอง (อัปเดตมุมมอง); กิจกรรมของผู้ใช้ (เปลี่ยน) ไปยังเทมเพลตจะสะท้อนให้เห็นในโมเดลขอบเขต (การเชื่อมโยงสองทาง) สิ่งนี้ช่วยให้โมเดลขอบเขตสามารถสะท้อนค่าที่ถูกต้อง
คำสั่งบางอย่างเช่น NG-repeat คัดลอกองค์ประกอบเฉพาะ (ชุดค่าผสม) หนึ่งครั้งสำหรับแต่ละองค์ประกอบในคอลเลกชัน การรวบรวมและการเชื่อมโยงเป็นสองขั้นตอนในการปรับปรุงประสิทธิภาพ เนื่องจากเทมเพลตโคลนจะต้องรวบรวมเพียงครั้งเดียวจากนั้นเชื่อมโยงองค์ประกอบในแต่ละคอลเลกชันหนึ่งครั้ง (คล้ายกับแคชเทมเพลต)
3. คำสั่ง
Directive เป็นพฤติกรรมที่เกิดขึ้นเมื่อพบโครงสร้าง HTML ที่เฉพาะเจาะจงในระหว่างการรวบรวม คำสั่งสามารถวางไว้ในชื่อแอตทริบิวต์คลาสและแม้แต่ความคิดเห็นขององค์ประกอบ นี่คือวิธีการอ้างอิง NG-bind (คำสั่งในตัว):
<span ng-bind = "exp"> </span> <span> </span> <ng-bind> </ng-bind> <!-คำสั่ง: ng-bind exp->
Directive เป็นเพียงฟังก์ชั่นที่ดำเนินการเมื่อคอมไพเลอร์พบใน DOM เอกสาร Directive API อธิบายรายละเอียดเกี่ยวกับวิธีการสร้างคำสั่ง
นี่คือตัวอย่างที่ช่วยให้องค์ประกอบสามารถเล่นซ่อนเร้นกับเมาส์ของคุณได้ ...
<! doctype html> <html lang = "zh-cn" ng-app = "hideankseek"> <head> <meta charset = "utf-8"> <title> ซ่อนและค้นหา </title> <style type = "css"> .ng-cloak {display: ไม่มี; } </style> </head> <body> <Span Wildcat> ฉันวิ่งหนีไปทันทีที่ฉันสัมผัส ~~ มาฉัน ~~ </span> <script src = "../ angular-1.0.1.js" type = "ข้อความ/javascript"> </script> ($ document) {var maxleft = 400, maxtop = 300; "ตำแหน่ง": "Absolute", "Border": "1px Solid Green"}); }). ข้อความ (msg [parseint (math.random () * 10,000 % msg.length)]);การเพิ่มแอตทริบิวต์ "Wildcat" ในองค์ประกอบใด ๆ จะทำให้องค์ประกอบมีพฤติกรรมใหม่ ด้วยวิธีนี้เราสอนเบราว์เซอร์ถึงวิธีการจัดการกับองค์ประกอบที่จะซ่อนและค้นหา (ไม่ต้องกังวลคุณไม่ได้อยู่ในห้องหนึ่งคุณจะไม่แขวน -_-!) เราได้ขยาย "คำศัพท์" ของเบราว์เซอร์ผ่านวิธีการนี้ นี่เป็นวิธีที่ค่อนข้างเป็นธรรมชาติสำหรับทุกคนที่คุ้นเคยกับกฎ HTML
ตอนนี้ตอนดึกแล้วเราจะดำเนินการต่อในวันพรุ่งนี้ - - แล้วเจอกันหลังจากโฆษณา
======================== บรรทัดหารที่งดงาม ==============================================
4. เข้าใจมุมมอง (ดู)
มีระบบเทมเพลตมากมายด้านนอกซึ่งมักจะเชื่อมต่อกับข้อมูลผ่านสตริงเทมเพลตสร้างสตริง HTML สุดท้ายและเขียนผลลัพธ์ลงในองค์ประกอบผ่านแอตทริบิวต์ InnerHTML
ซึ่งหมายความว่าเมื่อข้อมูลใด ๆ เปลี่ยนแปลงข้อมูลและแม่แบบจะต้องรวมเข้ากับสตริงอีกครั้งแล้วเขียนกลับไปยังองค์ประกอบที่เกี่ยวข้องเป็น innerHTML มีปัญหาบางอย่างที่นี่: (ฉันไม่เข้าใจการแปลตามตัวอักษรที่นี่ ... มีเพียง yy เท่านั้น) สมมติว่ามีฉากดังกล่าวและเทมเพลตมีกล่องอินพุต ผู้ใช้จะเข้าสู่กล่องอินพุตและเทมเพลตได้รับการอัปเดตแบบซิงโครนัส เทมเพลตปกติอัปเดตมุมมองผ่าน InnerHTML, สตริงและการเชื่อมต่อข้อมูลซึ่งจะขัดจังหวะการป้อนข้อมูลของผู้ใช้และมีประสบการณ์ที่ไม่ดี
Angular มีเอกลักษณ์ คอมไพเลอร์เชิงมุม (คอมไพเลอร์) ประมวลผล DOM ผ่านคำสั่งไม่ใช่โดยการประมวลผลเทมเพลตสตริง ผลการประมวลผลเป็นฟังก์ชั่นการเชื่อมโยงที่รวมกับโมเดลขอบเขตและสร้างเทมเพลตแบบเรียลไทม์ การเชื่อมโยงมุมมองไปยังโมเดลขอบเขตนั้นโปร่งใสสำหรับเรา นักพัฒนาไม่จำเป็นต้องดำเนินการใด ๆ เพื่ออัปเดตมุมมองหรือรูปแบบ ยิ่งกว่านั้นเนื่องจากเทมเพลตมุมมองไม่ได้รับการอัปเดตด้วย InnerHTML การป้อนข้อมูลผู้ใช้จะไม่ถูกขัดจังหวะ นอกจากนี้คำสั่งเชิงมุมไม่เพียง แต่สามารถผูกค่าข้อความ แต่ยังเป็นโครงสร้างเชิงพฤติกรรม
วิธีการประมวลผลของเชิงมุมนี้สร้าง DOM ที่เสถียร ซึ่งหมายความว่าในช่วงวงจรชีวิตขององค์ประกอบ DOM มันจะถูกผูกไว้กับอินสแตนซ์ของโมเดลที่แน่นอนเสมอและความสัมพันธ์นี้จะไม่เปลี่ยนแปลง นี่ก็หมายความว่ารหัสสามารถอ้างอิงถึงวัตถุ DOM, ลงทะเบียนฟังก์ชั่นเหตุการณ์กับมันและการอ้างอิงนี้จะไม่ถูกทำลายโดยการรวมข้อมูลแม่แบบ