สอน 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 →

แนะนำ Angularjs เบื้องต้น Angularjs เป็น Javascript MVC Framework อีกชนิดหนึ่ง โดยหลักๆแล้วเป็น Framework เหมาะสำหรับ SPAs (Single Page Applications) ซึ่งถูกพัฒนาขึ้นจาก Google นั้นเอง โดยเจ้า Angularjs นี้จะถูกพัฒนาจาก วิศวกรของ Google เอง และค่อย support ตอบปัญหาที่เหล่า Developer ที่นำไปใช้งานและเกิดปัญหาหรือมีข้อสงสัยนั้นเอง ข้อดี ของ Angularjs นั้นจะทำให้การทำงาน front end ของ web application นั้นพัฒนาง่ายขึ้นเพราะด้วย MVC หรือ MVVM ทำให้เราแยกส่วนในการพัฒนาได้ง่าย อีกทั้งเจ้า Angularjs นี้ยังเป็น MVC แบบ model orientation ซึ่งเมื่อข้อมูลใน model มีการเปลี่ยนแปลง จะทำให้ข้อมูลในส่วนของ View เปลี่ยนแปลงไปด้วยทำให้ง่ายลดขั้นตอนในการพัฒนา และอีกอย่างที่ทำให้หลายคนคุ้นเคยก็คือ template ในส่วน View นั้นจะใช้รูปแบบ {{}} ซึ่ง template engine หลายๆตัวก็ใช้รูปแบบนี้นั้นเอง เรามาดูกันดีกว่าว่าจะเริ่มใช้งานเจ้า Angularjs ยังไงขั้นแรกให้ทำการ Download Library ตัวนี้จะ website angularjs กันก่อน เมื่อโหลดเสร็จจะได้ไฟล์ javascript ซึ่งจะคล้ายๆกับ jquery นั้นเอง เมื่อได้ไฟล์เรียบร้อยแล้วก็เอาไฟล์ไปไว้ในที่ตัวต้องการ ส่วนของผมจะเก็บใน folder js จากนั้นผมทำการสร้างไฟล์ ang01.html แล้วทำการเขียนโค้ดเริ่มต้นนั้นนี้ [sourcecode language=”html”] Thaicoding – Angular [/sourcecode] สังเกตว่าตรง tag html จะมี attibute ng-app อยู่ ซึ่งจะเป็นการบอก Angularjs ว่า tagRead More →