ตัวอย่างโค้ดและการทำงาน นี้เป้นตัวอย่างสำหรับการทดสอบ
ลำดับการทำงาน ของ javascript แบบปกติ และส่วนที่ใช้งาน
angularjs เนื้อหาจะไม่อธิบายอะไรมาก แต่มีความสำคัญ เพื่อ
ให้เราเข้าใจ เส้นทางการทำงานของโปรแกรม
ไฟล์ app.js
console.log("1");
angular.module('app',[])
.controller('appController',function($scope){
console.log("2");
$scope.greeting="Hello World";
});
console.log("3");
ไฟล์ index.html
กรณีแรก มีการเรียกใช้งาน ฟังก์ชั่น angular.bootstrap
เป็นการเรียกใช้งาน angularjs แบบกำหนดเอง
โดยไม่ได้ กำหนด ng-app ในแท็กเปิด html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.17/angular.min.js"></script>
<!--
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.17/angular-resource.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.17/angular-route.min.js"></script>
-->
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css" />
<script type="text/javascript">
console.log(0);
</script>
<script src="app.js"></script>
<title>My Learn AngularJs 7</title>
<style type="text/css">
</style>
</head>
<body ng-controller="appController">
<br>
<div class="container">
{{greeting}}
</div>
<script type="text/javascript">
angular.element(document).ready(function() {
console.log(7);
});
console.log(4);
angular.bootstrap(document,['app'],[]);
console.log(5);
</script>
</body>
</html>
<script type="text/javascript">
console.log(6);
</script>
ผลลัพธ์ใน console
0 (index):12 1 app.js:1 3 app.js:7 4 (index):32 2 app.js:4 5 (index):34 6 (index):39 7 (index):30
จะเห็นว่า การทำงานของ javascript ของคำสั่งที่ไม่ได้ใช้งาน angularjs
0 (index):12
จะทำงานเรียงจากบนลงล่าง ตามลำดับ
ถ้ามีการ include ไฟล์ js การทำงานก็จะเข้าไปทำงานในไฟล์นั้นก่อน
1 app.js:1
3 app.js:7
ค่าด้านบนคือการที่โปรแกรมวิ่งเข้าไปทำงานในไฟล์ js ที่ include แต่ยังไม่ทำงานใน
ส่วนของ angularjs
และออกมาทำงานด้านนอกไฟล์ js
4 (index):32
และเมื่อถึงบรรทัดที่ มีการเรียกใช้งาน angular.bootstrap โปรแกรมจึงเข้าไป
ทำงานในไฟล์ js ในส่วนของ angularjs
2 app.js:4
และออกมาทำงานด้านนอกไฟล์ js ของส่วน angularjs
5 (index):34
6 (index):39
และส่วนสุดท้าย ที่ทำงานท้ายสุดคือ ฟังก์ชั่น
angular.element(document).ready(function() {
console.log(7);
});
ส่วนนี้จะเป็นการตรวจสอบว่า มีการ rendeed หน้าเพจ เสร็จเรียบร้อย
แล้วก่อนถึงจะทำงาน
7 (index):30
มาดูส่วนทำงานรูปแบบที่สอง
ไฟล์ index.html
กรณีที่ 2 ไม่มีการเรียกใช้งาน ฟังก์ชั่น angular.bootstrap (comment ปิดไว้)
และกำหนด ng-app ในแท็กเปิด html
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.17/angular.min.js"></script>
<!--
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.17/angular-resource.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.17/angular-route.min.js"></script>
-->
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css" />
<script type="text/javascript">
console.log(0);
</script>
<script src="app.js"></script>
<title>My Learn AngularJs 7</title>
<style type="text/css">
</style>
</head>
<body ng-controller="appController">
<br>
<div class="container">
{{greeting}}
</div>
<script type="text/javascript">
angular.element(document).ready(function() {
console.log(7);
});
console.log(4);
// angular.bootstrap(document,['app'],[]);
console.log(5);
</script>
</body>
</html>
<script type="text/javascript">
console.log(6);
</script>
ผลลัพธ์ใน console
0 (index):12 1 app.js:1 3 app.js:7 4 (index):32 5 (index):34 6 (index):39 2 app.js:4 7 (index):30
จะเห็นว่า angularjs ทำงานหลังจาก มีการ rendered หน้าเพจเรียบร้อยแล้ว
2 app.js:4
การรู้จักลำดับการทำงาน ของ javascript ข้างต้น มีประโยชน์ในการนำไปใช้ ในการพัฒนา
mobile app รวมทั้งการได้รู้จักการใช้งาน
angular.bootstrap และ angular.element(document).ready(function() {
จะมีประโยชน์ในการประยุกต์ต่อไป
