PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum

ดูลำดับการทำงานของ javascript และ angularjs ตอนที่ 13

09 September 2014 By


ตัวอย่างโค้ดและการทำงาน นี้เป้นตัวอย่างสำหรับการทดสอบ
ลำดับการทำงาน ของ 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() {
 
จะมีประโยชน์ในการประยุกต์ต่อไป

Tags:: javascript angularjs





URL สำหรับอ้างอิง