AngularJS มีคุณสมบัติสำคัญหลายประการเช่น:
1 MVC
2 โมดูลาร์
3 ระบบคำสั่ง
4 การเชื่อมโยงข้อมูลสองทาง
ลองมาดูการแยกส่วนของ AngularJs
ก่อนอื่นมาพูดกันว่าทำไมคุณต้องใช้โมดูลาร์:
1 เพิ่มความสามารถในการนำโมดูลกลับมาใช้ใหม่
2. กำหนดโมดูลเพื่อรับรู้การปรับแต่งของคำสั่งโหลด
3 ในการทดสอบหน่วยทุกอย่างไม่จำเป็นต้องโหลด
ในตัวอย่างก่อนหน้านี้รหัสของคอนโทรลเลอร์จะถูกเขียนโดยตรงในแท็กสคริปต์เพื่อให้ฟังก์ชั่นที่ประกาศเป็นทั่วโลกซึ่งไม่ใช่ตัวเลือกที่ดีที่สุด
มาดูกันว่าจะทำอย่างไรเป็นโมดูล:
<script type = "text/javascript"> var myAppModule = angular.module ('myapp', []); MyAppModule.filter ('ทดสอบ', ฟังก์ชัน () {ฟังก์ชั่น return (ชื่อ) {return 'hello,'+name+'!';};}); MyAppModule.Controller ('myAppCtrl', ['$ scope', ฟังก์ชั่น ($ scope) {$ scope.name = 'Xingoo';}]); </script>ขั้นแรกให้สร้างโมดูล MyAppModule ผ่านเชิงมุมตัวแปรทั่วโลก
Angular.module ('MyApp', []);
พารามิเตอร์แรกคือชื่อแอพพลิเคชั่นแอปพลิเคชันที่ถูกผูกไว้ซึ่งระบุจุดเข้าของเชิงมุมในหน้าคล้ายกับฟังก์ชั่นของฟังก์ชันหลัก
พารามิเตอร์ที่สอง [] ระบุโมดูลที่ขึ้นอยู่กับ
มาดูวิธีใช้โมดูล!
<! doctype html> <html ng-app = "myapp"> <head> <meta http-equiv = "content-type" content = "text /html; charset = utf-8" /> <สคริปต์ src = "http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"> </script> </head> <body> <div ng-controller = "myAppCtrl"> {{ชื่อ | ทดสอบ}} </div> <script type = "text/javascript"> var myappmodule = angular.module ('myapp', []); MyAppModule.filter ('ทดสอบ', ฟังก์ชัน () {ฟังก์ชั่น return (ชื่อ) {return 'hello,'+name+'!';};}); MyAppModule.Controller ('myAppCtrl', ['$ scope', ฟังก์ชั่น ($ scope) {$ scope.name = 'Xingoo';}]); </script> </body> </html>เพียงผูก MyApp กับ NG-APP และไม่เป็นไร
ในสคริปต์เราสร้างตัวกรองและคอนโทรลเลอร์ผ่านโมดูล
วัตถุประสงค์ของตัวกรองคือการเพิ่มการปรับเปลี่ยนสตริง
ฟังก์ชั่นของคอนโทรลเลอร์คือการเริ่มต้นตัวแปร
ผลการทำงานของโปรแกรมมีดังนี้:
ข้างต้นคือการเรียงลำดับข้อมูลแบบแยกส่วนของ AngularJs เราจะยังคงเพิ่มข้อมูลที่เกี่ยวข้องในอนาคต ขอบคุณสำหรับการสนับสนุนเว็บไซต์นี้!