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

เขียนเมื่อ 10 ปีก่อน โดย Ninenik Narkdee
javascript angularjs

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

ดูแล้ว 28,850 ครั้ง


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


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







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









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





คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
  • เปลี่ยน


    ( หรือ เข้าใช้งานผ่าน Social Login )







เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