วันจันทร์ที่ 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
ผลลัพธ์

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

AngularJS Controllers

AngularJS Controller เป็นตัวควบคุม AngularJS Application โดยจะมีการสร้าง Function ที่มีชื่อเดียวกับ Controller เพื่อควบคุมการทำงานต่างๆ

 ตัวอย่าง

 <!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="control">
   Name: <input type="text" ng-model="name"><br>
   Address: <input type="text" ng-model="address"><br><br>

   My name is {{ name }} . I stay in {{ address}}

  </div>

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

 </body>
</html>

 อธิบายทีละส่วน
  • ประกาศขอบเขตที่ใช้ AngularJS ด้วยคำสั่ง ng-app ใน <html>
  • ประกาศ Controller ที่ชื่อ control ด้วยคำสั่ง ng-controller ใน <div> แสดงว่า ภายใน <div> ถูกควบคุมด้วย controller ที่ชื่อ control จะสังเกตุเห็นว่ามีการสร้าง function ที่มีชื่อเดียวกัน คือ control
  • ผูกค่าจาก <input> ด้วย ng-model
  • นำค่าที่ผูกไว้มาแสดง ด้วย {{ }} ซึ่งสามารถ แสดงผลร่วมกับข้อความธรรมดาได้ด้วย
  • ในส่วน function control มี $scope ทำหน้าที่เก็บข้อมูลเพื่อนำไปอ้างอิง ** ต้องใช้ $scope เท่านั้นนะ ห้ามตั้งชื่อเอง ** จากนั้นมีการอ้างอิง model ที่ชื่อ name และ address ซึ่ง Jame และ Bangkok เป็นค่า default ที่กำหนดให้กับ $scope

นอกจากนี้ ยังสามารถเรียกใช้ฟังก์ชั่นจากไฟล์ที่แยกต่างหากได้

ไฟล์ control.js

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

 จากนั้นทำการแก้ไขส่วนของ <script> จากเดิมที่มีการสร้าง function ให้แก้เป็น

 <script src="control.js"></script>


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

คำสั่ง AngularJS

คำสั่งใน AngularJS มีดังนี้
ng-app เป็นคำสั่งประกาศการเริ่มต้นใช้งาน AngularJS Application มักระบุไว้ที่ Root Element ซึ่งนั่นก็คือ <HTML> ก่อนเริ่มใช้ AngularJS จะต้องประกาศคำสั่งนี้ทุกครั้ง!!


ng-init หรือ data-ng-init (สำหรับ HTML5) เป็นคำสั่งประกาศ ข้อมูลเริ่มต้นของ AngularJS Application หรือการประกาศตัวแปรเริ่มต้นของ Application นั่นเอง


ng-model เป็นคำสั่งที่ผูกค่าที่ได้จาก Tag HTML ให้กับตัวแปร เช่น ค่าจาก <input> , <select> , <textarea>


ng-bind เป็นคำสั่งนำค่าของตัวแปรมาแสดงใน Tag HTML ที่กำหนด


ng-repeat เป็นคำสั่งทำซ้ำเพื่อดึงข้อมูลมาเก็บไว้ในตัวแปรที่กำหนด เหมือนการโคลนนิ่ง HTML element


ตัวอย่าง
<!DOCTYPE html>
<html data-ng-app="" data-ng-init="age=20">

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

 <body>

   <p>Name: <input type="text" ng-model="name"></p>
  <p>Your name is: {{ name}}</p>

   <p>You are {{ age }} years old</p>

   <div data-ng-init="animal=['cat','dog','bird']">
    <p data-ng-repeat="x in animal">
      {{ x }}
    </p>
  </div>

 </body>
</html>
เขียนโดย ที่ ไม่มีความคิดเห็น:

AngularJS Expressions

AngularJS Expressions เป็นการคำนวณค่าด้วย AngularJS โดยการคำนวณจะต้องเขียนอยู่ใน {{ }} หรือใช้คำสั่ง ng-bind สามารถกำหนด operators ได้ เช่น + - * /

ตัวอย่าง

<div ng-app="">  <p>My Calculate: {{ 2 + 2 + 2 }}</p></div>

