วันพุธที่ 3 กันยายน พ.ศ. 2557

AngularJS คือ


     AngularJs คือ Javascript Framework ที่พัฒนาโดย Google แต่ที่แตกต่างจาก Javascript Framework รูปแบบอื่นเช่น jQuery คือ AngularJs เป็น Javascript แบบ MVC ทำให้พัฒนาได้สะดวกรวดเร็ว ง่ายต่อการเรียนรู้ เพราะมีการแยกส่วนการทำงานที่ชัดเจน เพราะอาศัยหลักการแบบ MVC นั้นเองครับ
     ตอนนี้ผมสนใจจาวาสคริปต์ เฟรมเวิร์ค ตัวนี้อยู่ครับ ถือว่าเป็นมือใหม่อยู่ครับ ตอนนี้กำลังเริ่มศึกษา เพราะมีความยืนหยุ่นสูง เพราะสามารถนำไปประยุกต์ใช้กับ mobile app ผ่าน ionicframework (mobile template)

1.เพิ่ม Attribute ng-app ไว้ที่ tag <html> เช่น
<html ng-app="myapp">

2.เรียกใช้งาน AngularJs ก่อนครับ โดยพิมพ์คำสั่งเหล่านี้ส่วนของ <head>   
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

3.สร้างไฟล์นามสกุล .js ซึ่งจะเป็นส่วนของ controller ให้ชื่ออะไรก็ได้ เช่น mycontroller.js และพิมพ์คำสั่งเหล่านี้ในส่วนของ <head> ต่อจากข้อ 2
<script type="text/javascript" src="mycontroller.js"></script>

4.เพิ่ม tag ng-controller ในส่วนของTagที่อยู่ภายใต้ <body> ซึ่งจะเป็นจุดไหนก็ได้ของ DOM ที่ต้องการให้ครอบคลุม เช่นจะกำหนดในส่วนของ tag body เลยก็ได้
เช่น <body ng-controller="mycontroller as mycon" > หรือใน tag div เช่น <div  ng-controller="mycontroller as mycon">
สำหรับค่า mycontrolelr as mycon ที่อยู่ใน tag ng-controller คือการสร้าง object เพื่อผูกกับส่วนของ template นั่นเองครับ เราจะได้ค่า mycon ไปผูกกับ input ต่างๆ เช่น textfiled ปุ่มต่างๆ ร่วมถึงการแสดงผลลัพธุ์ออกทางหน้าจอผ่านเครื่องหมาย bracket syntax {{}}

มาดูโค๊ดตัวอย่างการใช้งานง่ายๆกันครับ

1.ทำงานโดยไม่ต้องใช้ controller

<html ng-app>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<title>ทำงานโดยไม่ผ่าน controller</title>
</head>
<body>
<div >
  กรอกชื่อของคุณ : <input type="text" ng-model="myname">
  Hello : {{myname}}
  </div>  
</div>
</body>
</html>

จะเห็นได้ว่า input ที่ถูกสร้างภายใต้กรอบการทำงานของ AngularJS จะไม่ใช้ Attribute “name” ครับ จะเปลี่ยนมาใช้ ng-model แทน และนำค่ามาแสดงผล โดยนำค่าจาก ng-model มากำหนดในสัญลักษณ์ {{}} และเราจะไม่ตั้งชื่อให้กับ attribute “ng-app” ครับ จะได้ผลลัพธุ์ดังนี้


2.ทำงานผ่าน controller 

ไฟล์ angularjs_test.html
<html ng-app="myapp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script type="text/javascript" src="calculatecontroller.js"></script>
<title>ทำงานผ่าน controller</title>
</head>
<body>
<div ng-controller="calculatecontroller as calculate">
โปรแกรมเครื่องคิดเลข<br />
  ตัวเลข 1 <input type="number" min="0" ng-model="calculate.number1"> 
  <select ng-model="calculate.inCurr">
      <option ng-repeat="c in calculate.currencies">{{c}}</option>
    </select>
    ตัวเลข 2 <input type="number" min="0" ng-model="calculate.number2">
    <br />
  ผลลัพธุ์ :
      {{calculate.result()}}
  </div>  
</body>
</html>

