AngularJS คืออะไร

    AngularJS คือ Javascript Framework ตัวหนึ่งที่พัฒนาโดย Google. AngularJS นั้นจะมีลักษณะพิเศษในการเรียกใช้งานโดยจะต้องเพิ่ม Attribute พิเศษให้กับ html เพื่อใช้งาน และยังเป็น Framework ที่ใช้จัดการหน้าจอในลักษณะ Single Page Applications (SPAs) หรือ การจัดทุกอย่างในหน้าจอเดียวอีกด้วย.

ขั้นตอนการเรียกใช้งาน
ขั้นตอนที่ 1 : จะต้องทำการประกาศการใช้งาน AngularJS นั้นไว้ในหน้าที่ใช้งานเสมอ เช่น อ้างอิงจาก CDN

หรือกรณีนำเข้าจากไฟล์ที่ดาวน์โหลดมาเอง

ขั้นตอนที่ 2 : ประกาศ ng-app directive ซึ่งเป็นการ ใช้ประกาศ AngularJS application.

...

ขั้นตอนที่ 3 : ประกาศ ng-model directive ซึ่งใช้ผูกค่าต่างๆกับ HTML เพื่อคอนโทร (input, select, textarea) ข้อมูล

Enter your Name: 

ขั้นตอนที่ 4 : ประกาศ ng-bind directive ซึ่งใช้ผูกข้อมูลเพื่อที่จะแสดงใน HTML

Hello !

ตัวอย่าง 1

    Name: 
    

ผลลัพธ์ที่ได้
จากโค้ดด้านบนเราได้สร้าง input text หนึ่งตัวโดยมี ng-model=”name” แล้วนำโมเดลมาแสดงที่ข้อความด้านล่างผูกโดยใช้ ng-bind="name" จะเห็นได้ว่าเมื่อเราพิมพ์ข้อมูลลงไปในช่อง text ข้อมูลก็จะไปโชว์ที่ข้อความด้านล่างทันที ซึ่งนี่เป็นความสามารถอีกอย่างหนึ่งของ Angularjs ที่มีความสำคัญอย่างมากในการทำ Application

ตัวอย่าง 2 : การใช้ {{ expression }} เพื่อแสดงผล

    Name: 
    {{name}}

ผลลัพธ์ที่ได้

ตัวอย่าง 3 : การใช้ modules และ controllers

Try to change the names.


First Name: 
Last Name: 
Full Name: {{firstName + " " + lastName}}

ผลลัพธ์ที่ได้

การประกาศ AngularJS Module จะประกาศดังนี้โดยอ้างอิง ng-app="myApp"

var app = angular.module('myApp', []);

ส่วนการประกาศ AngularJS controller จะประกาศดังนี้โดยอ้างอิง ng-controller="myCtrl"

app.controller('myCtrl', function($scope) {
    $scope.firstName= "Nop";
    $scope.lastName= "Mayoe";
});

About Nop

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.