ที่อยู่ดั้งเดิม: http://code.angularjs.org/1.0.2/docs/guide/concepts
ดำเนินการต่อ. -
1. สรุป
บทความนี้ส่วนใหญ่ให้ภาพรวมของส่วนประกอบเชิงมุมและอธิบายวิธีการทำงาน รายการมีดังนี้:
2. เริ่มต้น
นี่คือวิธีเริ่มต้นเชิงมุม (ดูแผนภูมิที่มีตัวอย่างต่อไปนี้):
1. เบราว์เซอร์โหลด HTML และแปลงแท็ก HTML เป็นวัตถุ DOM;
2. เบราว์เซอร์โหลดสคริปต์ของ Angular.js;
3. Angular รอเหตุการณ์ Domcontentloaded;
4. มุมมองเชิงมุมสำหรับ NG-APP ซึ่งเป็นคำสั่งที่ใช้ในการระบุช่วงขอบเขตแอปพลิเคชัน
5. ถ้า NG-APP มีโมดูลที่ระบุ (อาจเป็น NG-APP = "SOMEAPP") มันจะถูกใช้เป็นการกำหนดค่า $ injector;
6. $ injector ใช้เพื่อสร้าง $ Compile Service (บริการ) และ $ rootscope;
7. บริการ $ Compile ใช้เป็น "คอมไพล์" (ชนิดของการเดินทางข้ามจากนั้นทำสิ่งลึกลับเล็กน้อย) dom และเชื่อมต่อกับ $ rootscope ที่สอดคล้องกัน
8. ng-init คำสั่งนี้สร้างแอตทริบิวต์ชื่อในขอบเขตที่สอดคล้องกันและกำหนดค่า "คิตตี้";
9. แทรกค่าของ "{{name}}" ลงในนิพจน์และในที่สุดก็แสดง "Hello Kitty!"
<! doctype html> <html lang = "zh-cn" ng-app> <head> <meta charset = "utf-8"> <title> hello kitty! } </style> </head> <body> <div ng-init = "name = 'kitty'"> สวัสดี {{name}}! </div> <script src = "../ angular-1.0.1.js" type = "javascript"> </script> </body> </html>ความคืบหน้าช้าเพราะฉันพูดถึงบางสิ่งบางอย่างกับใครบางคนในคืนนี้ - - นั่นคือประโยคอีกครั้ง - - ตอนดึกแล้ว - - Angular พบกันใหม่หลังจากโฆษณา!
-
โฆษณาเสร็จสิ้น - - ดำเนินการต่อ
3. รันไทม์
แผนภูมินี้และตัวอย่างต่อไปนี้อธิบายว่าเชิงมุมมีปฏิสัมพันธ์ผ่านเบราว์เซอร์อีเวนต์อีเว้นท์ (ฟังก์ชั่นการประมวลผลตลอดเวลาเช่นเดียวกับฟังก์ชั่นที่ดำเนินการโดยตัวจับเวลาจะถูกจัดเรียงในโครงสร้างคิวและใช้ลูปอนันต์เพื่อแยกฟังก์ชั่นจากคิวอย่างต่อเนื่อง http://wiki.nodejs.tw/nodejs_from_scratch/javascript-yunodejs/2-1-event-loop)
1. เบราว์เซอร์อีเวนต์อีเวนต์รอให้กิจกรรมมาถึง เหตุการณ์มาจากการโต้ตอบของผู้ใช้ (เหตุการณ์ DOM), เหตุการณ์ตัวจับเวลา (settimeout), เหตุการณ์เครือข่าย (การตอบสนองของเซิร์ฟเวอร์, XHR, ฯลฯ );
2. ฟังก์ชั่นการโทรกลับเหตุการณ์เริ่มดำเนินการ ที่นี่เราป้อนบริบท JavaScript (บริบท) ฟังก์ชั่นการโทรกลับนี้สามารถแก้ไขโครงสร้าง DOM ได้
3. เมื่อฟังก์ชั่นการเรียกกลับถูกเรียกใช้เบราว์เซอร์ออกจากบริบท JavaScript และวาดมุมมองตามการเปลี่ยนแปลง DOM
Angular Modifys การไหลของจาวาสคริปต์ทั่วไปโดยการสร้างลูปการประมวลผลเหตุการณ์ของตัวเอง สิ่งนี้แยก JavaScript ออกเป็นบริบทการดำเนินการแบบดั้งเดิมและเชิงมุม การดำเนินการใด ๆ ที่ดำเนินการในบริบทการดำเนินการเชิงมุมมีการเชื่อมโยงข้อมูลเชิงมุมการจัดการข้อยกเว้นการดูทรัพย์สินและความสามารถอื่น ๆ เราสามารถป้อนบริบทการดำเนินการเชิงมุมโดยใช้ $ Apply () ใน JavaScript แต่โปรดจำไว้ว่าในสถานที่ส่วนใหญ่ (Angular) (เช่นคอนโทรลเลอร์, บริการ) คำสั่งที่จัดการกิจกรรมจะเรียก $ $ สำหรับคุณ สถานการณ์ที่เรียกว่า $ ใช้ด้วยตนเองมักจะเป็นเมื่อคุณใช้ตัวจัดการเหตุการณ์ที่กำหนดเองหรือจัดการการโทรกลับจากไลบรารีบุคคลที่สาม
1. ป้อนบริบทการดำเนินการเชิงมุมโดยการโทรหาขอบเขต $ ใช้ (stimulusfn) Simulusfn เป็นฟังก์ชั่น (รวมถึงขอบเขตเป็นอาร์กิวเมนต์) หรือการแสดงออกทางกฎหมายเชิงมุมที่เราต้องการดำเนินการในบริบทการดำเนินการเชิงมุม
2. Angular ดำเนินการกระตุ้นซึ่งมักจะเปลี่ยนสถานะแอปพลิเคชัน
3. Angular เข้าสู่ $ Digest Loop ลูปนี้ประกอบด้วยลูปขนาดเล็กสองตัวที่จัดการกับ $ evalasync คิวและรายการนาฬิกา $ $ digest loop จะทำให้การวนซ้ำก่อนที่โมเดลจะมีเสถียรภาพเช่น $ evalasync คิวว่างเปล่าและไม่พบการเปลี่ยนแปลงโดยรายการนาฬิกา $
4. $ evalasync คิวใช้เป็นวิธีการจัดเรียงว่าเฟรมสแต็กปัจจุบันจะต้องกระโดดออกจากกรอบสแต็กปัจจุบัน (เฟรมสแต็กหมายถึงพื้นที่ (หรือพื้นที่) ที่จัดสรรให้กับฟังก์ชั่นที่กำลังทำงานอยู่ในสแต็กพารามิเตอร์ที่ผ่านมา ตัวแปรที่เก็บไว้บนสแต็ก) ทั้งหมดอยู่ในกรอบสแต็ก โดยปกติจะทำได้โดยใช้ settimeout (0) แต่วิธีการ settimeout (0) จะทำให้เกิดความช้าหรือเมื่อเบราว์เซอร์ดึงมุมมองหลังจากแต่ละเหตุการณ์ถูกประมวลผลมุมมองจะแฟลช (เชิงมุมแก้ปัญหานี้ได้อย่างไร?
5. $ รายการนาฬิกาเป็นชุดของนิพจน์ที่อาจแก้ไขในการทำซ้ำล่าสุด หาก (แบบจำลอง) เปลี่ยนแปลงฟังก์ชั่น $ watch จะถูกเรียกให้บรรลุเป้าหมายในการกำหนด DOM ใหม่ใหม่
6. เมื่อลูป Digest $ Angular เสร็จสมบูรณ์ (สถานการณ์ที่กล่าวถึงใน 3 ก่อนหน้า) หลังจากออกจากบริบทเชิงมุมและ JavaScript เบราว์เซอร์จะทาสี DOM ใหม่เพื่อตอบสนองต่อการเปลี่ยนแปลง
ต่อไปนี้อธิบายถึงวิธีการตัวอย่าง "hello kitty" (-_-!) ใช้เอฟเฟกต์การเชื่อมโยงข้อมูลเมื่อผู้ใช้ป้อนข้อความในกล่องข้อความ
1. การรวบรวมเฟส:
A) NG-Model และ Input Directive Keydown Event Event Listener ถูกระบุใน <put>
b) {{ชื่อ}} ตัวยึด (การแก้ไขไม่ทราบวิธีการแปล) (นิพจน์) ตั้งค่า $ watch เพื่อตอบกลับเมื่อชื่อเปลี่ยน
2. ระยะเวลารันไทม์:
A) กดปุ่ม "X" ในการควบคุม Inut เพื่อให้เบราว์เซอร์ทริกเกอร์เหตุการณ์คีย์ดาวน์
b) คำสั่งอินพุตจับการเปลี่ยนแปลงในค่ากล่องข้อความจากนั้นเรียกใช้ $ apple ("name = 'x';"), อัปเดตโมเดลที่ใช้ในบริบทการดำเนินการเชิงมุม
c) Angluar ใช้ "name = 'x';" กับโมเดล (โมเดลมีการเปลี่ยนแปลง)
D) $ Digest Loop เริ่มต้น
e) $ รายการนาฬิกาตรวจพบว่าค่าของชื่อมีการเปลี่ยนแปลงจากนั้นวิเคราะห์นิพจน์ {{name}} อีกครั้งจากนั้นอัปเดต DOM
f) บริบทการดำเนินการเชิงมุม (เชิงมุม) บริบทจากนั้นออกจากเหตุการณ์คีย์ดาวน์และบริบทการดำเนินการจาวาสคริปต์ในทางกลับกัน;
g) เบราว์เซอร์วาดมุมมองและอัปเดตอักขระใหม่
<! doctype html> <html lang = "zh-cn" ng-app> <head> <meta charset = "utf-8"> <title> hello kitty! } </style> </head> <body> <อินพุต ng-model = "name"/> <p> สวัสดี {{name}}! </p> <script src = "../ angular-1.0.1.js" type = "javascript"> </script> </body> </html>4. ขอบเขต
ขอบเขตมีหน้าที่ตรวจจับการเปลี่ยนแปลงในแบบจำลองและทำหน้าที่เป็นบริบทการดำเนินการของนิพจน์ ขอบเขตอยู่ในลำดับชั้นคล้ายกับโครงสร้าง DOM (อย่างที่เราเรียนรู้ก่อนหน้านี้การแบ่งอาจเกี่ยวข้องกับคอนโทรลเลอร์) (สำหรับรายละเอียดตรวจสอบเอกสารคำสั่งแต่ละตัวเพื่อดูคำสั่งใดที่จะสร้างขอบเขตใหม่)
ตัวอย่างต่อไปนี้แสดงให้เห็นว่าค่าของนิพจน์ "ชื่อ" ถูกกำหนดตามขอบเขตที่ขึ้นอยู่กับ (ซึ่งเป็นของ) และยังรวมถึงวิธีการค้นหาค่า (คล้ายกับโซ่ขอบเขต JS ถ้าคุณไม่มีมันโปรดมองหาพ่อของฉัน)
<! doctype html> <html lang = "zh-cn" ng-app> <head> <meta charset = "utf-8"> <title> scope </title> <style type = "text/css"> .ng-cloak {display: ไม่มี; } </style> </head> <body> <div ng-controller = "controllera"> สวัสดี {{name}}!; </div> <div ng-controller = "controllerb"> สวัสดี {{name}}!; <div ng-controller = "controlerc"> สวัสดี {{name}}!; <div ng-controller = "controllerd"> สวัสดี {{name}} !; </div> </div> </div> <script src = "../ angular-1.0.1.js" type = "text/javaScript"> </script> <script type = "text/javascript"> ฟังก์ชัน collentralera ($ scope) } function controllerb ($ scope) {$ scope.name = 'lclao'; } ฟังก์ชั่นควบคุม ($ scope) {$ scope.name = 'Jeffrey'; } function controllerd ($ scope) {} </script> </body> </html>5. คอนโทรลเลอร์
<! doctype html> <html lang = "zh-cn" ng-app> <head> <meta charset = "utf-8"> <title> คอนโทรลเลอร์ </title> <style type = "text/css"> .ng-cloak {display: ไม่มี; } </style> </head> <body> <div ng-controller = "controllera"> สวัสดี {{name}}! <ปุ่ม ng-click = "doit ()"> doit !! </button> </div> <script src = "../ angular-1.0.1.js" type = "text/javascript"> </script> <script type = "text/javascript"> ฟังก์ชันควบคุม ($ scope) $ scope.doit = function () {$ scope.name = "หล่อ"; - } </script> </body> </html>คอนโทรลเลอร์คือรหัสที่อยู่เบื้องหลังมุมมอง (-_-!) ความรับผิดชอบของมันคือการสร้างแบบจำลองและผลักดันมันเข้าไปในมุมมองผ่านฟังก์ชั่นการโทรกลับ มุมมองคือแผนที่ขอบเขตปัจจุบันไปยังแผนที่ (HTML) แผนที่ (แปลแทบเล็กน้อย ... ) ขอบเขตคือลิงก์ที่นำโมเดลไปยังมุมมองและส่งเหตุการณ์ไปยังคอนโทรลเลอร์
สิ่งสำคัญคือต้องแยกคอนโทรลเลอร์ออกจากมุมมองเพราะ:
1. ตัวควบคุมเขียนด้วย JavaScript JavaScript เป็นสิ่งจำเป็น คำสั่งที่สำคัญเป็นวิธีที่ดีในการอธิบายพฤติกรรมของแอปพลิเคชัน คอนโทรลเลอร์ไม่ควรมีข้อมูลการแสดงผลใด ๆ (ตรรกะ) (การอ้างอิง DOM หรือชิ้นส่วน HTML)
2. ดูเทมเพลตดูใน HTML HTML มีการประกาศ ประกาศ (HTML) เป็นวิธีที่ดีในการอธิบาย UI มุมมองไม่ควรมีพฤติกรรมใด ๆ
3. เนื่องจากคอนโทรลเลอร์ไม่ทราบว่าต้องดูแบบใดที่ต้องสอดคล้องกับคอนโทรลเลอร์สามารถ (ทางอ้อม) ใช้หลายมุมมอง สิ่งนี้มีความสำคัญสำหรับการเล่นซ้ำ (แทนที่สกิน?) มุมมองเฉพาะอุปกรณ์อื่น ๆ (เช่นโทรศัพท์มือถือและเดสก์ท็อป) และความสามารถในการวัดรหัส
6. รุ่น
โมเดลสามารถเข้าใจได้ว่าเป็นวัตถุข้อมูล มันถูกใช้เป็นการผสมผสานกับเทมเพลตเพื่อสร้างมุมมอง เพื่อที่จะเขียนโมเดลลงในมุมมองโมเดลจะต้องอ้างอิงตามขอบเขต ซึ่งแตกต่างจากเฟรมเวิร์กอื่น ๆ อีกมากมาย Angular ไม่มีข้อ จำกัด หรือข้อกำหนดเกี่ยวกับโมเดล ไม่จำเป็นต้องเพิ่มคลาสเพิ่มเติมและคุณไม่จำเป็นต้องเข้าถึงหรือเปลี่ยนโมเดลด้วยวิธีการพิเศษ ประเภทข้อมูลของโมเดลอาจเป็นประเภทดั้งเดิม (สตริง, ตัวเลข ... ), วัตถุคีย์-ค่า ({a: 1, b: 2}) หรือฟังก์ชัน (ฟังก์ชัน () {…}) เพื่อให้ง่ายขึ้นโมเดลเชิงมุมจะต้องเป็นวัตถุจาวาสคริปต์ปกติ
7. ดู
มุมมองคือสิ่งที่ผู้ใช้สามารถมองเห็นได้ มุมมองเกิดในเทมเพลต มันรวมกับโมเดลและในที่สุดก็ทำให้มันเป็นเบราว์เซอร์ DOM Angular ใช้วิธีที่แตกต่างกันมากในการนำเสนอมุมมองสำหรับระบบแม่แบบอื่น ๆ อีกมากมาย
เครื่องยนต์เทมเพลตอื่น ๆ : เครื่องยนต์เทมเพลตจำนวนมากถูกนำมาใช้โดยการสร้างสตริง HTML ด้วยแท็กพิเศษ โดยปกติแล้วแท็กเทมเพลตเหล่านี้จะทำลายไวยากรณ์ HTML ซึ่งหมายความว่ารหัสไม่สามารถแก้ไขได้ผ่านตัวแก้ไข HTML ทั่วไป (นี่คือ ... ) สตริงเทมเพลตจะถูกส่งผ่านไปยังเอ็นจิ้นเทมเพลตและรวมเข้ากับข้อมูล ในที่สุดก็สร้างสตริง HTML สตริงเหล่านี้โดยทั่วไปจะเขียนไปยัง DOM ใน. innerhtml ทำให้เบราว์เซอร์แสดงเนื้อหาเทมเพลต กระบวนการนี้จะต้องทำซ้ำซ้ำแล้วซ้ำอีกเมื่อข้อมูลเปลี่ยนแปลง ความละเอียดของเทมเพลตสอดคล้องกับความละเอียดของการอัปเดต DOM กุญแจสำคัญของเมล็ดนี้คือระบบแม่แบบประมวลผลสตริง
Angular: ความแตกต่างระหว่างเทมเพลตเชิงมุมคือมันเป็นอิงตาม DOM มากกว่าที่ใช้สตริง เทมเพลตยังคงต้องเขียนสตริงลงใน HTML แต่ก็ยังคงเป็น HTML (ไม่ใช่โดยการฝังเทมเพลตไว้ข้างใน) เบราว์เซอร์แปลง HTML เป็น DOM จากนั้น DOM จะกลายเป็นอินพุตของคอมไพเลอร์ (เอ็นจิ้นเทมเพลตของ Angular) คอมไพเลอร์ค้นหาคำสั่งและตั้งค่านาฬิกาในโมเดลในทางกลับกัน ผลลัพธ์คือมุมมองที่ได้รับการอัปเดตตลอดเวลาและไม่จำเป็นต้องติดตั้งโมเดลและเทมเพลตอีกครั้ง แบบจำลองกลายเป็นแหล่งเดียวของความจริงสำหรับมุมมอง
8. คำสั่ง
Directive เป็นพฤติกรรม (ตัวอย่างเช่นในตัวอย่างของบทความก่อนหน้า "ซ่อนและค้นหา") หรือการแปลง DOM (แท็กที่กำหนดเองที่มีชุดของ DOMs) และวางชื่อไว้ในแอตทริบิวต์ชื่อแท็กและชื่อคลาสสามารถเรียกคำสั่งได้ Directive ช่วยให้คุณสามารถขยายแท็ก HTML ในลักษณะที่ประกาศ
ยังมีคำถามบางอย่างในตัวอย่างต่อไปนี้ นั่นคือวิธีที่ $ render ทริกเกอร์ @_ @
<! doctype html> <html lang = "zh-cn" ng-app = "mydirective"> <head> <meta charset = "utf-8"> <title> directive </title> <style type = "css"> .ng-cloak {display: ไม่มี; } </style> </head> <body ng-controller = "myctrl"> <div ng-model = "content" contenteditable = "true"> dada ตัวน้อยของฉัน </div> <pre> modelValue = {{content}} </pre> <button ng-click = "Reset () src = "../ angular-1.0.1.js" type = "text/javascript"> </script> <script type = "text/javascript"> angular.module ("mydirective", []) {ngmodel. $ setViewValue (Element.Text ()); setVal ();}}}). controller ("myctrl", ฟังก์ชัน ($ scope) {$ scope.reset = function () {$ scope.content = "My Little Dada";};9. ตัวกรอง
ตัวกรองมีบทบาทในการแปลงข้อมูล (การจัดรูปแบบ) โดยปกติแล้วพวกเขาจะเกี่ยวข้องกับภูมิภาคและภูมิภาคต่าง ๆ อาจมีรูปแบบการส่งออกที่แตกต่างกัน พวกเขากำลังติดตามจิตวิญญาณของตัวกรอง Unix ที่มีไวยากรณ์ที่คล้ายกัน: | (ท่อ)
<! doctype html> <html lang = "zh-cn" ng-app> <head> <meta charset = "utf-8"> <title> ตัวกรอง </title> <style type = "text/css"> .ng-cloak {display: ไม่มี; } </style> </head> <body> <div ng -init = "list = ['baidu b', 'sogou s', '360', '3SB']"> การจัดรูปแบบตัวเลข: 1233211234567 -> {{1233211234567 ng-model = "myFilterText" type = "text"/> <br/> {{list | filter: myFilterText | json}} <br/> </div> <script src = "../ angular-1.0.1.js" type = "text/javascript"> </script>10. โมดูลและหัวฉีด
หัวฉีดเป็นตัวระบุตำแหน่ง แต่ละแอปพลิเคชันเชิงมุมจะมีหัวฉีดแยกต่างหาก หัวฉีดให้วิธีการค้นหาอินสแตนซ์วัตถุตามชื่อ หัวฉีดจะเก็บอินสแตนซ์วัตถุทั้งหมดไว้ในแคชภายในดังนั้นเมื่อมีการเรียกชื่อเดียวกันซ้ำ ๆ อินสแตนซ์ของวัตถุเดียวกันจะถูกส่งคืน หากวัตถุไม่มีอยู่จะขออินสแตนซ์โรงงานเพื่อสร้างอินสแตนซ์ใหม่
โมดูลเป็นวิธีการกำหนดค่าอินสแตนซ์โรงงานของหัวฉีดที่เรียกว่า "ผู้ให้บริการ"
// สร้างโมดูล var mymodule = angular.module ('mymodule', []) // กำหนดค่าตัวฉีด mymodule.factory ('servicea', ฟังก์ชั่น () {return {// แทน {} วางวัตถุของคุณที่นี่};}); // สร้างหัวฉีดและกำหนดค่าจาก 'mymodule' var $ injector = angular.injector ('mymodule'); // ดึงวัตถุจากหัวฉีดโดยชื่อ var servicea = $ injector.get ('servicea'); // เป็นจริงเสมอเพราะอินสแตนซ์แคช $ injector.get ('ServiceA') === $ injector.get ('ServiceA'); // จริงแต่ X เจ๋งจริงของหัวฉีดคือมันสามารถใช้ในการเรียกวิธีการและประเภท "อินสแตนซ์" คุณสมบัติที่ยอดเยี่ยมนี้คือการอนุญาตให้ใช้วิธีและประเภทในการขอทรัพยากรที่พวกเขาพึ่งพาแทนที่จะค้นหาพวกเขา
// คุณเขียนฟังก์ชั่นเช่นนี้ ฟังก์ชั่น dosomething (servicea, serviceb) {// ทำอะไรบางอย่างที่นี่ } // Angular จัดเตรียมหัวฉีดสำหรับแอปพลิเคชันของคุณ var $ injector = ... ; - - - - เรียกฟังก์ชั่น dosomething (servicea, serviceb); // ข้างต้นเป็นวิธีเก่าแบบดั้งเดิม ~ ต่อไปนี้เป็นวิธีการพูดคุยเชิงมุมเกี่ยวกับวัวของตัวเอง X ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////Eas/Ef/////////////////////////// - วิธีที่ยอดเยี่ยมในการได้รับการพึ่งพา // $ หัวฉีดจะส่งอาร์กิวเมนต์ไปยังฟังก์ชั่นโดยอัตโนมัติ $ injector.invoke (dosomething); // นี่คือวิธีที่เฟรมเวิร์กเรียกฟังก์ชั่นของคุณโปรดทราบว่าสิ่งเดียวที่เราต้องเขียนคือฟังก์ชั่นของเราและเราสามารถแสดงรายการทรัพยากรที่วิธีการขึ้นอยู่กับในอาร์กิวเมนต์ของฟังก์ชั่น! เมื่อฟังก์ชั่นการโทรเชิงมุมมันจะใช้วิธี "การโทร" เพื่อเติมเต็มฟังก์ชั่น agruments โดยอัตโนมัติ
โปรดทราบว่าการพึ่งพามีการระบุไว้ในตัวสร้างในตัวอย่างด้านล่าง เมื่อ NG-controller อินสแตนซ์คอนโทรลเลอร์ทรัพยากรการพึ่งพาจะถูกจัดเตรียมโดยอัตโนมัติ ไม่จำเป็นต้องสร้างค้นหาหรือสร้างการอ้างอิงหัวฉีดเพื่อโหลดทรัพยากรการพึ่งพา
<! doctype html> <html lang = "zh-cn" ng-app = "timeExample"> <head> <meta charset = "utf-8"> <title> หัวฉีด </title> <style type = "css"> .ng-cloak {display: ไม่มี; } </style> </head> <body> <div ng-controller = "clockctrl"> เวลาปัจจุบันคือ: {{time.now}} </div> <script src = "../ angular-1.0.1.js" type = "javascript"> </script> []). Factory ("MyClock", ฟังก์ชั่น ($ TIMEOUT) {var time = {}; (ฟังก์ชั่นติ๊ก () {time.now = วันที่ใหม่ (). toString (); $ หมดเวลา (ติ๊ก, 1000);}) (); เวลากลับ;}); /** * * @param $ scope * @param myClock การพึ่งพา myClock ถูกแทรกโดยอัตโนมัติที่นี่! - * @Constructor */ ฟังก์ชั่นนาฬิกา ctrl ($ scope, myClock) {$ scope.time = myClock; } </script> </body> </html>11. เนมสเปซเชิงมุม
เพื่อป้องกันความขัดแย้งของชื่อ Angular จะเพิ่มคำนำหน้า $ ลงในชื่อของวัตถุ โปรดอย่าใช้คำนำหน้า $ ในรหัสของคุณเพื่อหลีกเลี่ยงความขัดแย้ง -
ข้างต้นคือข้อมูลเกี่ยวกับแนวคิด AngularJS เราจะยังคงเพิ่มบทความที่เกี่ยวข้องในอนาคต ขอบคุณสำหรับการสนับสนุนเว็บไซต์นี้!