Mad IT: 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 ต่างๆ

จบ.

Mad IT

Angular module and controller

No comments:

Post a Comment