Loading...
AngularJS คืออะไร ?

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-repeatng-appng-ifng-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

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

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"
    }
    ];

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

สรุป

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

ภาษา PHP และ ภาษา HTML เป็นภาษาที่ใช้เขียนเว็บไซต์

ภาษา PHP และ ภาษา HTML เป็นภาษาที่ใช้เขียนเว็บไซต์

PHP เป็นภาษาจา พวก scripting language คำ สั่งต่างๆจะเก็บอยู่ในไฟล์ที่เรียกว่าสคริปต์ (script) และเวลาใช้งานต้องอาศัยตัวแปลชุดคำ สั่ง ตัวอย่างของภาษาสคริปก็เช่น JavaScript, Perl เป็นต้น

การสร้างเว็บเพจโดยใช้ภาษา PHP

การสร้างเว็บเพจโดยใช้ภาษา PHP

PHP เป็นภาษาจำพวก scripting language คำสั่งต่างๆจะเก็บอยู่ในไฟล์ที่เรียกว่า สคริปต์ (script) และเวลาใช้งานต้องอาศัยตัวแปลชุดคำสั่ง ตัวอย่างของภาษาสคริปก็เช่น JavaScript, Perl เป็นต้น ลักษณะของ PHP ที่แตกต่างจากภาษาสคริปต์แบบอื่นๆ คือ PHP

คำสั่ง break และ continue

คำสั่ง break และ continue

คำสั่งในการเขียนโปรแกรมที่สำคัญในการใช้ร่วมกับกลุ่มคำสั่งประเภทการวนลูปทั้งหลาย เป็นคำสั่งที่ใช้หยุดลูป ทันทีหรือใช้ให้มันวิ่งกลับไปที่ต้นลูปใหม่ก็ได้ครับ คำสั่งที่ว่านั้นคือ break และ continue 

โปรแกรมระบบจัดการฐานข้อมูล MySQL

โปรแกรมระบบจัดการฐานข้อมูล MySQL

MySQL คือ โปรแกรมระบบจัดการฐานข้อมูล ที่พัฒนาโดยบริษัท MySQL AB มีหน้าที่เก็บข้อมูลอย่างเป็นระบบ รองรับคำสั่ง SQL เป็นเครื่องมือสำหรับเก็บข้อมูล ที่ต้องใช้ร่วมกับเครื่องมือหรือโปรแกรมอื่นอย่างบูรณาการ เพื่อให้ได้ระบบงานที่รองรับ ความต้องการของผู้ใช้ เช่นทำงานร่วมกับเครื่องบริการเว็บ (Web Server) เพื่อให้บริการแก่ภาษาสคริปต์ที่ทำงานฝั่งเครื่องบริการ (Server-Side Script) เช่น ภาษา php ภาษา aps.net หรือภาษาเจเอสพี เป็นต้น หรือทำงานร่วมกับโปรแกรมประยุกต์ (Application Program) เช่น ภาษาวิชวลเบสิกดอทเน็ต ภาษาจาวา หรือภาษาซีชาร์ป เป็นต้น โปรแกรมถูกออกแบบให้สามารถทำงานได้บนระบบปฏิบัติการที่หลากหลาย และเป็นระบบฐานข้อมูลโอเพนทซอร์ท (Open Source)ที่ถูกนำไปใช้งานมากที่สุด

error: Content is protected !!