AngularJs ก็คือ javascript framework หรือ javascript ที่มีการออกแบบ
มาสำหรับการทำงานให้สะดวก และใช้งานได้อย่างมีประสิทธิภาพ คล้ายๆ กับ jQuery
เริ่มต้นเลย
ไปที่หน้าแรก เว็บไซต์ https://angularjs.org/
อยากรู้อะไรอย่างละเอียดก็สามารถแวะอ่านได้ตลอดเวลา
แต่ที่นี้ จะเน้น เอามาใช้ประโยชน์ ลองฝึก และเรียนรู้จากผลลัพธ์
และถ้า สงสัย ก็จะกลับมาอ่านรายละเอียดเพิ่มเติม ทีหลัง
index.html โค้ดสำหรับเริ่มต้นศึกษา
1 2 3 4 5 6 7 8 9 10 11 12 | <!DOCTYPE html><html ng-app> <head> <meta charset="utf-8" /> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.17/angular.min.js"></script> <title>My Learn AngularJs 1</title> </head> <body> </body></html> |
จะใช้โค้ดตามด้านบน นี้เป็นต้นแบบ สำหรับการศึกษารายละเอียด
ของแต่ละคำสั่ง รูปแบบ การใช้งาน และอื่นๆ ของ angularjs
เริ่มเลย ขออธิบายตามความเข้าใจส่วนตัว
จะใช้โค้ด จากตัวอย่างหน้าเว็บของ angularjs มาอธิบาย ใครพอเข้าใจแล้ว
ก็ข้ามได้
โค้ด การส่งค่า ข้อความใน input textbox ไปแสดง ในตำแหน่าง ที่
กำหนด template ไว้
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <!DOCTYPE html><html ng-app> <head> <meta charset="utf-8" /> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.17/angular.min.js"></script> <title>My Learn AngularJs 1</title> </head> <body> <div> <label>Name:</label> <input type="text" ng-model="yourName" placeholder="Enter a name here"> <hr> <h1>Hello {{yourName}}!</h1> </div> </body></html> |
1. การใช้งาน angularjs แท็ก html ต้องมี attribute (เรียก directive ใน angularjs) ชื่อ ng-app เสมอ ตาม่บรรทัดที่ 2
โค้ดด้านบน
1 | <html ng-app> |
2. บรรทัดที่ 5 จถเป็นการเรียกใช้ ไฟล์ angularjs framework อันนี้เรียกจาก server ของ
google ที่ให้บริการ แนวนี้อยู่แล้ว ใช้สำหรับทดสอบ หากใช้จริง เราควรไปดาวน์โหลดไฟล์มาใช้ ก็ได้
1 | <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.17/angular.min.js"></script> |
3. โค้ด บรรทัดที่ 12 จะมีช่อง input text สำหรับให้เรากรอกข้อมูล สังเกตว่า มีการเพิ่ม
attribute (เรียก directive ใน angularjs) ชื่อ ng-model เข้ามา และ กำหนดค่า เท่ากับชื่อ yourName
ให้เข้าใจว่า คำว่า yourName นั้นไม่ใช่ค่าของข้อมูลที่จะแสดง
แต่เป็นการ อ้างอิง คำใน template ที่แสดงในแท็ก h1 ตามรูปแบบ {{yourName}}
ตัวอย่าง
4. ให้เราลองพิมพ์ คำอะไรก็ได้ ในช่อง input text แล้วสังเกตุ
ค่าในแท็ก h1 ต่อจากคำว่า hello ใน template {{yourName}} จะมีค่า
เปลี่ยนไปตามที่เราพิมพ์ ดังนั้น ให้เข้าใจว่า attribute (เรียก directive ใน angularjs) ชื่อ ng-model
จะใช้สำหรับ อ้างอิง ระหว่าง DOM Object หรือแท็ก element กับ ส่วนแสดง
template ที่เรากำหนด
1 2 3 4 5 6 | <div> <label>Name:</label> <input type="text" ng-model="yourName" placeholder="Enter a name here"> <hr> <h1>Hello {{yourName}}!</h1></div> |
ขอจบแบบสั้นๆ ในตแนแรก รู้จักและเข้าใจคร่าวๆ เกี่ยวกับ ng-app และ ng-model
ว่าใช้งานยังไง
เนื้อหาที่เกี่ยวข้อง