ในความเป็นจริงฉันไม่ทราบว่าใครควรจะกำหนดเป้าหมายหรือสถานที่ที่จะเริ่มเขียนดังนั้นฉันจะเริ่มเขียนตามแนวคิดง่ายๆ
1.Angular.element
2.Angular.bootstrap
เรามีความชัดเจนมากว่า NG-APP ถูกนำไปใช้กับโหนดและ Angular จะช่วยให้คุณเริ่มต้นโดยอัตโนมัติ กระบวนการเริ่มต้นแบ่งออกเป็นขั้นตอนต่อไปนี้
1.Angular จะเริ่มต้นโดยอัตโนมัติเมื่อโหลดเอกสารและก่อนจะพบโหนดที่ระบุโดยคำสั่ง NG-APP
2. การโหลดคำแนะนำที่เกี่ยวข้องกับโมดูล
3. สร้างหัวฉีดที่เกี่ยวข้องกับแอปพลิเคชัน (ผู้จัดการการพึ่งพา)
4. เริ่มรวบรวม DOM ด้วย NG-APP ที่จัดตั้งขึ้นเป็นโหนดรูท
ตอนนี้เราเริ่มต้นมันเองและทำสิ่งที่เทียบเท่ากับคำสั่ง NG-APP Angular.Element นี่คือ wrapper, ห่อองค์ประกอบ DOM ดั้งเดิมหรือสตริง HTML เป็นองค์ประกอบ jQuery Angular.bootstrap สามารถเริ่มต้นสคริปต์ด้วยตนเองเราใช้สองนี้เพื่อเริ่มต้นสคริปต์นี้
การคัดลอกรหัสมีดังนี้:
<! doctype html>
<html lang = "zh-cn">
<head>
<meta charset = "utf-8">
<title> Bootstrap-Manual </title>
<style type = "text/css">
.ng-cloak {
แสดง: ไม่มี;
-
</style>
</head>
<body>
นี่คือด้านนอกของ ng-app ~~ {{1+2}}}
<div id = "widuu"> นี่คือ ng-app ~~~ {{1+2}} </div>
<script src = "angular.min.js" type = "text/javascript"> </script>
<script type = "text/javascript">
Angular.element (เอกสาร). พร้อม (ฟังก์ชั่น () {
Angular.bootstrap (Angular.element (document.getElementById ("widuu")));
-
</script>
</body>
</html>
2. คอมไพเลอร์
เราเห็นได้ชัดว่าเอกสาร AngularJS อย่างเป็นทางการนั้นเต็มไปด้วยระบบการตั้งชื่ออูฐเช่น Ngapp, Ngmodule, Ngbind ฯลฯ เป็นคำแนะนำที่เกี่ยวข้อง ในหมู่พวกเขาคอมไพเลอร์ HTML ช่วยให้เราสามารถกำหนดคุณลักษณะองค์ประกอบและแท็กด้วยตัวเอง Angular เรียกคำสั่งพฤติกรรมเพิ่มเติมเหล่านี้
เอกสารอย่างเป็นทางการอธิบายคอมไพเลอร์เช่นนี้
การคัดลอกรหัสมีดังนี้:
ผู้ประกอบการ
คอมไพเลอร์เป็นบริการเชิงมุมที่สำรวจ DOM ที่กำลังมองหาคุณลักษณะ กระบวนการรวบรวมเกิดขึ้นในสองขั้นตอน
คอมไพล์: สำรวจ DOM และรวบรวมคำสั่งทั้งหมด ผลลัพธ์คือฟังก์ชั่นการเชื่อมโยง
ลิงค์: รวมคำสั่งเข้ากับขอบเขตและสร้างมุมมองสด การเปลี่ยนแปลงใด ๆ ในโมเดลขอบเขตจะสะท้อนให้เห็นในมุมมองและการโต้ตอบของผู้ใช้กับมุมมองจะสะท้อนให้เห็นในโมเดลขอบเขต สิ่งนี้ทำให้โมเดลขอบเขตเป็นแหล่งเดียวของความจริง
คำสั่งบางอย่างเช่น NG-Repeat Clone Elements DOM หนึ่งครั้งสำหรับแต่ละรายการในคอลเลกชัน การมีการคอมไพล์และเฟสลิงก์ช่วยเพิ่มประสิทธิภาพเนื่องจากเทมเพลตที่โคลนจะต้องรวบรวมเพียงครั้งเดียวและจากนั้นเชื่อมโยงหนึ่งครั้งสำหรับแต่ละอินสแตนซ์โคลน
คอมไพเลอร์เป็นบริการเชิงมุมรับผิดชอบการสำรวจโหนด DOM และค้นหาคุณสมบัติ การรวบรวมแบ่งออกเป็นสองขั้นตอน:
1. การรวบรวม: สำรวจโหนดและรวบรวมคำสั่งทั้งหมดส่งคืนฟังก์ชันการเชื่อมโยง
2. ลิงค์: ผูกคำสั่งเป็นขอบเขตและสร้างมุมมองสด การเปลี่ยนแปลงใด ๆ ในขอบเขตจะสะท้อนให้เห็นในมุมมอง (อัปเดตมุมมอง); กิจกรรมของผู้ใช้ (เปลี่ยน) ไปยังเทมเพลตจะสะท้อนให้เห็นในโมเดลขอบเขต (การเชื่อมโยงสองทาง) สิ่งนี้ช่วยให้โมเดลขอบเขตสามารถสะท้อนค่าที่ถูกต้อง
คำสั่งบางอย่างเช่น NG-repeat คัดลอกองค์ประกอบเฉพาะ (ชุดค่าผสม) หนึ่งครั้งสำหรับแต่ละองค์ประกอบในคอลเลกชัน การรวบรวมและการเชื่อมโยงเป็นสองขั้นตอนในการปรับปรุงประสิทธิภาพ เนื่องจากเทมเพลตโคลนจะต้องรวบรวมเพียงครั้งเดียวจากนั้นเชื่อมโยงองค์ประกอบในแต่ละคอลเลกชันหนึ่งครั้ง (คล้ายกับแคชเทมเพลต)
3. สร้างคำสั่งของคุณทีละขั้นตอน
1. เข้าใจคำสั่ง
ก่อนอื่นเราเข้าใจว่า Directive นั้นมีพื้นฐานมาจากการตั้งชื่ออูฐเช่น ngmodule เมื่อรวบรวมการแข่งขันจะเป็นเช่นนี้เช่น:
การคัดลอกรหัสมีดังนี้:
<อินพุต ng-model = "foo">
<อินพุต data-ng: model = "foo">
Directive สามารถใช้ X- หรือ Data- เป็นคำนำหน้าและสามารถใช้:,-, หรือ _ etc Delimiter เพื่อแปลงวิธีการตั้งชื่ออูฐดังนี้:
การคัดลอกรหัสมีดังนี้:
<span ng-bind = "ชื่อ"> </span> <br/>
<span ng: bind = "name"> </span> <br/>
<span ng_bind = "ชื่อ"> </span> <br/>
<span data-ng-bind = "name"> </span> <br/>
<span x-ng-bind = "ชื่อ"> </span> <br/>
โดยทั่วไปเราใช้ ng-bind เพื่อให้สอดคล้องกับ ngbind รูปแบบนี้
$ Compile สามารถจับคู่คำสั่งตามชื่อองค์ประกอบแอตทริบิวต์ชื่อคลาสและความคิดเห็น
การคัดลอกรหัสมีดังนี้:
<my-dir> </my-dir>
<ขยาย my-dir = "exp"> </span>
<!-Directive: My-dir exp->
<span> </span>
ในระหว่างกระบวนการรวบรวมคอมไพเลอร์จับคู่ข้อความกับนิพจน์ฝังตัวในแอตทริบิวต์ (เช่น {{บางสิ่งบางอย่าง}}) ผ่านบริการ $ Interpolate นิพจน์เหล่านี้จะลงทะเบียนเป็นนาฬิกาและจะได้รับการปรับปรุงร่วมกันเป็นส่วนหนึ่งของวัฏจักรย่อย นี่คือการแก้ไขอย่างง่าย:
<img src = "img/{{username}}. jpg"/> hello {{username}}!
2. ขั้นตอนการรวบรวม
สามขั้นตอนในการ "รวบรวม" HTML:
1. อันดับแรกแปลง HTML เป็นวัตถุ DOM ผ่าน API มาตรฐานของเบราว์เซอร์ นี่เป็นขั้นตอนที่สำคัญมาก เพราะเทมเพลตจะต้องสามารถแยกได้ (สอดคล้องกับข้อกำหนด) สิ่งนี้สามารถนำมาเปรียบเทียบกับระบบเทมเพลตส่วนใหญ่ซึ่งโดยทั่วไปจะขึ้นอยู่กับสตริงไม่ใช่องค์ประกอบ DOM
2. การรวบรวม DOM ทำได้โดยเรียกวิธี $ Comple () วิธีนี้สำรวจ DOM และตรงกับคำสั่ง หากการแข่งขันประสบความสำเร็จจะถูกเพิ่มลงในรายการคำสั่งพร้อมกับ DOM ที่เกี่ยวข้อง ตราบใดที่มีการระบุคำสั่งทั้งหมดที่เกี่ยวข้องกับ DOM ที่ระบุไว้พวกเขาจะถูกจัดเรียงตามลำดับความสำคัญและดำเนินการฟังก์ชั่น Compile () ในลำดับนั้น ฟังก์ชั่นการคอมไพล์ Directive มีโอกาสในการปรับเปลี่ยนโครงสร้าง DOM และรับผิดชอบในการสร้างการแยกวิเคราะห์ของฟังก์ชั่นลิงก์ () เมธอด $ compile () ส่งคืนฟังก์ชั่นการเชื่อมโยงแบบรวมซึ่งเป็นคอลเลกชันของฟังก์ชั่นที่เชื่อมโยงที่ส่งคืนโดยฟังก์ชั่นคอมไพล์ของคำสั่ง
3. เชื่อมต่อเทมเพลตเข้ากับขอบเขตผ่านฟังก์ชั่นการเชื่อมโยงที่ส่งคืนในขั้นตอนก่อนหน้า ฟังก์ชั่นการเชื่อมโยงของ Directive นี้ทำให้พวกเขาสามารถลงทะเบียนผู้ฟังบางส่วนในองค์ประกอบและสร้างนาฬิกาที่มีขอบเขต ผลลัพธ์ในนี้คือการเชื่อมโยงสองทางระหว่างขอบเขตและ DOM เมื่อขอบเขตเปลี่ยนแปลง DOM จะได้รับการตอบกลับที่สอดคล้องกัน
การคัดลอกรหัสมีดังนี้:
var $ compile = ... ; // ฉีดเข้าไปในรหัสของคุณ
var scope = ... ;
var html = '<div ng-bind =' exp '> </div>';
// ขั้นตอนที่ 1: แยกวิเคราะห์ HTML เป็นองค์ประกอบ DOM
เทมเพลต var = angular.element (HTML);
// ขั้นตอนที่ 2: รวบรวมเทมเพลต
var linkfn = $ compile (เทมเพลต);
// ขั้นตอนที่ 3: เชื่อมโยงเทมเพลตที่รวบรวมกับขอบเขต
linkfn (ขอบเขต);
การผูกแอตทริบิวต์ NGATTR
การคัดลอกรหัสมีดังนี้:
<svg>
<Circle ng-attr-cx = "{{cx}}"> </circle>
</svg>
นั่นคือทั้งหมดวันนี้และเริ่มเขียนเพื่อสร้างคำสั่งในวันพรุ่งนี้ ~~~ ความยาวการควบคุมไม่ควรนานเกินไปมีแนวคิดหลักมากมายในบทนี้ ~~~