คอนโทรลเลอร์ AngularJS
คอนโทรลเลอร์ AngularJS ควบคุมข้อมูลจากแอปพลิเคชัน AngularJS
คอนโทรลเลอร์ AngularJS เป็นวัตถุ JavaScript ปกติ
คอนโทรลเลอร์ AngularJS
แอปพลิเคชัน AngularJS ถูกควบคุมโดยคอนโทรลเลอร์
NG-Controller Directive กำหนดตัวควบคุมแอปพลิเคชัน
คอนโทรลเลอร์เป็นวัตถุ JavaScript ที่สร้างขึ้นโดยตัวสร้างของวัตถุ JavaScript มาตรฐาน
อินสแตนซ์ Angularjs
<! doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js" ng-controller = "personctrl"> ชื่อ: <อินพุต type = "text" ng-model = "firstName"> <br> ชื่อ: {{fullName ()}} </div> <script> var app = angular.module ('myApp', []); app.controller $ scope.lastname = "doe";ผลการทำงาน:
ชื่อ:
นามสกุล:
ชื่อ: John Doe
แอปพลิเคชัน AngularJS ถูกกำหนดโดย NG-APP แอปพลิเคชันทำงานภายใน <div>
คุณสมบัติ ng-controller = "myctrl" เป็นคำสั่ง AngularJS ใช้เพื่อกำหนดคอนโทรลเลอร์
ฟังก์ชั่น MyCtrl เป็นฟังก์ชัน JavaScript
AngularJS ใช้วัตถุ $ scope เพื่อเรียกคอนโทรลเลอร์
ใน AngularJS, $ SCOPE เป็นวัตถุแอปพลิเคชัน (เป็นของตัวแปรแอปพลิเคชันและฟังก์ชั่น)
ขอบเขต $ ของคอนโทรลเลอร์ (เทียบเท่ากับขอบเขตและขอบเขตการควบคุม) ใช้เพื่อบันทึกวัตถุโมเดล AngularJS
คอนโทรลเลอร์สร้างคุณสมบัติสองคุณสมบัติ (ชื่อและนามสกุล) ในขอบเขต
คำสั่ง NG-Model เชื่อมโยงโดเมนอินพุตกับคุณสมบัติของคอนโทรลเลอร์ (ชื่อ FirstName และนามสกุล)
วิธีการควบคุม
ตัวอย่างข้างต้นแสดงวัตถุคอนโทรลเลอร์ที่มีคุณสมบัติสองประการ: ชื่อนามสกุลและชื่อแรก
คอนโทรลเลอร์ยังสามารถมีวิธีการ (ตัวแปรและฟังก์ชั่น):
อินสแตนซ์ Angularjs
<! doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js" ng-controller = "personctrl"> ชื่อ: <อินพุต type = "text" ng-model = "firstName"> <br> ชื่อ: {{fullName ()}} </div> <script> var app = angular.module ('myApp', []); app.controller $ scope.lastname = "doe";เอฟเฟกต์การทำงาน:
ชื่อ:
นามสกุล:
ชื่อ: John Doe
ตัวควบคุมในไฟล์ภายนอก
ในแอปพลิเคชันขนาดใหญ่คอนโทรลเลอร์มักจะถูกเก็บไว้ในไฟล์ภายนอก
เพียงคัดลอกรหัสในแท็ก <script> ไปยังไฟล์ภายนอกชื่อ PersonController.js:
อินสแตนซ์ Angularjs
<! doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js" ng-controller = "personctrl"> ชื่อ: <อินพุต type = "text" ng-model = "firstName"> <br> ชื่อ: <อินพุต type = "text" ng-model = "LastName"> <br> <br> ชื่อ: {{firstName + "" src = "personcontroller.js"> </script> </body> </html>ผลการทำงาน:
ชื่อ:
นามสกุล:
ชื่อ: John Doe
ตัวอย่างอื่น ๆ
ตัวอย่างต่อไปนี้สร้างไฟล์คอนโทรลเลอร์ใหม่:
Angular.module ('myapp', []). คอนโทรลเลอร์ ('namesctrl', ฟังก์ชั่น ($ scope) {$ scope.names = [{ชื่อ: 'Jani', ประเทศ: 'นอร์เวย์'}, {ชื่อ: 'Hege', ประเทศ:บันทึกไฟล์เป็น namescontroller.js:
จากนั้นใช้ไฟล์คอนโทรลเลอร์ในแอปพลิเคชัน:
อินสแตนซ์ Angularjs
<! doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js" ng-controller = "namesctrl"> <ul> <li ng-repeat = "x ในชื่อ"> {{x.name + ',' + x.country}} </li>เอฟเฟกต์การทำงาน:
ข้างต้นคือการรวบรวมข้อมูลคอนโทรลเลอร์ AngularJS และจะเสริมในภายหลัง