Showing posts with label AngularJS. Show all posts
Showing posts with label AngularJS. Show all posts

Angular module include module

module ใน Angular เราสามารถไปเรียก module อื่นๆ ได้

ตัวอย่าง

HomeModule.js
1
2
3
4
5
var app = angular.module('HomeModule', []);

app.controller('HomeController', function($scope) {
 $scope.name = 'AngularJS';
});

จากนั้นเขียน module ที่ต้องการจะเรียก module

app.js
1
var app = angular.module('A02', ['HomeModule']);

จากนั้นก็เขียน html ในการเรียก angular ปกติ แต่จะต้องใส่ script ทุกไฟล์ที่ module เรียกไว้ให้ครบด้วยนะค่ะ

02.html
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<!DOCTYPE html>
<html ng-app="A02">
<head>
 <title>02</title>
 <script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>
 <script src="app/02/app.js" type="text/javascript" charset="utf-8"></script>
 <script src="app/02/HomeModule.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
 <div ng-controller="HomeController">
  <p>{{ name }}</p>
 </div>
</body>
</html>

แค่นี้ก็สามารถเรียกใช้เป็น module ได้

จบ.
Posted by at No comments:
Labels: , ,

Angular factory

คราวที่แล้วเราสร้าง service ไปแล้ว คราวนี้จะมาดูกันว่านอกจาก service แล้ว เราสามารถเขียนเป็น factory ก็ได้เหมือนกัน

app.js
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
var app = angular.module('A05', []);

app.factory('CalculatorFactory', function() {
 var currency = 'US$';

 function resultWithCurrency(value) {
  return currency + ' ' + value;
 }

 return {
  name: 'Calculator Factory',
  calculate: function(value) {
   return resultWithCurrency(value * value);
  }
 }
});

app.controller('FactoryController', function($scope, CalculatorFactory) {
 $scope.name = CalculatorFactory.name;
 $scope.calculate = function() {
  console.log(CalculatorFactory.calculate(10));
 }
});

คราวที่แล้วเราเขียน function เดียวกันแต่ใช้ผ่าน service ซึ่งไม่มีการ return อะไร แต่ว่าผูกค่าหรือ function ไว้กับ this แต่ถ้าเป็น factory จะมีการ return ค่า

file.html

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html ng-app="A05">
<head>
 <title>05</title>
 <script src="js/angular.min.js" type="text/javascript" charset="utf-8" ></script>
 <script src="app/05/app.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div ng-controller="ConstantController">
 <p><b>Constant</b>: {{ viewPath }}</p>
</div>
<hr>

<div ng-controller="FactoryController">
 <p><b>Factory</b>: {{ name }}</p>
 <p><button ng-click="calculate()">{{ name }}</button></p>
</div>
</body>
</html>

แต่ตอนที่เรียกใช้ ไม่ว่าจะเป็น service หรือ controller จะเรียกไม่ต่างกัน

จบ.

Reference:
AngularJS: Service vs provider vs factory
Posted by at No comments:
Labels: , ,

Angular service

คราวที่แล้วเราเริ่มต้นด้วย module กับ controller ไปแล้ว ถ้าเราจะเขียนให้สวยก็เขียนใส่ service หรือ factory สำหรับการเรียกใช้ในหลายๆ controller (คิดว่าน่าจะเหมือนกับ MVC)

ตัวอย่างการเขียน service และการเรียกใช้ผ่าน controller

app.js

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
var app = angular.module('A05', []);

app.service('CalculatorService', function() {
 var currency = 'US$';

 function resultWithCurrency(value) {
  return currency + ' ' + value;
 }

 this.name = 'Calculator Factory';
 this.calculate = function(value) {
  return resultWithCurrency(value * value);
 };
});

app.controller('ServiceController',
function($scope, CalculatorService) {
 $scope.name = CalculatorService.name;
 $scope.calculate = function() {
  console.log(CalculatorService.calculate(10));
 }
});

ใน service เราผูกค่า หรือ function ที่เราต้องใช้ไปกับตัว service เอง (this) แล้วค่อยให้ controller มาเรียกใช้ service ไปอีกที โดยจะต้องผ่านตัวแปร $scope เพื่อให้หน้า client สามารถเห็นค่าเหล่านี้

