การใช้ Controllers ใน AngularJS

Controller คือส่วนควบคุมการไหลของข้อมูลในระบบของ Angularjs ซึ่งหากต้องการใช้ Controller เราต้องประกาศ Controller ไว้ใน ng-controller directive และต้องสร้าง Javascript ฟังก์ชั่นที่มีชื่อเดียวกันกับ ng-controller directive โดยฟังก์ชั่นนั้นจะต้องมี attributes/properties  และต่ละ Controller ต้องมี $scope เป็นพารามิเตอร์เพื่ออ้างอิงถึง application/module ที่ Controller นั้นๆควบคุมอยู่

...

จากโคดด้านบนเราได้ทำการประกาศ Controller ใน ng-controller directive ชื่อว่า studentController ต่อไปเราจะสร้างฟังก์ชั่นที่มีชื่อเดียวกันดังต่อไปนี้

• จากด้านบนเราได้ประกาศ  studentController ที่เป็น Javascript Function โดยมี $scope เป็นพารามิเตอร์ของฟังก์ชั่นและนำหน้าตามด้วยชื่อตัวแปร 
• ตัว $scope จะอ้างอิงถึง Angularjs application ดังนั้นตัว $scope สามารถเข้าถึงและจัดการ ng-model directive  ภายใต้ Controller นั้นได้ทุกตัว
• นอกจากจัดการ ng-model directive  ภายใต้ Controller นั้นๆแล้วยังสามารถสร้างตัวแปรอื่นที่ไม่เกี่ยวข้องกับ ng-model directive  ได้อีกด้วย เช่นตัวแปร fullName

หากต้องการแสดงข้อมูลจากตัวแปรใน studentController ให้ใช้ ng-bind directive  หรือเครื่องหมาย {{...}} ก็ได้ ดังโคดข้างล่าง

You are entering: {{student.fullName()}}

ตัวอย่างการใช้งาน

AngularJS Sample Application

Enter first name: 

Enter last name: 

You are entering: {{student.fullName()}}

ผลลัพธ์

About Nop

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.