สำหรับผู้ใช้ทั่วไป NG-APP ของ AngularJS นั้นถูกผูกไว้กับองค์ประกอบ DOM ด้วยตนเอง อย่างไรก็ตามในบางแอปพลิเคชันดูเหมือนว่าไม่สะดวก
การเริ่มต้นที่มีผลผูกพัน
การเริ่มต้นเชิงมุมผ่านการเชื่อมโยงจะบุกรุกรหัส JS เข้าสู่ HTML แต่ก็ยังเพียงพอที่จะใช้มือใหม่!
<html> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <script src = "http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.js ng-controller = "myctrl"> {{hello}} </div> <script type = "text/javascript"> var mymodule = angular.module ("myapp", []); mymodule.controller ("myctrl", ฟังก์ชั่น ($ scope) {$ scope.hello = "สวัสดี, Angular!";}); </script> </body> </html>หลังจากทำงานแล้วสวัสดี Angular จะปรากฏขึ้น!
การเริ่มต้นด้วยตนเอง
Angular ยังให้ API ที่ถูกผูกไว้ด้วยตนเอง - bootstrap ซึ่งใช้ดังนี้:
Angular.bootstrap (องค์ประกอบ, [โมดูล], [config]);
องค์ประกอบพารามิเตอร์แรก: เป็นองค์ประกอบ DOM ที่ผูก NG-APP;
โมดูล: ชื่อโมดูลที่ถูกผูกไว้
กำหนดค่า: การกำหนดค่าเพิ่มเติม
ดูรหัสสั้น ๆ :
<html> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <script src = "http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js" ng-controller = "myctrl"> {{hello}} </div> <script type = "text/javascript"> var app = angular.module ("bootstraptest", []); app.controller ("myctrl", ฟังก์ชั่น ($ scope) {$ scope.hello = "สวัสดี, Angular จาก bootstrap";}); // angular.bootstrap (document.getElementById ("body"), ['bootstraptest']); Angular.bootstrap (เอกสาร, ['bootstertest']); </script> </body> </html>เป็นที่น่าสังเกต:
Angular.Bootstrap จะผูกวัตถุที่โหลดครั้งแรกเท่านั้น
การเชื่อมโยงซ้ำหรือวัตถุอื่น ๆ ที่ตามมาจะแจ้งข้อผิดพลาดในการส่งออกบนคอนโซล
ข้างต้นคือข้อมูลการแยก AngularJS bootstrap เราจะยังคงเพิ่มข้อมูลที่เกี่ยวข้องในอนาคต ขอบคุณสำหรับการสนับสนุนเว็บไซต์นี้!