AngularJS part:2 แนะนำโครงสร้าง

มองคร่าวๆ AngularJS จะประกอบไปด้วย app, controller, directive, service ซึ่งสามารถระบุขอบข่ายของมันได้ดังนี้

  1. app : คือ ตัวหลักที่จะประกอบด้วย controller, directive, service อีกที และรวมไปถึง component อื่นๆ เช่น dateTimePicker เป็นต้น
  2. controller : คือ ส่วนที่เก็บตัวแปรร่วม $scope รวมถึง function ต่างๆตาม event
  3. directive : คือ ส่วนแสดงผล (ซึ่งสามารถ มี controller ภายในนี้ได้ ซึ่งมีประโยชน์มากในกรณีต้องการแยก element เพื่อ re-usable)
  4. service : คือ ส่วนของ function (ส่วนนี้จะมีประโยชน์มากถ้าต้องใช้บ่อยๆในหลายๆ directive)
  5. 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>
  1. script src ไปยัง AngularJS file ที่ download มาก่อนหน้านี้ (part 1)
  2. ng-app คือการระบุ Angular app ที่สร้างขึ้นมา แต่การกำหนดลักษณะนี้ จะมีเงื่อนไขคือ จะมีได้เพียง app เดียวใน page นี้ (ถ้าต้องการใช้มากกว่า 1app จะต้องใช้อีกวิธี ซึ่งจะอธิบายในโอกาสต่อไป)
  3. controller สามารถใช้กี่ครั้งก็ได้ แต่จะสังเกตุได้ว่า $scope จะเป็นคนล่ะชุดกัน (ซึ่งเป็นข้อดีในกรณีที่คุณต้องใช้ form หลายๆชุดโดยไม่ต้องเขียนตัวแปรให้ครบทุกตัว )

ในครั้งถัดไป ผมจะเสนอ การแยกโครงสร้างเพื่อให้สามารถใช้ซ้ำๆได้โดยไม่ต้องเขียน script ขึ้นมาใหม่ ซึ่งจะช่วยลดงานในการเขียนโปรแกรม