วันจันทร์ที่ 12 มกราคม พ.ศ. 2558

AngularJS with HTML Forms

HTML Forms คือ การรวมกลุ่มของ input Element รูปแบบต่างๆ เช่น <input>, <select>, <button>, <textarea> เป็นต้น

 ตัวอย่าง

 <!DOCTYPE html>
<html ng-app="">

 <head>
   <script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.min.js"></script>
</head>

 <body>
  <div ng-controller="formController">
    <form>
      First Name:<br>
      <input type="text" ng-model="person.firstName"><br>
      Last Name:<br>
      <input type="text" ng-model="person.lastName"><br><br>
      <button ng-click="reset()">RESET</button>
    </form>
  </div>

 <script>
function formController ($scope) {
    $scope.default= {firstName:"", lastName:""};
    $scope.reset = function() {
        $scope.person= angular.copy($scope.default);
    };
}
</script>

 </body>
</html> 

 อธิบาย
  • สร้าง controller ชื่อ formController จะถูกเรียกใช้งานเมื่อเข้าใช้ <form> โดยตัวแปร default เก็บ Object ที่ประกอบด้วย firstName และ lastName
  • กำหนดให้ ตัวแปร reset เก็บฟังก์ชั่น ซึ่งภายในฟังก์ชั่น จะทำการ copy ข้อมูลจากตัวแปร default ไปไว้ใน person ซึ่งค่าใน default นั้น เป็น null 
  • ดึงค่าจากตัวแปร person มาแสดงใน <input> โดยใช้คำสั่ง person.firstName และ person.lastName ค่าที่ดึงมาจะเป็น null จึงเสมือนการเคลียร์ค่าใน <input>

เขียนโดย ที่ 3 ความคิดเห็น:

วันศุกร์ที่ 9 มกราคม พ.ศ. 2558

AngularJS Modules

AngularJS Modules เป็นบทความที่อธิบายการใช้งาน Module ใน AngularJS

 Module เป็นส่วนระบุ Application โดย Controller ทั้งหมดควรกำหนดไว้ใน Module เพราะจะทำให้โค้ดดูอ่านง่ายขึ้น

 ดังนั้น ในการสร้าง Application จึงควรมีไฟล์ Module และ Controller อย่างน้อย 1 ไฟล์ แยกไว้ เพื่อความสะดวกในการเรียกใช้งาน และลดความซ้ำซ้อนในการแก้ไข

 การเรียกใช้งาน Module จะประกาศใน ng-app="ชื่อโมดูล"

 ตัวอย่าง

 ไฟล์ index.html

 <!DOCTYPE html>
<html>

 <head>
  <script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.min.js"ฬ</script>
  <script src="myModule.js"></script>
  <script src="myCtrl.js"></script>
</head>

 <body>
  
  <div ng-app="myModule" ng-controller="myCtrl">
    <p><input type="text" ng-model="txt1">
    <input type="text" ng-model="txt2"><p>
    <p>Your text : {{ txt1+ " , " + txt2}}</p>
  </div>

 </body>
</html>

 อธิบายไฟล์ index.html
  • ng-app คือ การเรียกใช้ module ที่ชื่อ myModule
  • ng-coltroller คือ การเรียกใช้ controller ที่ชื่อ myCtrl
  • ng-model คือ การผูกค่าของ HTML element
  • {{ txt1+ " , " + txt2}} คือ การนำค่าในตัวแปร txt1 และ txt2 มาแสดง
ไฟล์ myModule.js มีรายละเอียด ดัวนี้

 var app = angular.module("myModule", []);