file.html

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<!DOCTYPE html>
<html ng-app="A05">
<head>
 <title>05</title>
 <script src="js/angular.min.js" type="text/javascript" charset="utf-8" ></script>
 <script src="app/05/app.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div ng-controller="ServiceController">
 <p><b>Service</b>: {{ name }}</p>
 <p><button ng-click="calculate()">{{ name }}</button></p>
</div>
</body>
</html>

ในหน้าเวป เราก็เรียกใช้ controller เหมือนปกติ

จบ.
Posted by at No comments:
Labels: , ,

Angular module and controller

function หรือ global API คือคำสั่งที่เรียกผ่าน object angular ทั้งหมด ซึ่งมีด้วยกันหลายคำสั่ง ซึ่งตามหลักที่ดี ก็คือเขียนเป็น module และใน module แยกเป็นแต่ละ controller เพื่อใช้เรียก service หรือ factory อีกที (ส่วนตัวเข้าใจว่า service จะเป็นการสร้าง object service ใหม่ แต่ factory เป็นการเรียก service นั้นๆ โดยไม่สร้างใหม่)

ซึ่งเราจะแยกไฟล์ AngularJS แยกไว้ต่างหาก และในไฟล์ HTML ก็จะ include script เข้ามาโดยผ่าน directive ng-app และ ng-controller

 ตัวอย่างไฟล์ AngularJS ที่เขียนเป็น module และการเรียนใช้ controller ภายใน module

app.js
1
2
3
4
5
6
// create angular model A02
var app = angular.module('A02', []);

app.controller('HomeController', function($scope) {
 $scope.name = 'AngularJS';
});


02.html
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<!DOCTYPE html>
<html ng-app="A02">
<head>
 <title>02</title>
 <script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>
 <script src="app/02/app.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
 <div ng-controller="HomeController">
  <p>{{ name }}</p>
 </div>
</body>
</html>

อันนี้ถือเป็นการเริ่มทำความคุ้นเคยกับการเขียน Angular ซึ่งจะเห็นว่า เราก็จะเขียน Angular function ต่างๆ ไว้ในไฟล์แยกเหมือน javascript ตัวหนึ่ง แล้วเรียกใช้ เพียงแต่การเรียกใช้เราจะเรียกผ่าน Angular directive ต่างๆ

จบ.
Posted by at No comments:
Labels: , ,

Basic Angular Directive

นอกจาก Angular Expression แล้ว เรายังสามารถใช้ Angular Directive สำหรับการผูกข้อมูล (binding) โดย directive ที่ใช้ทั่วไป มีดังนี้

ng-init

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


1
2
3
4
5
6
7
<div ng-init="price=50;qty=25">

    <p>Amount: {{ price * qty }}</p>
    <p>Amount: {{ price * qty | currency }}</p>
    <p>Amount: {{ price * qty | currency:'THB' }}</p>

</div>

ตัวอย่างจะเป็นการกำหนดค่าตัวแปร price กับ qty

ng-model

เป็นการผูกค่าตัวแปรกับ input tag ใน HTML

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

ในตัวอย่างเป็นการผูก input text กับตัวแปรชื่อ name ซึ่งในการผูกค่า อาจจะใช้เป็นตัวแปรแบบ primitive หรือว่า object ก็ได้

หรืออีกตัวอย่างหนึ่ง เป็นการผูกค่าตัวแปร like กับ input radio

1
2
3
4
5
<div ng-init="like='Yes'">
    <input type="radio" value="Yes" ng-model="like">I like
    <input type="radio" value="No" ng-model="like">I don't like
    <p>Answer: {{ like }}</p>
</div>


หรือ ผูกค่ากับ select tag

1
2
3
4
5
6
7
<select ng-model="food">
    <option value="Rice">Rice</option>
    <option value="Noodle">Noodle</option>
    <option value="Soup">Soup</option>
</select>

Your Order: {{ food }}

ng-click

