สอน AngularJS – การใช้งาน Directive และ Expressions เบื้องต้น

สอน ANGULARJS – การใช้งาน DIRECTIVE และ EXPRESSIONS เบื้องต้น

สอน AngularJS – การใช้งาน Directive และ Expressions เบื้องต้น

ใน AngularJS นั้นจุดเด่นๆของมันก็คือ Directive นั้นเองเป็นวิธีการให้ในการใช้งาน HTML ที่ใช้รูปแบบการทำงานตามหลักการของ Data-Oriented ซึ่งจะแตกต่าง javascript ทั่วไปที่จะทำงานในรูปแบบ control flow ซึ่งต้องเขียนโค้ดหลาย step กว่าจะจบการทำงาน

Directive ใน AngularJS นั้นจะอาศัย HTML compiler ($compile) ในการประมวลผลซึ่งรูปแบบการใช้งาน Directive สามารถแบ่งวิธีการเขียนโค้ดได้

3 แบบหลักๆคือ

  1. <input ng-model=”foo”> จะเป็นการแทรก tag ng ของ AngularJS ใน tag html ทั่วไปซึ่งเป็นวิธีที่ได้รับความนิยมและง่ายต่อการใช้งาน
  2. <input data-ng-model=”foo”> รูปแบบนี้จะคล้ายกับรูปแบบที่ 1 เพียงแต่มีคำว่า data- อยู่ด้านหน้าเท่านั้นเอง
  3. <ng-view></ng-view> จะเป็นรูปแบบของ tag AngularJS เลยซึ่งวิธีนี้ดูเหมือนจะสั้นและง่ายแต่ข้อเสียของมันคือถ้า web app ของเรานั้นไม่สามารถโหลด AngularJS ได้มันก็จะกลาย tag ที่ html ไม่รู้จักแล้วจะกลายเป็นข้อมูล text ธรรมดาแล้ว user ที่ใช้งานก็จะเห็นนั้นเอง

Directive ใน AngularJS นั้นแบ่งออกเป็นหลาย tag ตามรูปแบบการทำงานและใช้งานซึ่งก็จะมีตัวอย่างเบื่องต้นดังนี้

DOM Manipulation

  • ng-show
  • ng-hide
  • ng-repeat
  • ng-view

Data Binding

  • ng-model
  • ng-init
  • ng-bind

Modules/Controller

  • ng-controller
  • ng-app

Event

  • ng-click
  • ng-keypress

ซึ่งด้านบนนี้เป็นแค่ตัวอย่างบางส่วนเท่านั้นยังมีคำสั่งอีกมากมายให้ใช้กันใน AngularJS ตอนไปก็จะเป็น Expressions  โดยเจ้า Expressions ใน AngularJS นั้นจะใช้ {{ เพื่อเปิด Expressions และ }} เพื่อทำการปิด ซึ่งมันก็เอาไว้ทำการคำนวณค่าหรือแสดงผลดังนั้น ตัวอย่างเช่น {{ 1 + 2 }} มันก็จะแสดงผลลัพธ์ออกมาเป็น 3 หรืออีกตัวอย่างเช่น {{ name }} มันก็จะแสดงค่าตัวแปร name ออกมานั้นเอง จากคำอธิบายเบื้องต้นนี้เรามาดูตัวอย่างกันบ้างดีกว่า

[sourcecode language=”html”]






Welcome {{yourName}}



Hello {{yourName}}!

License Agreement

Accept Agreement


[/sourcecode]

เมื่อพิมพ์โค้ดเสร็จแล้วลองรันดูก็จะได้เหมือนรูปแรกด้านล่างครับ

สอน ANGULARJS – การใช้งาน DIRECTIVE และ EXPRESSIONS เบื้องต้น

หน้า web นี้จะแบ่งเป็น 3 ส่วนคือ 1 เป็นส่วน Text box ไว้ใส่ข้อความซึ่งข้อความที่พิมจะแสดงโดย Expressions ที่เขียนไว้คือ Hello {{yourName}}!  นั้นเอง ส่วนที่ 2 จะเป็น check box จะที directive ng-click เพื่อทำการเปลี่ยนค่าของ isshow ซึ่งมันถูกกำหนดค่าเริ่มต้นให้เป็น true จาก ng-init นั้นเองทำให้มันแสดงข้อความว่า License Agreement ขึ้นมา เมื่อกด check box ค่าของ isshow ก็จะเป็น false ทำให้ทั้งตัวข้อความและ checkbox ที่มี ng-show=”isshow” นั้นถูกซ่อนไปดังรูปด้านล่างครับ

สอน ANGULARJS – การใช้งาน DIRECTIVE และ EXPRESSIONS เบื้องต้น

ส่วนที่ 3 คือการกดปุ่ม submit จะทำการแสดงข้อความ welcome ซึ่ง tag h2 ที่แสดงข้อความนั้นมี ng-show=”issubmit” แต่เนื่องจาก issubmit ไม่มีกำหนดค่ามันจึงไปแสดงขึ้นมาก่อน แต่เมื่อเรากดปุ่ม submit ค่าของ issubmit จะเป็นถูกก็จะทำให้ข้อความ Welcome แสดงขึ้นมานั้นเองเหมือนในรูปด้านล่างครับ

สอน ANGULARJS – การใช้งาน DIRECTIVE และ EXPRESSIONS เบื้องต้น

จะเห็นว่าเทคนิค Directive นั้นจะทำให้การเขียนโค้ด event ใน web app ง่ายขึ้นเพราะใช้ความสัมพันธ์ของข้อมูลตามหลัก Data-Oriented ทำให้ event บน web page สัมพันธ์กันหมดไม่จำเป็นต้องมากำหนด control ของแต่ละส่วนบนหน้า web page นั้นเอง

Download SourceCode

Leave a Reply

Your email address will not be published. Required fields are marked *