บทความแรกของชุดบันทึกการศึกษา AngularJS ฉันหวังว่าฉันจะเขียนได้ต่อไป เนื้อหาของบทความนี้ส่วนใหญ่มาจากเนื้อหาของ http://docs.angularjs.org/guide/ เอกสาร แต่ยังเพิ่มความเข้าใจและผลลัพธ์ของคุณเอง
1. สรุป
บทความนี้อธิบายกระบวนการเริ่มต้นเชิงมุมและวิธีการเริ่มต้นเชิงมุมด้วยตนเองเมื่อคุณต้องการ
2. แท็ก Angular <Script>
ตัวอย่างนี้ใช้เพื่อแสดงวิธีการรวมเชิงมุมผ่านเส้นทางที่แนะนำเพื่อให้ได้การเริ่มต้นอัตโนมัติ
<! doctype html> <html xmlns: ng = "http://angularjs.org" ng-app> <body> ... <script src = "angular.js"> </body> </html>
วางแท็ก SCIPRT ที่ด้านล่างของหน้า สิ่งนี้สามารถป้องกันการโหลด HTML โดยการโหลด Angular.js ซึ่งจะช่วยลดเวลาในการโหลดของแอปพลิเคชัน เราสามารถรับ AngularJS เวอร์ชันล่าสุดใน http://code.angularjs.org ด้วยเหตุผลด้านความปลอดภัยอย่าอ้างถึงที่อยู่นี้โดยตรงในผลิตภัณฑ์เพื่อโหลดสคริปต์ แต่ถ้ามันเป็นเพียงการวิจัยและการเรียนรู้มันไม่สำคัญว่าจะเป็นการเชื่อมต่อโดยตรงหรือไม่
เลือก: Angular- [เวอร์ชัน] .js เป็นรุ่นที่สะดวกในการอ่านและเหมาะสำหรับการพัฒนาและการดีบักทุกวัน
เลือก: Angular- [เวอร์ชัน] .min.js เป็นเวอร์ชันที่บีบอัดและงงงวยซึ่งเหมาะสำหรับใช้ในผลิตภัณฑ์ขั้นสุดท้าย
วาง "NG-APP" ลงในโหนดรูทของแอปพลิเคชัน หากคุณต้องการให้ Angular เริ่มแอปพลิเคชันโดยอัตโนมัติคุณสามารถวางไว้ในแท็ก <html>
<html ng-app>
หากเราต้องการใช้ไวยากรณ์คำสั่งแบบโรงเรียนเก่า "NG:" เราต้องเพิ่ม XML-namespace ลงในแท็ก HTML เพื่อ "โปรด" IE (นี่เป็นเหตุผลทางประวัติศาสตร์และเราไม่แนะนำให้ใช้ NG :)
<html xmlns: ng = "http://angularjs.org">
3. การเริ่มต้นอัตโนมัติ
Angular จะเริ่มต้นโดยอัตโนมัติในเหตุการณ์ domcontentloaded และ Angular จะพบโหนดรูทของแอปพลิเคชันที่คุณระบุผ่านคำสั่ง NG-APP หากพบว่า Angular จะทำสิ่งต่อไปนี้:
โหลดคำสั่งที่เกี่ยวข้องกับโมดูล
สร้างหัวฉีดที่เกี่ยวข้องกับแอปพลิเคชัน (ตัวจัดการการพึ่งพา)
ระบุโหนดรูทด้วย NG-APP และเริ่มงาน "รวบรวม" ที่เกี่ยวข้องของ DOM กล่าวอีกนัยหนึ่งสามารถใช้ส่วนหนึ่งของหน้า (ไม่ใช่ <Html>) เป็นโหนดรูทซึ่งจะ จำกัด ขอบเขตของเชิงมุม
<! doctype html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <title> bootstrap-auto </title> <style type = "css"> .ng-cloak {แสดง: ไม่มี; } </style> </head> <body> นี่คือด้านนอกของ ng-app ~~ {{1+2}} <div ng-app> นี่คือด้านในของ ng-app ~~~ {{1+3*2}} </div>หมายเหตุ: "ng-cloak" ในนั้นถูกใช้ก่อนการรวบรวม angular.js เสร็จสมบูรณ์ (ใช่! ถูกต้องแล้ว! ก่อนที่การรวบรวมจะเสร็จสมบูรณ์ไม่ใช่ก่อนที่ AngularJS จะโหลดดังนั้นหากคุณต้องการหลีกเลี่ยงสถานการณ์ที่ดีที่สุด class = วิธีการ "NG-CLOAK"
4. การเริ่มต้นด้วยตนเอง
หากเราต้องการควบคุมกระบวนการเริ่มต้นเพิ่มเติม (ตัวอย่างเช่นคุณต้องโหลด Angular.js ผ่านตัวโหลดสคริปต์หรือทำการดำเนินการบางอย่างก่อนหน้าการรวบรวมเชิงมุม) จากนั้นเราสามารถใช้วิธีการเริ่มต้นที่เรียกว่าด้วยตนเองแทน
ตัวอย่างต่อไปนี้เทียบเท่ากับการใช้ NG-APP, Directive:
<! doctype html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <title> bootstrap-manual </title> <style type = "css"> .ng-cloak {display: ไม่มี; } </style> </head> <body> นี่คือด้านนอกของ ng-app ~~ {{1+2}} <div id = "rootofapp"> นี่คือด้านในของ ng-app ~~~ {{1+3*2}} </div> type = "text/javascript"> angular.element (เอกสาร) .ready (function () {angular.bootstrap (angular.element (document.getElementById ("rootofapp")));}); </script> </body> </html>นั่นคือรหัสของเราสามารถเขียนได้ในขั้นตอนต่อไปนี้:
1. หลังจากโหลดหน้าและรหัสอื่น ๆ ให้ค้นหาโหนดรูทของเทมเพลตแอปพลิเคชัน
2. เรียก Angular.bootstrap และปล่อยให้ Angular รวบรวมเทมเพลตลงในแอปพลิเคชันการเชื่อมโยงแบบสองทาง!
เราจะยังคงเพิ่มบทความที่เกี่ยวข้องในอนาคต ขอบคุณสำหรับการสนับสนุนเว็บไซต์นี้!
บทความที่เกี่ยวข้อง:
AngularJS Bootstrap ติดตั้งเฟรมเวิร์กส่วนหน้า - ส่วนควบคุม JS
AngularJS Bootstrap ติดตั้งเฟรมเวิร์กส่วนหน้า - หน้าพื้นฐาน
AngularJS Bootstrap มาพร้อมกับกรอบส่วนหน้า - งานเตรียมการ
AngularJS Bootstrap คำอธิบายโดยละเอียดและรหัสตัวอย่าง