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

สอน AngularJS – การใช้งาน Directive และ Expressions เบื้องต้น ใน AngularJS นั้นจุดเด่นๆของมันก็คือ Directive นั้นเองเป็นวิธีการให้ในการใช้งาน HTML ที่ใช้รูปแบบการทำงานตามหลักการของ Data-Oriented ซึ่งจะแตกต่าง javascript ทั่วไปที่จะทำงานในรูปแบบ control flow ซึ่งต้องเขียนโค้ดหลาย step กว่าจะจบการทำงาน Directive ใน AngularJS นั้นจะอาศัย HTML compiler ($compile) ในการประมวลผลซึ่งรูปแบบการใช้งาน Directive สามารถแบ่งวิธีการเขียนโค้ดได้ 3 แบบหลักๆคือ <input ng-model=”foo”> จะเป็นการแทรก tag ng ของ AngularJS ใน tag html ทั่วไปซึ่งเป็นวิธีที่ได้รับความนิยมและง่ายต่อการใช้งาน <input data-ng-model=”foo”> รูปแบบนี้จะคล้ายกับรูปแบบที่ 1 เพียงแต่มีคำว่า data- อยู่ด้านหน้าเท่านั้นเอง <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 และ }}Read More →