การพัฒนา
AngularJS เบื้องต้น
1.AngularJS
เป็น MVC Framework ที่ถูกพัฒนาโดย
Google ซึ่งในตัว Framework จะใช้ภาษา Java
Script
เนื่องจาก HTML เหมาะสำหรับในการสร้างเอกสารที่มีการนำเสนอข้อมูลแบบตายตัว (Static
documents) แต่ในการสร้างเอกสารที่สามารถตอบสนองระหว่างผู้ใช้กับเว็บไซต์ได้ที่มีรูปแบบของเว็บแอพพลิเคชัน (Dynamic
documents) โดยใช้
HTML เพียงอย่างเดียวนั้นไม่ค่อยสะดวกเท่าใดนัก
ซึ่ง AngularJS ช่วยเพิ่มความสามารถของ HTML ในการพัฒนาแอพพลิเคชัน ทำให้สภาพแวดล้อมในการพัฒนาทำได้รวดเร็ว ตัวโปรแกรมอ่านได้ง่าย และการแสดงผลลัพธ์ที่มีลักษณะพิเศษจากเว็บไซต์ทั่วไป
ซึ่ง AngularJS ช่วยเพิ่มความสามารถของ HTML ในการพัฒนาแอพพลิเคชัน ทำให้สภาพแวดล้อมในการพัฒนาทำได้รวดเร็ว ตัวโปรแกรมอ่านได้ง่าย และการแสดงผลลัพธ์ที่มีลักษณะพิเศษจากเว็บไซต์ทั่วไป
2.สภาพแวดล้อมในการพัฒนา
ไปยังเว็บ http://angularjs.org/ ทำการดาวน์โหลด
AngularJs มาติดตั้งไว้บนเครื่องคอมพิวเตอร์
ให้ดาวน์โหลดไฟล์ angular.min.js หรือ angular.js หรือจะดาวน์โหลดเป็นแบบ
zip ที่มีไฟล์อื่นๆ ที่จะสามารถนำไปใช้ในการพัฒนา AngularJS ขั้นสูงต่อไป
ในที่นี้เลือกจากดาวน์โหลดไฟล์ angular.min.js
มาเพียงไฟล์เดียว
หลังจากที่ได้ดาวน์โหลดมาแล้วในที่นี้
ได้นำเอาไฟล์ angular.min.js มาเก็บไว้ในไดเรกทอรี js
3.ตัวอย่างโปรแกรม
3.1 การแสดงผลโดยใช้ Expression
สร้างไฟล์ expression.html
1. <!—- expression.html -->
2. <!doctype html>
3. <html ng-app>
4. <head>
5. <script src="js/angular.min.js"></script>
6. </head>
7. <body>
8. 1+2={{1+2}}
9. </body>
10. </html>
|
หากไม่ได้ดาวน์โหลด แต่เครื่องคอมพิวเตอร์เราเชื่อมต่ออินเตอร์เน็ต
สามารถอ้าง
<script src=" http://code.angularjs.org/1.2.12/angular.min.js "></script>
|
ผลลัพธ์ที่ได้
1+2=3
|
3.2 การรับข้อมูลและแสดงผล
1. <!-— basic.html -->
2. <!doctype html>
3. <html ng-app>
4. <head>
5. <script src=" js/angular.min.js "></script>
6. </head>
7. <body>
8. <div>
9. <label>Name:</label>
10. <input type="text" ng-model="yourName" placeholder="Enter a name here">
11. <hr>
12. <h1>Hello {{yourName}}!</h1>
13. </div>
14. </body>
15. </html>
|
ผลลัพธ์ที่ได้
3.3 การสร้างโมดูล
1. <!-- module.html -->
2. <html ng-app="myApp">
3. <head>
4. <script
src="js/angular.min.js"></script>
5. </head>
6. <body
ng-controller="HelloController">
7. Hello
{{target}}
8. </body>
9. <script
type="text/javascript">
10. var
myApp = angular.module('myApp',[])
11. myApp.controller('HelloController',
function($scope){
12. $scope.target
= 'world'
13. });
14. </script>
15. </html>
|
ผลลัพธ์ที่ได้
