PHP Ionic Angular HTML5 AJAX Javascript CSS MySQL jQuery Forum


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

10 August 2014 By Ninenik Narkdee
javascript angularjs

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ javascript angularjs



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






อย่าลืมกด Like กด Share เป็นกำลังใจ ในการสร้างบทความใหม่ๆ น่ะครับ


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