AngularJS คืออะไร ?

AngularJS คืออะไร ?

Angular คือ client-side MVC/MVVM Framework ด้วย JavaScript เหมาะสำหรับเว็บแนว Single Page Applications (SPA) พัฒนาโดย Google

AngularJS คือ JavaScript Framework  รูปแบบหนึ่งที่พัฒนามาจาก Google หน้าที่ของมันคือเป็น engine ที่ใช้ควบคุมในส่วน front end ของเวบได้ดี ซึ่งดูแล้วมันอาจจะทำให้  Web Developer หลายๆคนเข้าถึงและจัดการส่วน front end ได้ง่ายขึ้นทั้งในเรื่อง ส่วนจัดการ template และ การ binding data object data แถมยังมีส่วนที่สามารถเขียน plugin เพิ่มเติมได้อีกด้วย  ส่วน plugin ถือเป็นจุดเด่นสุดของ jQuery ที่ประสบความสำเร็จมากในปัจจุบันหาก AngularJS มีวิธีการเขียนที่เป็น modularity ที่ดีและเข้าถึงง่าย คิดว่าในอนาคตของ framework ตัวนี้อาจจะเป็นที่นิยมในกลุ่ม  Web Developer ได้อย่างรวดเร็ว
จุดเด่นที่สำคัญของ AngularJS
1. พัฒนาโดย Google
เรามักจะเห็น Script และ Library  ส่วนใหญ่แล้วพัฒนามาจากโครงการที่เป็นชุมชุน  Open Source เป็นส่วนมาก ซึ่งแตกต่างกับ AngularJS ที่มีเหล่าวิศวะกรของทาง Google ดูแลและพัมนา Feature ต่างๆอยู่เสมอพร้อมทั้งมีเอกสารพร้อมข้อมูลถามตอบ ปัญหาต่าง ให้เราสามารถค้นคว้าและแก้ปัญหาได้อย่างชัดเจนดีเยี่ยม  ซึ่งไม่ใช่ครั้งแรกที่ Google พัฒนาโครงการในลักษณะเช่นนี้ ก่อนหน้านี้ยังมีโครงการ  Web ToolKit   ซึ่งเป็นโครการแจกฟรี Web Component พร้อมเครื่องมือในการพัฒนา ตัว Web ToolKit นี้เองเป็นแกนหลักที่ใช้พัฒนา Google Wave ในสมัยนั้น แต่ไม่ค่อยได้รับความนิยมมากนักเพราะเบื้องหลังยังมีความยุ่งยากในการเขียน โปรแกรม เพราะเป็นการเขียนควบคุมโดยใช้ Java ซึ่งเป็น native code แล้ว compile เป็น script component ต่างๆให้เราเลือกใช้งาน การมาของ HTML5 CSS3 และ JavaScript .. ทำให้ Google ตระหนักว่าไม่จำเป็นต้องเขียนด้วยโค๊ด Java เพียงอย่าเดียว
2. เป็น framework ที่มี Model การเขียนที่ครอบคลุมและกว้างขว้าง
ดูเหมือนว่า AngularJS จะคล้ายกับ Backbone และ JavaScriptMVC  ซึ่งเป็นสูตรสำเร็จของ Library ที่เป็นเครื่องมือในการพัฒนา web application ในส่วน front end ทำให้การพัฒนาสะดวกและรวดเร็วขึ้น แต่ที่ AngularJS แตกต่างออกมาคือ
–  ง่ายต่อการเชื่อมต่อ  Restful Service ต่างๆ  เพราะ Angular มีส่วนจัดการ JavaScript Object ,การเชื่อมต่อ Data Model  ได้สะดวกและง่ายๆเพียงไม่กี่บรรทัด one line of JavaScript
–  MVVM (Model View View-Model) pattern เป็น model ที่ช่วยเหลือในส่วนของการเชื่อมโยงต่อส่วนต่างๆ โดยการสร้าง controller พร้อม render data model เข้ากับส่วนแสดงผลหรือ view เข้าด้วยกัน
–  ส่วน Data Binding และ Dependency Injection  โดยปกติแล้ว  MVVM pattern จะทำการเชื่อมส่วน Data และส่วน UI โดยอัตโนมัติอยู่แล้ว AngularJS จะตัวช่วยโดยใช้ JavaScript Primitive ลักษณะคล้าย Array ในการจัดการส่วนการแสดงข้อมูลต่าง ไม่ว่าจะซับซ้อนขนาดไหน เพราะมันสามารถกำหนดตัวแปรได้เองอิสระไม่จำเป็นต้องจำเพาะอยู่ที่ main() ที่เดียว
–   Extends HTML   AngularJS มีตัวช่วยในการจัดการ HTML ได้เสมือน XML โดยการเขียน module เสริมเพิ่มเติมเข้าไปจัดการ DOM Object เช่น tag <div>  จัดการโดย HTML Compiler โดยใช้ directives ของ Angular
–   Makes HTML your Template  ตัว AngularJS มีส่วนจัดการ Template โดยใช้ bracket syntax ( {{}} ) คล้ายๆ Mustache หรือ Hogan.js
–   Enterprise-level Testing  AngularJS ไม่จำเป็นต้องลงส่วนเสริมหรือ plugin เพิ่มเติมในการทำ Testing เพราะมันมีตัว Scenario Runner พร้อมใช้งานทำ Unit Testing อยู่แล้ว

