มองคร่าวๆ AngularJS จะประกอบไปด้วย app, controller, directive, service ซึ่งสามารถระบุขอบข่ายของมันได้ดังนี้
- app : คือ ตัวหลักที่จะประกอบด้วย controller, directive, service อีกที และรวมไปถึง component อื่นๆ เช่น dateTimePicker เป็นต้น
- controller : คือ ส่วนที่เก็บตัวแปรร่วม $scope รวมถึง function ต่างๆตาม event
- directive : คือ ส่วนแสดงผล (ซึ่งสามารถ มี controller ภายในนี้ได้ ซึ่งมีประโยชน์มากในกรณีต้องการแยก element เพื่อ re-usable)
- service : คือ ส่วนของ function (ส่วนนี้จะมีประโยชน์มากถ้าต้องใช้บ่อยๆในหลายๆ directive)
- component : อันนี้คล้ายๆ directive ( ตาม document ของ angular https://docs.angularjs.org/tutorial/step_03 )
คราวนี้มาลองเขียน code ง่ายๆเพื่อดูการใช้งานของมันดีกว่า testAngular.html
<!DOCTYPE html>
<html lang="en-US">
<head>
<script src="../../angular-1.8.0/angular.js"></script>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="myCtrl">
<div>
<label>value1</label>
<input type='number' data-ng-model='val1' data-ng-value='val1' />
</div>
<div>
<label>value2</label>
<input type='number' data-ng-model='val2' data-ng-value='val2' />
</div>
<div>
{{val1}} + {{val2}} = {{ val1 + val2 }}
</div>
</div>
<div ng-controller="myCtrl">
<div>
<label>value1</label>
<input type='number' data-ng-model='val1' data-ng-value='val1' />
</div>
<div>
<label>value2</label>
<input type='number' data-ng-model='val2' data-ng-value='val2' />
</div>
<div>
{{val1}} + {{val2}} = {{ val1 + val2 }}
</div>
<div>
<my-directive></my-directive>
</div>
</div>
</div>
</body>
</html>
<script>
var myapp = angular.module('myApp', []);
myapp.controller('myCtrl', function($scope) {
$scope.val1 = 1;
$scope.val2 = 2;
});
myapp.directive('myDirective', function() {
return {
template: ' this text is form directive {{val1}} {{val2}} {{ val1 + val2 }}'
};
});
</script>- script src ไปยัง AngularJS file ที่ download มาก่อนหน้านี้ (part 1)
- ng-app คือการระบุ Angular app ที่สร้างขึ้นมา แต่การกำหนดลักษณะนี้ จะมีเงื่อนไขคือ จะมีได้เพียง app เดียวใน page นี้ (ถ้าต้องการใช้มากกว่า 1app จะต้องใช้อีกวิธี ซึ่งจะอธิบายในโอกาสต่อไป)
- controller สามารถใช้กี่ครั้งก็ได้ แต่จะสังเกตุได้ว่า $scope จะเป็นคนล่ะชุดกัน (ซึ่งเป็นข้อดีในกรณีที่คุณต้องใช้ form หลายๆชุดโดยไม่ต้องเขียนตัวแปรให้ครบทุกตัว )
ในครั้งถัดไป ผมจะเสนอ การแยกโครงสร้างเพื่อให้สามารถใช้ซ้ำๆได้โดยไม่ต้องเขียน script ขึ้นมาใหม่ ซึ่งจะช่วยลดงานในการเขียนโปรแกรม