Introduce to AngularJS (ตอนที่ 1)

Theeranith Atchaklab
Technologies For Everyone
2 min readMar 31, 2017

--

ก่อนที่เราจะมาทำความรู้จักกับ Angularjs2 เรามาทำความรู้จักกับ AngularJS และพื้นฐานเล็กๆน้อยๆ กันก่อนดีกว่า ว่ามันคืออะไร แล้วใช้ไว้ทำอะไรกันแน่ ! ! !

ปัจจุบันการเขียนเว็บโดยการใช้ JavaScript เป็นที่นิยมมากขึ้น และมีเฟรมเวิร์คให้เลือกใช้หลากหลาย เช่น jQuery, Node.JS และอื่นๆ โดยแต่ละตัวก็จะมีข้อดีและข้อเสียแตกต่างกันไป แล้วแต่การใช้งาน หรือ ผู้ใช้งานจะเลือกใช้ และยังมีอีกหนึ่งเฟรมเวิร์คที่ได้รับความนิยมอย่างสูง นั่นก็คือ AngularJS นั่นเอง

AngularJS คือ JavaScript เฟรมเวิร์คตัวหนึ่งสำหรับ front-end ตัวหนึ่งที่ถูกพัฒนาโดย Google จุดเริ่มต้นของ AngularJS เริ่มโดย Miško Hevery ในปี 2009 เป็นผู้เริ่มต้นในการพัฒนา ซึ่งได้รับเงินสนับสนุนจากทาง Google จนเกิดเปิด AngularJS 1 ในปี 2012 และได้รับความสนใจอย่างมาก โดย AngularJS ใช้รูปแบบ MVC (Model-View-Controller) ซึ่งประกอบด้วย 3 ส่วนคือ

Model ทำหน้าที่ในการติดต่อกับฐานข้อมูล

View คือส่วนที่นำข้อมูลที่ได้มาไปแสดงผลให้ผู้ใช้

Controller ทำหน้าที่ จัดการและประมวลผล

การใช้งาน MVC นั่นทำให้ง่ายต่อการแก้ไข และควบคุมการทำงาน
มาถึงข้อดีของ AngularJS กันบ้าง

-AngularJS เป็น open-source web application ซึ่ง ฟรี! และยังเปิดโอกาสให้ผู้ที่สนใจนำไปพัฒนาต่อได้
-AngularJS เป็นเฟรมเวิร์คที่ถูกพัฒนาโดย Google ดังนั่นจะทำให้มั่นใจว่าจะมีการพัฒนาเรื่อยๆ และมีแหล่งความรู้ หรือเอกสารอ้างอิงมากมาย
-AngularJS สามารถทำความเข้าใจได้ง่าย ใช้งานง่าย และช่วยลดจำนวนบรรทัดที่ใช้ในการเขียนโค้ด
-มี Data binding ช่วยอำนวยความสะดวกในการเชื่อมข้อมูลระหว่าง View และ Controller พูดอย่างง่ายๆ คือ ถ้าหากเราเปลี่ยนข้อมูลใดๆ ผ่านทาง View จะส่งผลกับทาง Controller ด้วย หรือเรียกว่า two-way data binding
-มี Built-in service ต่างๆ ช่วยอำนวยความสะดวก เช่น $location, $http

พื้นฐาน AngularJS

เราเริ่มต้นด้วยการติดตั้ง AngularJS กันก่อนดีกว่า เราสามารถติดตั้ง AngularJS ได้หลายวิธี โดยวิธีที่เราจะแนะนำวันนี้คือ การใช้ Bower
โดยขั้นตอนแรกจะต้องทำการติดตั้ง nodejs ก่อนโดยเข้าไปโหลดจาก https://nodejs.org/en/

เมื่อทำการติดตั้ง nodejs แล้วจะถึงจะสามารถติดตั้ง bower ได้ โดยใช้คำสั่ง $ npm install -g bower ใน cmd

จากนั้น จึงติดตั้ง angularjs โดยใช้คำสั่ง bower install angular#1.6.3 ผ่านทาง cmd (ต้องมีการติดตั้ง github for windows ก่อน สามารถ โหลดได้จาก https://git-for-windows.github.io/ )

รอจนติดตั้งเสร็จ ในตอนต่อไปเราจะมาดู angular 2 กันดีกว่า

--

--