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

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

บทความนี้จะนำเสนอเนื้อหาเกี่ยวกับ 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 นะครับ สุดท้ายผมก็ไปหาข้อมูลเพิ่มเติมตามลิงค์ด้านล่างสำหรับคนที่สนใจอ่านรายละเอียดหรืออยากศึกษาเพิ่มเติม ก็ตามด้านล่างเลยครับ

Chai Chai Phonbopit : Web Developer @Nimbl3 • ผู้ชายธรรมดาๆ ที่ชื่นชอบ Node.js, JavaScript และ Open Source มีงานอดิเรกเป็น Acoustic Guitar และ Football

บทความล่าสุด