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

เขียนเมื่อ 9 ปีก่อน โดย Ninenik Narkdee
angularjs javascript

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ angularjs javascript

ดูแล้ว 7,860 ครั้ง


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


กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ











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





คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
  • เปลี่ยน


    ( หรือ เข้าใช้งานผ่าน Social Login )







เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