AngularJS คืออะไร ? + เริ่มต้นใช้งาน

บทความนี้จะนำเสนอเนื้อหาเกี่ยวกับ AngularJS โดยในมุมมองของผม ซึ่งใช้เวลาศึกษามาประมาณ 2-3 เดือน ซึ่งถือว่ายังอยู่ในขั้นเริ่มต้น แต่ก็คิดว่าพอที่จะแบ่งปันในสิ่งที่ได้รู้ได้บ้าง หากผิดพลาดประการใด ก็ขออภัยด้วยครับ

Prerequisites

สำหรับพื้นฐานที่ควรมีก่อนการเริ่มต้น AngularJS ก็คือพื้นฐานเว็บไซต์ทั่วไปครับ

เคยทำเว็บไซต์ หรือเข้าใจ HTML/CSS มาก่อน
เข้าใจพื้นฐาน JavaScript บ้าง

AngularJS คืออะไร ?

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

Step 1 : เริ่มต้นกับ AngularJS

สร้างโปรเจ็ค AngularJS ขึ้นมา ผมทำการตั้งชื่อว่า hello-ng ภายในประกอบด้วยไฟล์ 2 ไฟล์คือ bower.json และ package.json

mkdir hello-ng
cd hello-ng
touch bower.json

ไฟล์ bower.json

1
{
2
  "name": "hello-ng",
3
  "version": "0.0.1"
4
}

ต่อมา ทำการดาวน์โหลด AngularJS จากเว็บไซต์หลักได้เลย มีทั้งการดาวน์โหลดไฟล์ JavaScript หรือว่าติดตั้งผ่าน bower

สำหรับบทความนี้ใช้วิธีติดตั้งผ่าน Bower ด้วยคำสั่ง

1
bower install angular --save

ไฟล์ AngularJS จะถูกโหลดไว้ที่โฟลเดอร์ bower_components

Step 2 : Create index.html

ต่อมา สร้างไฟล์ index.html ขึ้นมา และลิงค์ไฟล์ AngularJS และไฟล์ app.js ซึ่งจะเอาไว้เขียนโค๊ด JS ของเรา ดังนี้

1
<!doctype html>
2
<html lang="en">
3
  <head>
4
    <meta charset="UTF-8" />
5
    <title>Hello AngularJS</title>
6
  </head>
7
  <body>
8
    <script src="bower_components/angular/angular.min.js"></script>
9
    <script src="js/app.js"></script>
10
  </body>
11
</html>

ทำการเพิ่มแท็ก ng-app="myApp" ใส่ไว้ภายใน element body ดังนี้

1
<body ng-app="myApp">
2
  <div ng-controller="MainController">{{ message }}</div>
3
</body>

จากด้านบน เป็นการ Setup Angular Project โดยกำหนดให้ชื่อว่า myApp

ต่อมาทำการสร้างไฟล์ js/app.js ขึ้นมา ดังนี้

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

3
myApp.controller('MainController', function ($scope) {
4
  $scope.message = 'Hello AngularJS'
5
})

ทดสอบ รันเซิฟเวอร์ จะเห็นว่าหน้าเว็บ ตรงส่วน {{ message }} จะโชว์ข้อความว่า Hello AngularJS

สิ่งที่ได้รู้จัก

Directives

ng-app : มันคือ Attributes ใน HTML หรือถ้าจะให้เรียกอีกอย่าง ใน AngularJS จะเรียกสิ่งเหล่านี้ว่า Directives ซึ่งส่วนมาก Directives ใน AngularJS จะขึ้นต้นด้วย ng-** เช่น ng-repeat, ng-app, ng-if, ng-switch เป็นต้น

Modules

จากโค๊ดด้านบน ตรงส่วนนี้

1
angular.module('myApp', [])

คือการประกาศ module ชื่อ myApp โดย [] คือบอกว่า module นี้ไม่มี dependencies อื่นๆ เพิ่มเติม

Controller

Controller ใน AngularJS เปรียบเสมือนหัวใจในการขับเคลื่อนส่วนต่างๆของ AngularJS และเป็นส่วนของ Logic ของแอพพลิเคชันของเรา ขั้นตอนการสร้าง Controller คือ เมื่อเราทำการสร้าง module เราสามารถที่จะใช้ instance นั้นทำการสร้าง controller ได้ด้วย :

1
myApp.controller('MainController', function ($scope) {
2
  $scope.message = 'Hello AngularJS'
3
})

โดย parameter แรก เป็นชื่อ Controller และ parameter ที่สองเป็น function ซึ่งส่ง $scope ไปด้วย โดยตัวแปร $scope.message ก็คือข้อความเดียวกันกับ {{ message }} ในหน้า index.html

Expressions

