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 กว่านี้แน่นอนครับ แต่ต้องขอตัวไปศึกษาเพิ่มเติมอีกนิดนะครับ เพราะมีหลายส่วนที่ยังไม่ได้ศึกษาเหมือนกันครับ
เจ้าของ Blog มีFB ไหมครับ
ตอบลบไม่มีครับผม อยากสอบถามอะไร สอบถามได้จากทางช่องความคิดเห็นได้เลยครับ
ลบไม่ยากครับ นำ id มา join กันเท่านั้นครับ โดยส่ง id ของหมอในเทเบิล หมอ join กับ id ของหมอในเทเบิลคนไข้ครับ ก็จะทราบว่า คนไข้ที่หมอคนนี้ตรวจโรคมีใครบ้าง
ตอบลบขอบคุณมากครับ
ตอบลบhttp://postimg.org/image/6vgcmjekb/ <<<<
ไฟล์รูปที่ผมแนบจะมี Column เลขทะเบียน กับ ชื่อนามสกุลใช่ไหมครับ ผมอยากให้ column ต่อไปมีคำว่าตรวจโรคเป็น Link ด้วยนะครับ และพอกด Link เข้าไปจะเป็นการดึงข้อมูลคนไข้ในแถวนั้นออกมาอ่ะครับ
ต้องขอดูโค๊ดครับ อย่างนี้ไม่รู้จะเขียนโค๊ดบอกยังไงครับ
ตอบลบประมาณนี้ครับ
ตอบลบ<!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>
อันนี้กับ JQUERY มันต่างกันไหมงับ อันไหนง่ายกว่า
ตอบลบ