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

wave

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

มานพ กองอุ่น 25 มิ.ย. 2015 02:02:52 7,905

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>

 

ความคิดเห็น