Expressions จะอยู่ในลักษณะ {{ }} ที่เหมือนกับ {{ message }} เป็นเหมือนการแทรกค่า ลงไปในเครื่องหมาย {{ และถูกปิดด้วยเครื่องหมาย }} หรือก็คือการรันโค๊ด JavaScript ภายในหน้า index.html เช่น {{ 5 + 5 }}

$scope

Scope เป็นเหมือนกับพื้นที่หรือตัวเชื่อม ที่ Controller และ View สามารถมองเห็นกันได้ ตัวอย่างเช่น

1
<div ng-controller="MainController">{{ message }}</div>
2

3
{{ message2 }}

Scope จะมองเห็นเพียงแค่ภายใน div ที่มี ng-controller ชื่อ MainController อยู่เท่านั้น หากอยู่นอก div อย่าง message2 จะมองไม่เห็น

Step 3 : 2 Way Data-Binding

2 Way Data-Binding เป็น feature ที่น่าสนใจของ AngularJS คือจะเป็นเหมือนกัน synchronised ข้อมูลแบบ real time เช่น เมื่อหน้า View มีการอัพเดท Model ก็จะอัพเดทด้วย หรือ Model อัพเดท View ก็จะอัพเดทตาม

ตัวอย่าง เช่น

1
<body ng-app="myApp">
2
  <div ng-controller="MainController">
3
    {{ message }}
4

5
    <input type="text" ng-model="name" />
6
    <h3>Hello : {{ name }}</h3>
7
  </div>
8
</body>

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

3
myApp.controller('MainController', function ($scope) {
4
  $scope.message = 'Hello AngularJS'
5
  $scope.name = ''
6
})

ด้านบนเป็นการสร้าง <input> ขึ้นมาและทำการ bind Model ชื่อว่า name และใช้ expressions เพื่อทำการ แสดงค่า name

ทดสอบรันหน้าเว็บ จะเห็น แบบนี้ พิมพ์ข้อความปุ๊บ หน้าเว็บก็จะเปลี่ยนแปลงข้อมูลเลย

See the Pen OVWOwM by Chai Phonbopit (@Phonbopit) on CodePen.

Step 4 : ng-repeat

ng-repeat เป็น Directive ตัวหนึ่ง ซึ่งหลักการทำงานเหมือนกับการใช้ loop ตัวอย่าง เช่น การวนลูปตามจำนวนของ Model names

1
<li ng-repeat="name in names">{{ name }}</li>

ทดสอบโดยการเพิ่มโค๊ดนี้ลงไปต่อจาก html เดิม ในไฟล์ index.html

1
<body ng-app="myApp">
2
  <div ng-controller="MainController">
3
    {{ message }}
4

5
    <input type="text" ng-model="name" />
6
    <h3>Hello : {{ name }}</h3>
7

8
    <h3>List of Pirates</h3>
9
    <ul>
10
      <li ng-repeat="pirate in pirates">
11
        <p>Name : {{ pirate.name }}</p>
12
        <p>Position : {{ pirate.position }}</p>
13
      </li>
14
    </ul>
15
  </div>
16
</body>

ไฟล์ app.js เพิ่มข้อมูลนี้ลงไป

1
$scope.pirates = [
2
  {
3
    id: 1,
4
    username: 'goldroger',
5
    name: 'Gol D. Roger',
6
    position: 'Pirate King'
7
  },
8
  {
9
    id: 2,
10
    username: 'mrzero',
11
    name: 'Sir Crocodile',
12
    position: 'Former-Shichibukai'
13
  },
14
  {
15
    id: 3,
16
    username: 'luffy',
17
    name: 'Monkey D. Luffy',
18
    position: 'Captain'
19
  },
20
  {
21
    id: 4,
22
    username: 'law',
23
    name: 'Trafalgar D. Water Law',
24
    position: 'Shichibukai'
25
  },
26
  {
27
    id: 5,
28
    username: 'shanks',
29
    name: "'Red-Haired' Shanks",
30
    position: 'The 4 Emperors'
31
  }
32
]

เมื่อทดสอบรันเซิฟเวอร์ จะได้ดังนี้

See the Pen mJRqGy by Chai Phonbopit (@Phonbopit) on CodePen.

สรุป

สำหรับบทความนี้ผมก็ทำการเกริ่นๆ ให้เห็นภาพว่า AngularJS คืออะไร สามารถใช้งานและนำไปใช้ได้อย่างไรในแบบเริ่มต้น ฉะนั้นก็ขึ้นอยู่กับผู้อ่านแล้ว ว่าจะนำไปต่อยอดยังไงได้บ้าง

โค๊ดในบทความนี้ ฝากไว้ที่ Github นะครับ สุดท้ายผมก็ไปหาข้อมูลเพิ่มเติมตามลิงค์ด้านล่างสำหรับคนที่สนใจอ่านรายละเอียดหรืออยากศึกษาเพิ่มเติม ก็ตามด้านล่างเลยครับ