ทำความรู้จักกับ AngularJS แบบ Fast Start
AngularJS คืออะไร
AngularJS คือ ภาษา JavaScript ที่ทำงานฝั่ง Client ถูกพัฒนาขึ้นโดย Google
ตัวอย่าง
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
</head>
<body>
<script type="text/javascript" src="angular.min.js"></script>
</body>
</html>
โครงสร้างของ AngularJS
Directives
Directive เป็นตัวกำหนดใน Tag HTML เพื่อเรียกใช้งาน Angular ในการ run หรือ อ้างอิงคำสั่ง JavaSctipt
ตัวอย่างเช่น
index.html
<!DOCTYPE html>
<html>
<body ng-controller="SiteController">
...
</body>
</html>
app.js
function SiteController(){
alert('Hello World');
}
Modules
- เป็นชิ้นส่วนของ Angular application
- ทำให้ง่ายต่อการ maintain, test และ read
- เป็นที่กำหนดคุณลักษณะของ app
- โมดูลสามารถเรียกใช้งานโมดูลอื่นๆ ได้
ตัวอย่าง app.js
var app = angular.module('testmodule',[]);
angular = AngularJS
testmodule = Application Name
[] = Dependencies
เมื่อนำไปใส่ในไฟล์
<!DOCTYPE html>
<html ng-app="testmodule">
<head>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
</head>
<body>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</body>
</html>
จะสังเกตเห็นว่าบริเวณ <html> ได้มีการเพิ่ม ng-app="testmodule" ซึ่งจะถูก run ตอนที่โหลดหน้า Webpage
Expressions
Expression หรือการแสดงผลออกทางหน้าจอ เช่น
การดำเนินการกับตัวเลข
<p>
Test {{5 + 3}}
</p>
จะได้
<p>
Test 8
</p>
การดำเนินการกับข้อความ
<p>
{{"hello" + " world"}}
</p>
จะได้
<p>
hello world
</p>
สามารถดูเพิ่มเติมได้ที่ http://docs.angularjs.org/guide/expression
Controller
Controller เป็นศูนย์รวมของการกำหนดลักษณะการทำงานของ App โดยกำหนด function และ value ต่างๆ
ตัวอย่าง app.js
(function(){
var app = angular.module('testmodule',[ ]);
app.controller('SiteController',function(){
this.car = vios;
});
var vios = {
name: 'Toyota Vios',
brand: 'Toyota',
description: '.....',
}
})();
เมื่อนำไปแสดงผลจะได้ดังนี้
<body>
<div ng-controller="SiteController as site">
<h1>{{site.car.name}}</h1>
<h2>{{site.car.brand}}</h2>
<p>{{site.car.description}}</p>
</div>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</body>
