Devahoy - 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

{
	"name": "hello-ng",
	"version": "0.0.1"
}

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

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

bower install angular --save

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

Step 2 : Create index.html

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Hello AngularJS</title>
  </head>
  <body>
    <script src="bower_components/angular/angular.min.js"></script>
    <script src="js/app.js"></script>
  </body>
</html>

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

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

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

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

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

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

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

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

Directives

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

Modules

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

angular.module('myApp', [])

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

Controller

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

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

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

Expressions

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

$scope

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

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

{{ 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 ก็จะอัพเดทตาม

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

<body ng-app="myApp">
  <div ng-controller="MainController">
    {{ message }}

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

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

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

ด้านบนเป็นการสร้าง <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

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

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

<body ng-app="myApp">
  <div ng-controller="MainController">
    {{ message }}

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

    <h3>List of Pirates</h3>
    <ul>
      <li ng-repeat="pirate in pirates">
        <p>Name : {{ pirate.name }}</p>
        <p>Position : {{ pirate.position }}</p>
      </li>
    </ul>
  </div>
</body>

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

$scope.pirates = [
  {
    id: 1,
    username: 'goldroger',
    name: 'Gol D. Roger',
    position: 'Pirate King'
  },
  {
    id: 2,
    username: 'mrzero',
    name: 'Sir Crocodile',
    position: 'Former-Shichibukai'
  },
  {
    id: 3,
    username: 'luffy',
    name: 'Monkey D. Luffy',
    position: 'Captain'
  },
  {
    id: 4,
    username: 'law',
    name: 'Trafalgar D. Water Law',
    position: 'Shichibukai'
  },
  {
    id: 5,
    username: 'shanks',
    name: "'Red-Haired' Shanks",
    position: 'The 4 Emperors'
  }
]

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

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

สรุป

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

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