ไฟล์ calculatecontroller.js 
angular.module('myapp', [])//ทำงานในส่วนของกรอบของ app ที่เรากำหนด
  .controller('calculatecontroller', function() {//ทำงานในกรอกของ controller ที่เรากำหนด
    this.number1 = 1;//ค่าเริ่มต้นของตัวเลขที่ 1 จะผูกกับ ng-model="calculate.number1"
    this.number2 = 1;//ค่าเริ่มต้นของตัวเลขที่ 2 จะผูกกับ ng-model="calculate.number2"
    this.inCurr = '+';//ค่าเริ่มต้นของเครื่องหมายการคำนวณ คือ + จะผูกกับ ng-model="calculate.inCurr"
    this.currencies = ['+', '-', '*','%'];//ตัวแปรแบบ array สำหรับแสดงผลใน ng-model="calculate.inCurr"
 
    this.result =function result() {//ฟังก์ชั่นแสดงผลลัพธุ์จากการคำนวณ
  var $result=0;
  if(this.inCurr=='+') $result=this.number1+this.number2//เมื่อมีการเลิกเครื่องหมาย + ให้นำค่า number1 + number2 นำค่ามาเก็บไว้ในตัวแปร $result
  if(this.inCurr=='-') $result=this.number1-this.number2//เมื่อมีการเลิกเครื่องหมาย - ให้นำค่า number1 - number2 นำค่ามาเก็บไว้ในตัวแปร $result
  if(this.inCurr=='*') $result=this.number1*this.number2//เมื่อมีการเลิกเครื่องหมาย * ให้นำค่า number1 * number2 นำค่ามาเก็บไว้ในตัวแปร $result
  if(this.inCurr=='%') $result=this.number1%this.number2//เมื่อมีการเลิกเครื่องหมาย % ให้นำค่า number1 % number2 นำค่ามาเก็บไว้ในตัวแปร $result
  return $result;//รีเทิร์นผลลัพธุ์ผ่านทางตัวแปร $result ค่าจะถูกนำไปแสดงในส่วนของคำสั่ง {{calculate.result()}}
    };
  });

จะได้ผลลัพธุ์ดังนี้


3.เรียกใช้งานหลาย controller 

ไฟล์ angular_test_multicontroller.html 
<html ng-app="myapp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script type="text/javascript" src="multicontroller.js"></script>
<title>ทำงานผ่าน controller</title>
</head>
<body>
<div ng-controller="calculatecontroller">
<b>โปรแกรมเครื่องคิดเลข</b><br />
  ตัวเลข 1 <input type="number" min="0" ng-model="number1"> 
  <select ng-model="inCurr">
      <option ng-repeat="c in currencies">{{c}}</option>
    </select>
    ตัวเลข 2 <input type="number" min="0" ng-model="number2">
    <br />
  ผลลัพธุ์ :
      {{result()}}
  </div>  
  ---------------------------------------------------------
  <div ng-controller="coincontroller">
<b>โปรแกรมแปลงค่าเงินบาท</b><br />
  กรอกตัวเลข <input type="number" min="0" ng-model="coin">   
  <select ng-model="inCurrTo">
  <option ng-selected="{{currTo.value == inCurrTo}}"
            ng-repeat="currTo in currencyTo"
            value="{{currTo.value}}">{{currTo.display}}
  </option>
    </select>
    <br />
  ผลลัพธุ์ :
      {{result()}}
  </div> 
</body>
</html>

ไฟล์ multicontroller.js
var myapp=angular.module('myapp', []);//ทำงานในส่วนของกรอบของ app ที่เรากำหนด
 myapp.controller('calculatecontroller', function($scope) {//controller 1
    $scope.number1 = 1;//ค่าเริ่มต้นของตัวเลขที่ 1 จะผูกกับ ng-model="number1"
    $scope.number2 = 1;//ค่าเริ่มต้นของตัวเลขที่ 2 จะผูกกับ ng-model="number2"
   $scope.inCurr = '+';//ค่าเริ่มต้นของเครื่องหมายการคำนวณ คือ + จะผูกกับ ng-model="inCurr"
   $scope.currencies = ['+', '-', '*','%'];//ตัวแปรแบบ array สำหรับแสดงผลใน ng-model="inCurr"
 
   $scope.result =function result() {//ฟังก์ชั่นแสดงผลลัพธุ์จากการคำนวณ
  var $result=0;
  if($scope.inCurr=='+') $result=$scope.number1+$scope.number2//เมื่อมีการเลิกเครื่องหมาย + ให้นำค่า number1 + number2 นำค่ามาเก็บไว้ในตัวแปร $result
  if($scope.inCurr=='-') $result=$scope.number1-$scope.number2//เมื่อมีการเลิกเครื่องหมาย - ให้นำค่า number1 - number2 นำค่ามาเก็บไว้ในตัวแปร $result
  if($scope.inCurr=='*') $result=$scope.number1*$scope.number2//เมื่อมีการเลิกเครื่องหมาย * ให้นำค่า number1 * number2 นำค่ามาเก็บไว้ในตัวแปร $result
  if($scope.inCurr=='%') $result=$scope.number1%$scope.number2//เมื่อมีการเลิกเครื่องหมาย % ให้นำค่า number1 % number2 นำค่ามาเก็บไว้ในตัวแปร $result
  return $result;//รีเทิร์นผลลัพธุ์ผ่านทางตัวแปร $result ค่าจะถูกนำไปแสดงในส่วนของคำสั่ง {{result()}}
    };
  });
  //-----------------------------------------
   myapp.controller('coincontroller', function($scope) {//controller 2
    $scope.coin = 1;//ค่าเริ่มต้นของตัวเลข จะผูกกับ ng-model="coin"
   $scope.inCurrTo =2;//ค่าเริ่มต้นคือ 2 ซึ่งก็คือเงิน หยวนจีน CNY นั่นเอง
   $scope.currencyTo = [{value:1,display:'ดอลลาห์สหรัฐ USD'},{value:2,display: 'หยวนจีน CNY'},{value:3,display: 'ยูโร EUR'},{valule:4,display:'เกาหลีวอน KRW'}];//ตัวแปรแบบ array สำหรับแสดงผลใน ng-model="inCurrTo"
 
   $scope.result =function result() {//ฟังก์ชั่นแสดงผลลัพธุ์จากการคำนวณ
  var $result=0;
  if($scope.inCurrTo=='1') $result=$scope.coin*30//เมื่อมีการคลิกเลือก 1 หมายถึง ดอลลาห์ USD
  if($scope.inCurrTo=='2') $result=$scope.coin*5.35//เมื่อมีการคลิกเลือก 2 หมายถึงหยวนจีน CNY
  if($scope.inCurrTo=='3') $result=$scope.coin*6.8//เมื่อมีการคลิกเลือก 3 หมายถึง ยูโร EUR
  if($scope.inCurrTo=='4') $result=$scope.coin*8.8//เมื่อมีการคลิกเลือก 4 หมายถึง เกาหลีวอน KRW
  return $result;//รีเทิร์นผลลัพธุ์ผ่านทางตัวแปร $result ค่าจะถูกนำไปแสดงในส่วนของคำสั่ง {{result()}}
    };
  });