var mtxt1 = "Text1";
var mtxt2 = "Text2";

 อธิบายไฟล์ myModule.js
  • สร้าง Module ด้วยคำสั่ง angular.module("myModule",[]) โดย myModule คือ ชื่อ module     ส่วน [ ] เป็นพารามิเตอร์สำหรับใส่ module อื่น
  • มีการสร้างตัวแปร 2 ตัว คือ mtxt1 เก็บค่า Text1 และ mtxt2 เก็บค่า Text2


 ไฟล์ myCtrl.js มีรายละเอียด ดังนี้

 app.controller("myCtrl", function($scope) {
    $scope.txt1= mtxt1;
    $scope.txt2= mtxt2;
});

 อธิบายไฟล์ myCtrl.js
  • สร้าง Controller ด้วยคำสั่ง app.controller("myCtrl",function($scope){...} โดย myCtrl คือ ชื่อ Controller 
  • ภายในฟังก์ชั่นมีการระบุค่าเริ่มต้นให้ตัวแปร txt1 และ txt2 ที่ประกาศ โดยนำค่าจากตัวแปร mtxt1 และ mtxt2 ที่ประกาศใน module มาใช้
เขียนโดย ที่ ไม่มีความคิดเห็น:

วันพฤหัสบดีที่ 8 มกราคม พ.ศ. 2558

AngularJS HTML Events

HTML Events คือ เหตุการณ์ต่างๆที่เกิดขึ้นกับ HTML Element เช่น การคลิก การโฟกัส การเปลี่ยนแปลงค่า เป็นต้น

 ในบทความนี้จะอธิบายถึงการดักจับ "การคลิก" ปุ่มของผู้ใช้ โดยจะใช้ ng-click ใน <button>

 ตัวอย่าง

 <!DOCTYPE html>
<html ng-app="">

 <head>
  <script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.min.js"></script>
</head>

 <body>

   <div  ng-controller="myController">

     <p>{{ count }}<p>
    <p>
      <button ng-click="count = count + 1">+</button>
      <button ng-click="count = count - 1">-</button>
    </p>

     <p ng-show="mytext">Hellow World</p>
    <button ng-click="showText()">Show Text</button>
  </div>
<script>
function myController($scope) {
    $scope.count = 0;
    $scope.mytext=false; 

     $scope.showText=function(){
                        $scope.mytext = !$scope.mytext;
                    };   
}
</script> 

 </body>
</html>

 อธิบายขั้นตอนการทำงานได้ ดังนี้
  • กำหนด ng-app และ สร้าง Controller ชื่อ myController
  • กำหนดค่าเริ่มต้นให้ตัวแปร count มีค่าเท่ากับ 0 ตัวแปร mytext มีค่าเป็น false
  • เมื่อกดปุ่ม + จะทำการนำตัวแปร count มา +1 แล้วแสดงผล เช่นเดียวกัน ถ้ากดปุ่ม - จะนำ count มา -1
  • เมื่อกดปุ่ม Show Text จะกำหนดค่าให้กับ ืng-show โดยเรียกใช้ฟังก์ชั่น เพื่อแปลงค่า mytext เป็นค่าตรงกันข้าม ด้วยการกำหนดเครื่องหมาย ! หน้าตัวแปร mytext เช่น ถ้าเดิมเป็น false จะแปลงเป็น true

เขียนโดย ที่ ไม่มีความคิดเห็น:

วันพุธที่ 7 มกราคม พ.ศ. 2558

AngularJS HTML DOM

AngularJS สามารถสร้าง คำสั่ง ภายใน HTML DOM (หรือ Tag HTML) ได้ ซึ่งจะอธิบายในบทความนี้

  • ng-disabled ทำงานเช่นเดียวกับ attribute disabled ใน Element ต่างๆของ HTML เช่น button, input , checkbox


ตัวอย่าง

 <div ng-app="" ng-init="myControl=true">  

  <p>   <input type="text" ng-disabled="myControl">   

  <button ng-disabled="myControl">Submit</button>  

  </p>  

  <p>   <input type="checkbox" ng-model="myControl"/>Accept  </p>

</div> 

อธิบายว่า มีการกำหนดค่าเริ่มต้นให้กับ myControl ที่เป็นตัวแปรเริ่มต้นของ <div> ซึ่งค่าที่กำหนดเป็น true จากนั้นนำไปกำหนดให้กับ ng-disabled ซึ่งหากเป็น true จะเป็นการใช้ disabled ถ้า false คือ enabled

จะสังเกตุว่ามีการใช้ ng-model ใน checkbox แสดงว่ามีการดึงค่าจาก checkbox ทีเป็น boolean ส่งไปยังตัวแปร myControl ดังนั้น หาก checkbox ถูกเลือก myControl จะมีค่าเป็น true โดย checkbox จะถูกเลือกเป็น default อยู่แล้ว เพราะ myControl ถูกกำหนดค่าเริ่มต้นเป็น true ดังนั้นหากเราติ๊ก checkbox ออก จำทำให้ myControl มีค่าเป็น false นั่นคือ button และ textbox จะถูก Enabled
  • ng-show/ng-hide เป็นการซ่อนหรือแสดง Element นั้นๆ 
ตัวอย่าง

<div ng-app="" ng-init="checking=true"> 

 <p ng-show="checking">I am visible.</p>   

 <input type="checkbox" ng-model="checking">visible

</div> 

อธิบายว่า เมื่อทำการติ๊ก checkbox ออก ข้อความจะถูกซ่อน เพราะ ng-show เริ่มแรกมีค่าเป็น true นั่นคือ ข้อความจะถูกแสดงในตอนแรก

นอกจากนี้ ยังสามารถกำหนดเงื่อนไขในการใช้ ng-show/ng-hide ได้ด้วย ดังตัวอย่างด้านล่าง

ตัวอย่าง

 <div ng-app="">

<input type="text" ng-model="num">

<p>Show text if number > 9 </p>

 <p ng-hide="num > 9">Hello World!!</p>
<p ng-show="num > 9">Your number is {{ num }} </p>
</div> 


อธิบายว่า หากค่าที่ป้อนใน Textbox มากกว่า 9 จะซ่อนข้อความ "Hello World!!" และจะแสดงข้อความ "Your number is เลขที่ป้อน" แต่ถ้าป้อนตัวเลขน้อยกว่า 9 จะแสดงข้อความ "Hello World!!" แทน


เขียนโดย ที่ ไม่มีความคิดเห็น:

AngularJS Tables

บทความ Angular Tables จะเป็นการนำข้อมูลในที่ encode เป็น JSON มาทำการแสดงผลโดยใช้ AngularJS ซึ่งนำบทความ AngularJS HttpRequest มาต่อยอดรูปแบบการแสดงผลในลักษณะตารางโดยใช้ <table> ใน HTML

 ดังนั้น จึงขออ้างอิงไฟล์ในบทความ AngularJS HttpRequest ซึ่งได้แก่


  • Database ที่ชื่อ mobile มี Table ชื่อ Customer ประกอบด้วย field 2 ตัว คือ first_name และ last_name
  • dbcon.php
  • customer.php
ในส่วนของไฟล์ index.php นำมาแก้ไขซักเล็กน้อย ดังนี้

<!DOCTYPE html>
<html>
<head>
  <script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-controller="customersController" > 

 <table border='1px' cellpadding="10px" cellspacing='0px'> 
   <tr>
<td>FirstName</td>
<td>LastName</td>
   </tr>
   <tr ng-repeat="x in person">
<td>{{ x.first_name }}</td>
<td>{{ x.last_name }}</td>
   </tr>
 </table>

</div>
<script>
function customersController($scope,$http) {
  $http.get("http://127.0.0.1/angular/customer.php")
  .success(function(response) {$scope.person = response;});
}
</script>
</body>
</html>

ส่วนที่แก้ไข คือ อักษรสีแดง ทั้งหมด อธิบายได้ว่า มีการสร้างตารางขึ้นมา 1 ตาราง ประกอบด้วย 2 คอลัมน์ คือ FirstName และ LastName จากนั้น ทำการสร้างแถว โดยการสร้างจะใช้วิธีการวนลูปตามจำนวนข้อมูลใน Array ที่ชือ person เนื่องจาก property person นั้น เก็บข้อมูลที่ encode ด้วย JSON ทำให้ข้อมูลที่ดึงจาก Database อยู่ในรูปของ Array Object



เขียนโดย ที่ ไม่มีความคิดเห็น:

วันอังคารที่ 6 มกราคม พ.ศ. 2558

AngularJS HttpRequest

AngularJS HttpRequest เป็นการนำข้อมูลจาก Server มาแสดง โดยจะต้องมี Service ของ AngularJS นั่นคือ $http เพื่ออ่านข้อมูลที่ได้รับมาจาก Server ข้อมูลที่อ่านจะต้องถูก encode ด้วย JSON 

 เริ่มต้น

  1. สร้าง Database ที่ชื่อ mobile และสร้าง Table ชื่อ Customer ประกอบด้วย field 2 ตัว คือ first_name และ last_name
  2. สร้างไฟล์เพื่อเชื่อมต่อกับฐานข้อมูลแยกต่างหากเพื่อความสะดวกในการใช้งาน
  3. สร้างไฟล์ ชื่อ customer.php เพื่อ Query ข้อมูลจาก Database 
  4. สร้างไฟล์ ชื่อ index.php เพื่อนำข้อมูลที่ได้จาก Database มาแสดงผล
dbcon.php


 <?php

 date_default_timezone_set("Asia/Bangkok");
error_reporting(E_ALL ^ E_NOTICE);
$objConnect = mysql_connect("localhost","root","")or  die("Database ERROR".mysql_error());
$str_dbname = "mobile";

 mysql_select_db($str_dbname);

 $cs1 = "SET character_set_results=utf8";
mysql_query($cs1) or die('Error query: ' . mysql_error());

 $cs2 = "SET character_set_client = utf8";
mysql_query($cs2) or die('Error query: ' . mysql_error());

 $cs3 = "SET character_set_connection = utf8";
mysql_query($cs3) or die('Error query: ' . mysql_error());

 ?>
customer.php

 <?php

 include('dbcon.php');

 $sql1="SELECT first_name,last_name FROM customer";
$query1=mysql_query($sql1);

 while($rs1=mysql_fetch_assoc($query1)){
$result[]=$rs1;
}

 print(json_encode($result));

 ?>

 ผลลัพธ์

 [{"first_name":"Somchai","last_name":"Jaidee"},{"first_name":"Mana","last_name":"Mawai"}]

อธิบายในส่วน customer.php

   ทำการ Select ข้อมูล จากตาราง customer โดย mysql_fetch_assoc จะทำการดึงข้อมูลแต่ละ record มาเก็บไว้ใน array ซึ่งข้อมูลจะถูกดึงมาในรูปแบบของ key และ value จากนั้นทำการ encode ให้เห็น JSON ด้วย json_endode
index.php

 <!DOCTYPE html>
<html>

 <head>
  <script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.min.js"></script>
</head>

 <body>

 <div ng-app="" ng-controller="customersController" > 
  <p ng-repeat="x in person">
    Your name is  {{ x.first_name + ' ' + x.last_name }}
  </p>
</div>
<script>
function customersController($scope,$http) {
  $http.get("http://127.0.0.1/angular/customer.php")
  .success(function(response) {$scope.person = response;});
}
</script>

 </body>
</html>

 อธิบายในส่วนของ index.php 
  • มีการสร้าง controller ที่ชื่อ customersController ขึ้นมาเรียกใช้งาน function
  • ภายในฟังก์ชั่นจะใช้งาน $scope เพื่อเก็บข้อมูล เป็น application object และ $http ที่เป็น service หลักสำหรับอ่านข้อมูลจาก server เป็น XMLHttpRequest object
  • $http.get() ทำการอ่านข้อมูลจากไฟล์ที่อยู่ตาม URL ที่กำหนด
  • ถ้าอ่านไฟล์สำเร็จ controller จะสร้าง property ที่ชื่อ person ไว้ใน $scope
  • มีการเรียกใช้โดยสร้างตัวแปร x ขึ้นมาเพื่อวนลูปดึงข้อมูลจาก property ใน $scope ที่ชื่อ person มาแสดง ซึ่งการแสดงผลจะใช้วิธีระบุชื่อ key ของ object เนื่องจากผลลัพธ์จากการใช้ json encode ทำให้ได้ข้อมูลในรูปแบบ Array Object

 ผลลัพธ์ที่ได้



เขียนโดย ที่ ไม่มีความคิดเห็น:

วันจันทร์ที่ 5 มกราคม พ.ศ. 2558

AngularJS Filters

AngularJS Filters สามารถเพิ่มไปใน Expression เพื่อนำไปใช้เปลี่ยนแปลงข้อมูล โดย Expression ก็คือเครื่องหมาย {{ }} นั่นเอง 

Filter สามารถแบ่งการใช้งานได้ ดังนี้
  • currency เป็นการใส่สัญลักษณ์ $
  • filter เป็นการกรองข้อมูล โดยเลือกข้อมูลใน array จากค่าที่กำหนด
  • lowercase คือการแปลงเป็นตัวอักษรพิมพ์เล็ก
  • uppercase คือการแปลงเป็นตัวอักษรพิมพ์ใหญ่
  • orderBy คือการจัดเรียงข้อมูลใน array จากน้อยไปมาก

ตัวอย่าง 

<!DOCTYPE html>
<html ng-app="">

<head>
  <script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.min.js"></script>
</head>

<body ng-controller="control">
  <div ng-init="phone=[
{brand:'iPhone4',os:'iOS'},
{brand:'Samsung',os:'Android'},
{brand:'Acer',os:'Android'},
{brand:'Huawei',os:'fireFoxOS'}]">


    <input type="text" ng-model="name">
    <p>Your name in uppercase is '{{ name | uppercase }}'</p>
    <p>Your name in lowercase is '{{ name | lowercase}}'</p>
    <p>Your money {{ 20 | currency }} </p>

