แอปพลิเคชัน AngularJS ส่วนใหญ่อาศัยตัวควบคุมเพื่อควบคุมการไหลของข้อมูลในแอปพลิเคชัน คอนโทรลเลอร์ถูกกำหนดโดยใช้คำสั่ง NG-Controller คอนโทรลเลอร์เป็นฟังก์ชั่นที่มีคุณสมบัติ/คุณสมบัติและวัตถุจาวาสคริปต์ คอนโทรลเลอร์แต่ละตัวยอมรับพารามิเตอร์ $ SCOPE เพื่อระบุแอปพลิเคชัน/โมดูลซึ่งควบคุมโดยคอนโทรลเลอร์
<div ng-app = "" ng-controller = "StudentController"> ... </div>
ที่นี่เราได้ประกาศตัวควบคุม StudentController ที่ใช้ NG-Controller Directive เป็นขั้นตอนต่อไปเราจะกำหนด StudentController ดังนี้
<script> function studentController ($ scope) {$ scope.student = {firstName: "yiibai", นามสกุล: "com", fullName: function () {var studentObject; studentObject = $ scope.student; ส่งคืน StudentObject.firstName + "" + studentObject.lastName; }};} </script>StudentController กำหนด $ SCOPE เป็นพารามิเตอร์วัตถุ JavaScript
$ SCOPE แสดงถึงแอปพลิเคชันโดยใช้วัตถุ StudentController
$ scope.student เป็นทรัพย์สินของวัตถุ StudentController
FIRSTNAME และ LENTNAME เป็นคุณสมบัติสองประการของ $ SCOPE.STUDENT OBJECT เราผ่านค่าเริ่มต้นไปยังพวกเขา
FullName เป็นฟังก์ชั่นของวัตถุ $ scope.student และงานของมันคือการส่งคืนชื่อที่ผสาน
ในฟังก์ชั่น FullName ตอนนี้เราต้องการให้วัตถุนักเรียนส่งคืนชื่อของชุดค่าผสม
เป็นภาพประกอบมันเป็นไปได้ที่จะกำหนดวัตถุคอนโทรลเลอร์ในไฟล์ JS แยกต่างหากและใส่หน้า HTML ในไฟล์
ตอนนี้คุณสามารถใช้ NG-Model หรือใช้นิพจน์ดังต่อไปนี้เพื่อใช้คุณสมบัติของ StudentController
ป้อนชื่อแรก: <อินพุต type = "text" ng-model = "student.firstname"> <br> ป้อนชื่อสุดท้าย: <อินพุต type = "text" ng-model = "student.lastname"> <br> <br>
ตอนนี้มีสองกล่องอินพุต: นักเรียนชื่อ FirstName และ Student.lastName
ตอนนี้มีนักเรียนเพิ่มวิธีการ () ที่เพิ่มลงใน HTML
ตอนนี้เพียงแค่ป้อนชื่อและนามสกุลนามสกุลเพื่อป้อนสิ่งที่ต้องป้อนและคุณจะเห็นว่าชื่อทั้งสองได้รับการอัปเดตโดยอัตโนมัติ
ตัวอย่าง
ตัวอย่างต่อไปนี้จะแสดงการใช้คอนโทรลเลอร์
เนื้อหาของไฟล์ testangularjs.html มีดังนี้:
<html> <head> <title> ตัวควบคุม Angular JS </title> </head> <body> <h2> แอปพลิเคชันตัวอย่าง AngularJs </h2> <div ng-app = "" ng-controller = "studentcontroller"> ป้อนชื่อ: <อินพุต type = "ข้อความ" ng-model = " ng-model = "student.lastname"> <br> <br> คุณกำลังเข้าสู่: {{student.fullName ()}} </div> </script> function studentController ($ scope) {$ scope.student = {firstName: "Mahesh", LastName: "Parashar" studentObject = $ scope.student; ส่งคืน StudentObject.firstName + "" + studentObject.lastName; }};} </script> <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"> </script> </body> </html>เอาท์พุท
เปิด textangularjs.html ในเว็บเบราว์เซอร์และดูผลลัพธ์ต่อไปนี้:
ข้างต้นคือข้อมูลที่แยกตัวควบคุม AngularJS เราจะยังคงแยกแยะความรู้ที่เกี่ยวข้องในอนาคต ขอบคุณสำหรับการสนับสนุนเว็บไซต์นี้