จะได้ผลลัพธุ์ดังนี้

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

7 ความคิดเห็น :

  1. ไม่ระบุชื่อ3 กันยายน 2557 เวลา 23:41

    เจ้าของ Blog มีFB ไหมครับ

    ตอบลบ
    คำตอบ
    1. ไม่มีครับผม อยากสอบถามอะไร สอบถามได้จากทางช่องความคิดเห็นได้เลยครับ

      ลบ
  2. ไม่ยากครับ นำ id มา join กันเท่านั้นครับ โดยส่ง id ของหมอในเทเบิล หมอ join กับ id ของหมอในเทเบิลคนไข้ครับ ก็จะทราบว่า คนไข้ที่หมอคนนี้ตรวจโรคมีใครบ้าง

    ตอบลบ
  3. ไม่ระบุชื่อ7 กันยายน 2557 เวลา 22:42

    ขอบคุณมากครับ
    http://postimg.org/image/6vgcmjekb/ <<<<
    ไฟล์รูปที่ผมแนบจะมี Column เลขทะเบียน กับ ชื่อนามสกุลใช่ไหมครับ ผมอยากให้ column ต่อไปมีคำว่าตรวจโรคเป็น Link ด้วยนะครับ และพอกด Link เข้าไปจะเป็นการดึงข้อมูลคนไข้ในแถวนั้นออกมาอ่ะครับ

    ตอบลบ
  4. ต้องขอดูโค๊ดครับ อย่างนี้ไม่รู้จะเขียนโค๊ดบอกยังไงครับ

    ตอบลบ
  5. ประมาณนี้ครับ
    <!DOCTYPE html>
    <html>
    <head>

    <title>รายชื่อคนไข้</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <meta charset=utf-8 />
    <script>

    function getDataFromDb()
    {
    $.ajax({
    url: "getdata.php" ,
    type: "POST",
    data: ''
    })
    .success(function(result) {
    var obj = jQuery.parseJSON(result);
    if(obj != '')
    {

    $("#myBody").empty();
    $.each(obj, function(key, val) {
    var tr = "<tr>";
    tr = tr + "<td>" + val["id1"] + "</td>";
    tr = tr + "<td>" + val["name1"] + "</td>";
    tr = tr + '<td><a href="diagnosis.php?id1='+val["id1"]+' ">ตรวจโรค</a></td>';
    tr = tr + "</tr>";
    $('#myTable > tbody:last').append(tr);
    });
    }

    });

    }

    setInterval(getDataFromDb, 10000); // 1000 = 1 second
    </script>
    </head>
    <body>
    <center>
    <h1>List</h1>

    <table width="600" border="1" id="myTable">
    <!-- head table -->
    <thead>
    <tr>
    <td width="91"> <div align="center">เลขทะเบียน</div></td>
    <td width="98"> <div align="center">ชื่อ-นามสกุล</div></td>
    <td width="98"> <div align="center">ตรวจโรค</div></td>
    </tr>
    </thead>
    <!-- body dynamic rows -->
    <tbody id="myBody"></tbody>
    </table>

    <center>
    </body>
    </html>

    ตอบลบ
  6. ไม่ระบุชื่อ8 ตุลาคม 2557 เวลา 20:32

    อันนี้กับ JQUERY มันต่างกันไหมงับ อันไหนง่ายกว่า

    ตอบลบ