สิ่งที่ควรรู้

Directive คือ อะไร ?

Directive เป็นการระบุว่า HTML tag นี้จะถูกใช้งานโดย AngularJS ซึ่ง AngularJS ได้แนวคิดมาจาก Web Component ซึ่งเป็นมาตราฐานที่เพิ่มเข้ามาใหม่ใน HTML 5

Module คือ อะไร ?

ส่วนประกอบต่างๆ ของ Application แบ่งออกเป็น Module เพื่อให้ง่ายต่อการจัดการซอฟต์แวร์ ซึ่งจะมี Controller, Service ที่จะนำมาใช้ filter ข้อมูลต่างๆ รวมถึงส่วนของการตั้งค่า Config ต่างๆ โดย Module หนึ่ง สามารถเรียกใช้ Module อื่นๆ ได้

Expression คือ อะไร ?

Expression เป็นส่วนที่เราต้องการเอาข้อมูลเข้ามาใส่ในหน้า html โดยการใช้ Expression โดยใช้ {{ }} ครอบข้อมูลที่ทำการแสดง

Feature หลักของ Angular

• Data-binding : การ sync ข้อมูลแบบ auto ระหว่าง controller และ view
• Scope : ส่วนที่ทำหน้าที่เชื่อมโยงระหว่าง controller กับ view
• Controller : เป็นฟังก์ชั่นที่กำหนดค่าเริ่มต้น รวมถึงควบคุมการทำงานต่างๆของ scope
• Services : Angular มี built-in services ต่างๆ ที่จะช่วยสามารถทำงานต่างๆ ได้สะดวกขึ้น เช่น $http สำหรับทำ HTTP Request, $q สำหรับจัดการ Promise
• Directives : เป็น custom HTML tag ที่เราสามารถกำหนด และควบคุมการทำงานของ tag ได้เอง
• Templates : ส่วนที่จะ render ข้อมูลที่ได้รับจาก controller
• Routing : การเปลี่ยนแปลง View ที่แสดงผล โดยไม่เกิดการ refresh ใหม่ทั้ง
• DI (Dependency Injection) : ช่วยให้เราสามารถเข้าถึงส่วนย่อยต่างๆ ของ Application ทั้งที่เป็น built-in และ custom ได้อย่างง่ายดาย

เริ่มต้นเขียน Angular

เตรียม Library สำหรับเขียน Angular ให้พร้อม

ในการเขียน Angular ที่เราต้องการก็เพียงแค่เพิ่ม library angular เข้าไปแบบนี้ครับ (version ที่ใช้ตอนนี้คือ 1.4.7 ครับ)

<!doctype html> <html> <head> <title>My First Angular App</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script> <!-- สร้างไฟล์ main.js ไว้ใน folder app --> <script src="app/main.js"></script> </head> <body> <!-- Code goes here --> </body> </html>

1 2 3 4 5 6 7 8 9 10 11 12 13 14

<!doctype html> <html>   <head>     <title>My First Angular App</title>     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>     <!-- สร้างไฟล์ main.js ไว้ใน folder app -->     <script src="app/main.js"></script>   </head>   <body>     <!-- Code goes here -->   </body> </html>

เท่านี้เราก็พร้อมสำหรับการเขียน Angular app แล้วครับ

สร้าง Angular app

ทำการเพิ่ม attribute ng-app เข้าไปที่ tag <html>

<html ng-app="myApp">

1	<html ng-app="myApp">

* ng-app เป็น built-in directive ที่ใช้เพื่อบอกให้รู้ว่า tag <html> นี้คือขอบเขตของ app โดย Angular เมื่อ web page โหลดเสร็จสิ้น และจะมองหา ng-app directive เพื่อเริ่มต้นการทำงาน

สร้าง angular.module

ที่ไฟล์ main.js เพิ่ม

var app = angular.module('myApp', []);

1	var app = angular.module('myApp', []);

code นี้จะทำการสร้าง Angular module ชื่อ myApp ซึ่งเราสามารถมอง module ให้เป็นเหมือนกับ namespace ในภาษา Java หรือ C# โดย parameter ที่ 2 ที่เป็น empty array จะเป็น dependency ต่างๆ ของ app ที่เราสามารถ include เข้ามาได้
* ชื่อ module myApp จะต้องตรงกับค่าที่อยู่ใน ng-app directive

