ทำความรู้จักกับ AngularJS แบบ Fast Start


ทำความรู้จักกับ AngularJS แบบ Fast Start

Programmer Thailand Blog พบบทความข่าวสารดีๆ เขียนและแชร์ได้ทันที

beta version

ทำความรู้จักกับ 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>

 

มานพ กองอุ่น

มานพ กองอุ่น
admin

  • 2 เพื่อน
  • 13 ผู้ติดตาม
  • 766 โพสต์