<hr>

    Your mobile phone :<input type="text" ng-model="mobile">
    <p data-ng-repeat="x in phone | filter:mobile | orderBy: 'os'">
      {{ x.brand + ' : ' + x.os}}
    </p>
</div>

<script>
function control($scope){
 $scope.name="Jame"
}
</script>

</body>
</html>

จากตัวอย่าง อธิบายได้ดังนี้
  • มีการสร้าง Controller ที่ชื่อ control เพื่อเรียกใช้งาน function control
  • มีการประกาศข้อมูลเริ่มต้นด้วย ng-init ชื่อ phone โดยข้อมูลมีลักษณะเป็น Array Object
  • มีการกำหนดค่า Default ให้กับ <input> ใน model ที่ชื่อ name 
  • นำค่าที่ป้อนใน <input> ที่ model ชื่อ name ไปแปลง เป็นตัวพิมพ์ใหญ่ และพิมพ์เล็กตามลำดับ
  • กำหนด $ ให้กับ 20
  • มีการวนลูปเพื่อแสดงผลข้อมูลใน array ที่ชื่อ phone โดยเรียงตาม os
  • มีการกำหนดให้นำค่าจาก <input> ที่ใช้ model ชื่อ mobile มาเลือกข้อมูลใน array ที่ชื่อ phone เพื่อนำไปแสดงผล โดยการเลือกนั้น ไม่ได้เฉพาะเจาะจงไปที่ brand หรือ os
ผลลัพธ์

เขียนโดย ที่ ไม่มีความคิดเห็น:
สมัครสมาชิก: บทความ (Atom)