สร้าง Controller

หลังจากที่เราสร้าง angular module แล้ว ต่อมาเราก็จะทำการสร้าง controller โดย controller จะเป็นตัวกำหนดค่าเริ่มต้น และการทำงานของ scope โดยที่ scope จะเป็นตัวกลางเชื่อมระหว่าง controller เข้ากับ view (controller, service, filter หรือ directive จะถูกสร้างขึ้นมา และทำงานอยู่ภายใต้ module ที่เรากำหนด

relation between $scope, controller and view in angular

ที่ไฟล์ main.js เพิ่ม

app.controller('MainController', function($scope){ $scope.name = 'Home'; });

1 2 3

app.controller('MainController', function($scope){     $scope.name = 'Home'; });

จะเห็นว่าเราเรียก controller method จากตัวแปร app ที่เก็บ Angular module ก่อนหน้านี้ไว้ เพื่อบอกให้รู้ว่าเราต้องการสร้าง controller ให้อยู่ภายใต้ module myApp นอกจากนี้จะมีการ inject ตัวแปร $scope เข้าไปใน controller ด้วย
ตอนนี้เราได้สร้าง controller ขึ้นมาแล้ว และเพิ่ม property name เข้าใน scope ของ controller แต่เรายังไม่สามารถแสดงข้อมูลได้ เนื่องจากเรายังไม่ได้เรียกใช้งาน controller เลย!
เพิ่ม code เข้าไปใน index.html

<body ng-controller="MainController"> <input type="text" ng-model="name"> <p> Hello {{ name }}</p> </body>

1 2 3 4 5

<body ng-controller="MainController">       <input type="text" ng-model="name">    <p>Hello {{ name }}</p> </body>

ng-controller จะเป็นการบอกให้รู้ถึงขอบเขตในการเข้าถึงข้อมูลที่อยู่ใน scope ของ controller นั้นๆ โดยเราสามารถมี ng-controller ได้มากกว่าหนึ่ง รวมถึงจะเพิ่ม ng-controller ไว้ที่อื่นก็ได้ เช่น <div/>
ng-model เป็น directive ที่ใช้สำหรับเข้าถึง property ต่างๆของ scope แต่ถ้า property นั้นยังไม่มีอยู่ ก็จะทำการสร้างขึ้น และเพิ่มเข้าไปใน scope โดยอัตโนมัติ
{{ expression }} คือ Angular express ที่ใช้สำหรับแสดงค่าต่างๆใน html
index.html

<!doctype html> <html ng-app="myApp"> <head> <title>My First Angular App</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script> <!-- สร้างไฟล์ main.js ไว้ใน folder app --> <script src="app/main.js"></script> </head> <body ng-controller="MainController"> <input type="text" ng-model="name"> <p> Hello {{ name }}</p> </body> </html>

1 2 3 4 5 6 7 8 9 10 11 12 13 14

<!doctype html> <html ng-app="myApp"> <head> <title>My First Angular App</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script> <!-- สร้างไฟล์ main.js ไว้ใน folder app --> <script src="app/main.js"></script> </head> <body ng-controller="MainController"> <input type="text" ng-model="name"> <p>Hello {{ name }}</p> </body> </html>

app/main.js

var app = angular.module('myApp', []); app.controller('MainController', function($scope){ $scope.name = 'Home'; });

1 2 3 4 5

var app = angular.module('myApp', []); app.controller('MainController', function($scope){     $scope.name = 'Home'; });

ตอนนี้ถ้าเรารันหน้าเว็บก็จะได้ผลลัพธ์แบบนี้ครับ

show-angular-scope-data-using-curly-braces

และถ้าเราแก้ไขข้อมูลที่อยู่ใน textbox จะเห็นว่า text ที่อยู่ใน p tag ก็จะเปลี่ยนแปลงทันที เป็นผลมาจากสิ่งที่เรียกว่า 2 way data binding ความ หมายคือ ถ้ามีการเปลี่ยนข้อมูลของ scope ผ่านทาง view จะมีผลกับ controller ด้วย และในทางกลับกัน การเปลี่ยนแปลงของข้อมูลใน controller ก็จะมีผลกับ view เช่นเดียวกัน แต่การเปลี่ยนแปลงนี้จะต้องอยู่ภายใต้ Angular context (จะอธิบายเรื่อง Angular context เพิ่มเติมในบทความเกี่ยวกับ $digest loop และ apply อีกครั้งครับ)
จนถึงตอนนี้เราก็ได้เริ่มต้นทำความรู้จักกับ Angular, ความสัมพันธ์ระหว่าง view, controller, model (scope) กันไปแล้ว ในบทความต่อไปเราจะพูดถึงการใช้ Angular provider (Value, Factory, Service และ Constant) ที่จะช่วยให้เราเข้าใจเรื่อง dependency injection มากขึ้นด้วยครับ