AngularJs ก็คือ javascript framework หรือ javascript ที่มีการออกแบบ
มาสำหรับการทำงานให้สะดวก และใช้งานได้อย่างมีประสิทธิภาพ คล้ายๆ กับ jQuery
เริ่มต้นเลย
ไปที่หน้าแรก เว็บไซต์ https://angularjs.org/
อยากรู้อะไรอย่างละเอียดก็สามารถแวะอ่านได้ตลอดเวลา
แต่ที่นี้ จะเน้น เอามาใช้ประโยชน์ ลองฝึก และเรียนรู้จากผลลัพธ์
และถ้า สงสัย ก็จะกลับมาอ่านรายละเอียดเพิ่มเติม ทีหลัง
index.html โค้ดสำหรับเริ่มต้นศึกษา
<!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 ไว้
<!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
โค้ดด้านบน
<html ng-app>
2. บรรทัดที่ 5 จถเป็นการเรียกใช้ ไฟล์ angularjs framework อันนี้เรียกจาก server ของ
google ที่ให้บริการ แนวนี้อยู่แล้ว ใช้สำหรับทดสอบ หากใช้จริง เราควรไปดาวน์โหลดไฟล์มาใช้ ก็ได้
<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 ที่เรากำหนด
<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
ว่าใช้งานยังไง
เนื้อหาที่เกี่ยวข้อง