แนะนำ Angularjs เบื้องต้น

แนะนำ Angularjs เบื้องต้น

Angularjs เป็น Javascript MVC Framework อีกชนิดหนึ่ง โดยหลักๆแล้วเป็น Framework เหมาะสำหรับ SPAs (Single Page Applications) ซึ่งถูกพัฒนาขึ้นจาก Google นั้นเอง โดยเจ้า Angularjs นี้จะถูกพัฒนาจาก วิศวกรของ Google เอง และค่อย support ตอบปัญหาที่เหล่า Developer ที่นำไปใช้งานและเกิดปัญหาหรือมีข้อสงสัยนั้นเอง

AngularJS-large

ข้อดี ของ 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

แนะนำ Angularjs เบื้องต้น

แนะนำ Angularjs เบื้องต้น

จากนั้นผมทำการสร้างไฟล์ ang01.html แล้วทำการเขียนโค้ดเริ่มต้นนั้นนี้

[sourcecode language=”html”]





Thaicoding – Angular



[/sourcecode]

สังเกตว่าตรง tag html จะมี attibute ng-app อยู่ ซึ่งจะเป็นการบอก Angularjs ว่า tag เริ่มต้นว่าจะให้ angularjs เริ่มทำการที่ tag ไหน เราสามารถย้าย ng-app ไป tag อื่นก็ได้เช่น <body ng-app>, <div ng-app> เป็นต้น เมื่อทำการเขียนโค้ดเริ่มต้นเสร็จแล้วผมจะทำการเพิ่ม tag input ไว้ใน tag p  และ tag span ดังนี้

[sourcecode language=”html”]

Name:

{{name}}

[/sourcecode]

เมื่อลองรันไฟล์ดูจะเห็นว่าเมื่อเราพิมพ์ในช่อง input จะทำให้ span แสดงข้อความที่พิมพ์ลงไปทันที สังเกต <input> จะมี attibute ng-model=”name” มันเป็น sytax ของ Angularjs ที่บ่งบอกว่าข้อความใน textbox จะเก็บใน model ที่ชื่อว่า name ส่วน <span> นั้นจะมี ng-bind เพื่อเป็นตัวกำหนดว่าจะ bind ข้อมูลจาก model ชื่ออะไรซึ่งในที่นี้ก็มีชื่อว่า name นอกจากใช้ ng-bind แล้วยังสามารถใช้รูปแบบ Template ได้โดยพิมพ์ {{ ชื่อ model }} ซึ่งลองคิดดูว่าถ้าหากเป็น Jquery คงต้องเขียนหลายบรรทัดเพื่อให้ได้การทำงานแบบนี้ ซึ่งจะเห็นแล้วว่าแค่ความสามารถเบื้องต้นนี้ก็ทำการเขียนโค้ดสำหรับการทำงาน Front end สำหรับ web application หรือ website ได้ง่ายขึ้น

Untitled2

โค้ดทั้งหมด

[sourcecode language=”html”]




Thaicoding – Angular


Name:

{{name}}



[/sourcecode]

Download SourceCode

Leave a Reply

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