ตัวอย่างโค้ดและการทำงาน นี้เป้นตัวอย่างสำหรับการทดสอบ
ลำดับการทำงาน ของ javascript แบบปกติ และส่วนที่ใช้งาน
angularjs เนื้อหาจะไม่อธิบายอะไรมาก แต่มีความสำคัญ เพื่อ
ให้เราเข้าใจ เส้นทางการทำงานของโปรแกรม
ไฟล์ app.js
1 2 3 4 5 6 7 | 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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | <!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
1 2 3 4 5 6 7 8 | 0 (index):121 app.js:13 app.js:74 (index):322 app.js:45 (index):346 (index):397 (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
และส่วนสุดท้าย ที่ทำงานท้ายสุดคือ ฟังก์ชั่น
1 2 3 | angular.element(document).ready(function() { console.log(7);}); |
ส่วนนี้จะเป็นการตรวจสอบว่า มีการ rendeed หน้าเพจ เสร็จเรียบร้อย
แล้วก่อนถึงจะทำงาน
7 (index):30
มาดูส่วนทำงานรูปแบบที่สอง
ไฟล์ index.html
กรณีที่ 2 ไม่มีการเรียกใช้งาน ฟังก์ชั่น angular.bootstrap (comment ปิดไว้)
และกำหนด ng-app ในแท็กเปิด html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | <!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
1 2 3 4 5 6 7 8 | 0 (index):121 app.js:13 app.js:74 (index):325 (index):346 (index):392 app.js:47 (index):30 |
จะเห็นว่า angularjs ทำงานหลังจาก มีการ rendered หน้าเพจเรียบร้อยแล้ว
2 app.js:4
การรู้จักลำดับการทำงาน ของ javascript ข้างต้น มีประโยชน์ในการนำไปใช้ ในการพัฒนา
mobile app รวมทั้งการได้รู้จักการใช้งาน
angular.bootstrap และ angular.element(document).ready(function() {
จะมีประโยชน์ในการประยุกต์ต่อไป