หรือ ใช้คำสั่ง ng-bind

<div ng-app>  <p>My first expression: <span ng-bind="2 + 2 +2"></span></p></div>

ผลลัพธ์ที่ได้เหมือนกัน ดังนี้

My Calculate: 6

การกำหนดค่าคงเริ่มต้นให้กับตัวแปร ด้วยคำสั่ง ng-init

<div ng-app="" ng-init="x=10;y=1">  <p>Result: {{ x * y}}</p></div>

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

 Result: 10

การใช้งานกับ String 

<div ng-app="" ng-init="firstName='Jame';lastName='Mars'">  <p>My name is {{ fitstName + " " + lastname }}</p></div>

หรือใช้คำสั่ง ng-bind

<div ng-app="" ng-init="firstName='Jame';lastName='Mars'">  <p>My name is <span ng-bind="firstName + '  ' + lastName"></span></p></div>

จะเห็นว่าใช้ ; แยกระหว่างตัวแปรแต่ละตัว ในที่นี้คือ firstName กับ lastNameผลลัพธ์ที่ได้ ดังนี้

My name is Jame Mars

การใช้งานกับ Object

<div ng-app="" ng-init="cat={name:'kitty',color:'black'}">  <p>My animal is {{ cat.name + cat.color}}</p></div>

การประกาศ Object จะใช้ { } และใช้ , คั่นระหว่างแต่ละ Attribute ในการเรียกใช้งาน Object จะต้อง เรียกชื่อ Object ในที่นี้คือ cat จากนั้นตามด้วย attribute ซึ่งใน object cat ประกอบด้วย Attribute 2 ตัว คือ name และ color

การใช้งานกับ Arrays

<div ng-app="" ng-init="os=[iOS,Android,Windows phone]">  <p>My mobile OS is {{ os[0] }}</p></div>

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

My mobile OS is iOS

จะสังเกตเห็นว่า มีการประกาศ Array (เครื่องหมาย [ ]) ที่ชื่อ os เก็บสมาชิก 3 ตัว โดยสมาชิกตัวแรกใน Array มี index เป็น 0





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

AngularJS เบื้องต้น

AngularJS เป็น Java script framework ซึ่งสามารถแทรกคำสั่งเข้าไปใน Tag HTML ได้ 

ก่อนเริ่มใช้ Angular จะต้องทำการ Download จาก website https://angularjs.org/ จากนั้นนำไฟล์ .js มาเรียกใช้ผ่าน Tag <script src> หรือเรียกผ่านเว็บไซต์ ดังนี้
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>

คำสั่งเบื้องต้น ได้แก่
ng-app="" เป็นการกำหนดส่วนที่เป็น Angular Application ซึ่งนิยมใส่ใน tag ที่คลุม tag อื่นๆ 

ตัวอย่าง <html ng-app>  <div ng-app="">

ng-model="name" เป็นคำสั่งที่ผูกข้อมูลใน Tag HTML ไว้กับตัวแปร ในที่นี้คือ name นิยมใช้ใน <input>

ตัวอย่าง  <input type="text" ng-model="name">

ng-bind="name" เป็นคำสั่งที่นำค่าที่อิงจาก tag ที่กำหนด ng-model ที่ชื่อ name มาใส่

ตัวอย่าง <p ng-bind="name"></p> ผลลัพธ์คือ ข้อความที่พิมพ์ใน Textbox จะมาปรากฎใน <p></p>

ng-init="name='Dan'" เป็นคำสั่งที่ใช้กำหนดค่าเริ่มต้นให้กับตัวแปร ในที่กำหนดให้ตัวแปร name เก็บ String ซึ่ง Value คือ Dan

ตัวอย่าง <div ng-app="" ng-init="name='Dan'"> 

สามารถกำหนดค่าตัวแปรหลายตัวได้ เช่น 

<div ng-app="" ng-init="name='Dan';address='U.S.A'">

การนำมาใช้ เช่น 

<p ng-bind="name"></p>

หรือ

<p>{{ name }} </p>
เขียนโดย ที่ 1 ความคิดเห็น:
สมัครสมาชิก: บทความ (Atom)