Mad IT: September 2016

Angular module include module

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

ตัวอย่าง

HomeModule.js

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

<!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 ได้

จบ.

Angular factory

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

app.js

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

<!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

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

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

app.js

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

<!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 เหมือนปกติ

จบ.

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

// create angular model A02
var app = angular.module('A02', []);

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

02.html

<!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 ต่างๆ

จบ.

Angular module include module

Angular factory

Angular service

Angular module and controller