เนื่องจากใน javascript ตัวแปรนอกจากจะเก็บค่าต่างๆ หรือว่าใช้เก็บเป็น object ของ property (ซึ่งก็เป็นการเก็บค่าอยู่ดี) ได้แล้ว ยังสามารถกำหนดให้ตัวแปรมีค่าเก็บ function ได้ด้วย เสมือนกับ function เป็นค่าๆ หนึ่ง ดังนั้นเราจึงใช้คุณสมบัตินี้มากำหนดพฤติกรรมของการทำงานในเอกสาร HTML ได้

ตัวอย่างกำหนดการคำนวณให้กับปุ่ม


1
2
<button ng-click="counter=counter+1">Count</button>
<p>Counter: {{ counter }}</p>

ng-if

เป็น directive ที่ใช้กำหนดเงื่อนใขให้กับ HTML

ตัวอย่างกำหนดให้แสดงหรือไม่แสดงข้อความ (รวมถึงสีพื้น)

1
2
3
4
5
6
<div ng-init="show=true">
    <p ng-if="show" style="background-color: red;">Red</p>
    <p ng-if="!show" style="background-color: green;">Green</p>

    <button ng-click="show=!show">Toggle</button>
</div>

นอกจากนี้ยังมี

  • ng-repeat
  • ng-app
  • ng-controller


พื้นฐานของ Angular Directive ก็จะมีประมาณนี้ เอาไว้ค่อยมาต่อกันนะค่ะ

Reference:
ng Directive
Posted by at No comments:
Labels: , ,

Angular Expression

Angular สามารถเขียน code ลงไปได้ 2 รูปแบบ คือ Angular Expression และ Angular Directive ซึ่งสำหรับ Angular Expression จะมีลักษณะคล้ายๆ การเขียน JavaScript ลงไปยัง {{ script }}

ซึ่งตัวอย่างที่สามารถเขียนลงไปได้ก็อย่างเช่น

  • {{ 'Hello World' }} - แสดงข้อความ
  • {{ 1 + 2 }} - คำนวณค่าคงที่
  • {{ a + b }} - คำนวณค่าจากตัวแปร
  • {{ user.name }} - แสดงค่า property จาก object
  • {{ items[index] }} - แสดงค่าจาก array
แต่จะแตกต่างจาก JavaScript คือ
  • JavaScript อ้างอิงจาก ตัวแปร window แต่ Angular จะใช้ $scope object
  • ตัวแปรไหนที่ไม่อยู่ใน scope หรือไม่เคยกำหนดค่ามาก่อน Angular จะใส่ให้เป็น null หรือเริ่มต้น เช่น ถ้าเป็นตัวเลขก็จะใส่เป็นค่า 0 เป็นต้น
  • ไม่สามารถใส่ Control Flow ได้ เช่น loop, if
  • ไม่สามารถสร้าง function ได้
ไว้โอกาสหน้าจะมาต่อกันเรื่อง Directive

Reference:
Posted by at No comments:
Labels: , ,

AngularJS 101

AngularJS เป็น lib ของ javascript ที่จะช่วยให้การเขียนได้ง่ายขึ้น (เข้าใจว่า) ดังนั้นการเขียน Angular JS จึงเหมือน javascript ทั่วๆ ไป แต่อาจจะมีการรูปแบบการเขียน (syntax) ที่แตกต่างออกไป

การจะเริ่มเขียน AngularJS สามารถเขียนได้บนไฟล์ .html ทั่วๆ ไป โดยเพิ่มการอ้างอิง AngularJS lib และใส่ module เข้าไป


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<!DOCTYPE html>
<html ng-app>
    <head>
        <meta charset="utf-8">
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js" type="text/javascript" charset="utf-8"></script>
        <title>test</title>
    </head>
    <body>
        {{ 'Hello World '}}
    </body>
</html>

ส่วนที่เพิ่มเข้าไปคือ "ng-app" ใน html tag และ script ที่อ้างไปยัง AngularJS lib เพียงเท่านี้ก็เป็นอันเสร็จ คือไฟล์ html นี้สามารถเพิ่ม code ส่วนที่เป็น Angular เข้าไปได้แล้ว ซึ่งในตัวอย่างจะเป็นการแสดงข้อความ 'Hello World' ผ่านทาง AngularJS

เอาหอมปากหอมคอแค่นี้ก่อน ไว้มาดูตอนต่อไป


Posted by at No comments:
Labels: , ,
Subscribe to: Posts (Atom)