PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum

เรียนรู้ angularjs javascript framework ตอนที่ 1

10 August 2014 By


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
ว่าใช้งานยังไง 
 
 
 
 
 
 
 
 



เนื้อหาที่เกี่ยวข้อง



Tags:: angularjs javascript





URL สำหรับอ้างอิง