AngularJS Chapter 1: Introduction
Angularjs เป็นจาวาสคริปต์ไลบรารี่ตัวหนึ่งที่ไว้สำหรับจัดการกับหน้าเว็บเพจ
ไลบรารี่คืออะไร ไลบรารี่ก็คือชุดโค้ดที่เขาเขียนมาสำเร็จแล้ว เราเอามาเขียนต่อเติมสั่งงานให้มันช่วยทำนั่นทำนี่ให้
เนื่องจากตอนที่เขาสร้าง AngularJS เป็นช่วงที่ MVC กำลังได้รับความนิยม AngularJS เลยยึดเอาแนวทาง MVC มาใช้กับตัวเองด้วย โดยให้ M model นั้นเขียนด้วย Javascript และ C controller นั้นเขียนด้วยจาวาสคริปต์เหมือนกัน ส่วน V view นั้นเลือกที่จะใช้ HTML ธรรมดามาใช้งาน
จากนั้นจึงผูก 3 ส่วนเข้าด้วยกัน
โปรดดูตัวอย่าง
angular.module(‘app’, [])
ตัวนี้ไม่มีอะไรมาก แค่เป็นตัวบอกขอบเขต
ส่วนนี่เป็นการสร้าง Controller ใน Controller จะมี Model ชื่อ name กับมีเมธอดชื่อ alertMe
จริงๆแล้วมันก็เขียนเหมือนจาวาสคริปต์แบบเดิมๆนั่นแหละ เพียงแต่มีการจัดระเบียบนิดหน่อยและมีการทำอะไรบางอย่างเพื่ออำนวยความสะดวกให้ผู้เขียนนิดหน่อย ถ้าท่านลองรันโค้ดนี้แล้วลองพิมพ์ค่าใน Textbox จะเห็นว่ามัน Dynamic เห้ย…โค้ดแค่นี้
นี่เป็นส่วนของ View จะเห็นว่าใช้ HTML ธรรมดา เพียงแต่มีการบอกว่า ng-app ให้แมปกับโมดูล app นะ ng-controller ให้ใช้คอนโทรลเลอร์ชื่อ testController นะ จากนั้น ng-model บอกว่า input ตัวนี้ผูกเข้ากับโมเดล name นะ (ทุกๆครั้งที่ท่านพิมพ์อะไรเข้าไป มันจะเอาค่าไปเก็บในตัวแปรชื่อ name) {{}} จะเป็นการเอาค่าจากตัวแปรมาแสดง ส่วน ng-click เมื่อใครก็ตามคลิกปุ่มนี้ให้ไปเรียกเมธอด alertMe มาทำงานนะ
ท่านอาจจะสงสัย $scope (เหมือนผมเคยสงสัย) $scope ตัวนี้เขาไว้ใช้นำหน้าตัวแปรหรือฟังก์ชั่น เพื่อเป็นการจำกัดขอบเขตการใช้งานมัน scope หรือบริเวณที่เอาตัวแปรหรือฟังก์ชั่นไปใช้งานได้ตัว ng-controller=”testController” จะเป็นตัวกำหนด มันถูกใส่ไว้ที่ div หรืออิลิเม้นท์ไหน ขอบเขตก็จะมีแค่นั้นแหละ
ลองดูโค้ดข้างล่างนี้สิ
<p>{{name}}</p> อยู่นอก scope ของ ng-controller=”testController”
ผลที่ออกมา
