AngularJS Chapter 2: การเขียน AngularJS เบื้องต้น

ก่อนอื่นมาจินตนการกันก่อน

AngularJS นั้นจะแบ่งการจัดการหน้าเพจออกเป็น module ภายใน module จะประกอบไปด้วย controller ย่อยๆ ให้จำภาพนี้ไว้ในใจ

ในเพจหนึ่งๆ เราจะแยกออกเป็นหลาย module ก็ได้ หรือจะใช้แค่ module เดียวก็ได้ ถามว่าอย่างไหนดีกว่า เท่าที่ผมเห็น เขาจะใช้ module เดียวซะมากกว่า

ดูตัวอย่างโค้ด hello world

ตอนแรก include angular เข้ามาก่อน

จากนั้นสร้าง module ใน module ก็สร้าง controller

ต่อจากนั้นเอา controller ไปผูกเข้ากับ view

ng-app ผูกเข้ากับ module เราได้สร้าง module ชื่อ application ไว้

ng-controller ผูกเข้ากับ controller เราสร้าง greetingController

{{ greeting }} แสดงค่าจาก $scope.greeting

ใน AngularJS นั้นจะนำหน้าตัวแปรหรือฟังก์ชั่นด้วย $scope เพื่อเป็นการกำหนดขอบเขตการใช้งานตัวแปร

ดูนี่จะเห็นว่ามีการส่ง $scope เป็นพารามิเตอร์เข้าไปในฟังก์ชั่น ท่านอาจจะสงสัยว่า $scope มันมาจากไหน $scope เป็นออบเจ็กติดมากับ Angular ครับ เราเอา $scope นี้ไปนำหน้าตัวแปรหรือฟังก์ชั่น

มันจะไปมีผลกับ greetingController

ดูโค้ดตรงนี้

ng-controller มันผูกเข้ากับ <div> ใช่มั้ยครับ และ <div> นี้ก็จะมี </div> ปิด นี่แหละขอบเขตของ greetingController ทีนี้ $scope.greeting ถูกประกาศไว้ใน greetingController เพราะฉะนั้นตัวแปร greeting จะใช้ได้ภายใต้ <div></div> นี้เท่านั้น

ถ้าท่านลองเอา {{ greeting }} ไปอยู่นอก <div> ผลที่จะแสดงออกมาก็เป็นคำว่า {{greeting}} จะไม่ถูกแปลไปเป็นคำว่า Hello World