แอปพลิเคชัน AngularJS Hello World: โปรแกรมตัวอย่างแรกของคุณ

โดย: เจมส์ ฮาร์ทแมน เจมส์ ฮาร์ทแมน
Hours วันที่อัพเดท

วิธีที่ดีที่สุดในการดูพลังของแอปพลิเคชัน AngularJS คือการสร้างแอปพื้นฐานโปรแกรมแรกของคุณ “Hello World” ใน Angular.JS

มีสภาพแวดล้อมการพัฒนาแบบรวมมากมายที่คุณสามารถใช้สำหรับการพัฒนา AngularJS ได้ ซึ่งบางรายการยอดนิยมมีการกล่าวถึงด้านล่าง ในตัวอย่างของเรา เราใช้ Webstorm เป็น IDE ของเรา

  1. Webstorm
  2. Sublime Text
  3. AngularJS Eclipse
  4. Visual Studio

สวัสดีชาวโลก AngularJS

ตัวอย่างด้านล่างแสดงวิธีที่ง่ายที่สุดในการสร้างแอปพลิเคชัน “Hello world” แอปพลิเคชันแรกของคุณใน AngularJS

โปรแกรม AngularJS สวัสดีชาวโลก

<!DOCTYPE html>  
<html ng-app="app">  
<head>  
    <meta charset="utf 8">
    <title>Guru99</title>     
</head>  
<body>
<h1 ng-controller="HelloWorldCtrl">{{message}}</h1>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script>  
    angular.module("app", []).controller("HelloWorldCtrl", function($scope) {  
    $scope.message="Hello World" 
    } )
</script> 

</body>  
</html>

คำอธิบายรหัส:

  1. "ng-แอป” คำหลักใช้เพื่อแสดงว่าแอปพลิเคชันนี้ควรได้รับการพิจารณาว่าเป็นแอปพลิเคชัน เชิงมุม js สามารถตั้งชื่อใด ๆ ให้กับแอปพลิเคชันนี้ได้
  2. ตัวควบคุมคือสิ่งที่ใช้เพื่อเก็บตรรกะทางธุรกิจ ในแท็ก h1 เราต้องการเข้าถึงคอนโทรลเลอร์ซึ่งจะมีตรรกะในการแสดง "HelloWorld" ดังนั้นเราจึงสามารถพูดได้ว่าในแท็กนี้เราต้องการเข้าถึงคอนโทรลเลอร์ชื่อ "HelloWorldCtrl"
  3. เรากำลังใช้ตัวแปรสมาชิกที่เรียกว่า "ข้อความ" ซึ่งไม่มีอะไรนอกจากตัวยึดตำแหน่งเพื่อแสดงข้อความ "Hello World"
  4. “แท็กสคริปต์” ใช้เพื่ออ้างอิงสคริปต์ angular.js ซึ่งมีฟังก์ชันการทำงานที่จำเป็นทั้งหมดสำหรับ js เชิงมุม หากไม่มีการอ้างอิงนี้ ถ้าเราพยายามใช้ฟังก์ชัน AngularJS ฟังก์ชันเหล่านั้นจะไม่ทำงาน
  5. “ผู้ควบคุม” คือที่ที่เรากำลังสร้างตรรกะทางธุรกิจซึ่งเป็นผู้ควบคุมของเรา ข้อมูลเฉพาะของคำหลักแต่ละคำจะอธิบายไว้ในบทต่อๆ ไป สิ่งสำคัญที่ควรทราบก็คือ เรากำลังกำหนดวิธีการควบคุมที่เรียกว่า 'HelloWorldCtrl' ซึ่งถูกอ้างอิงในขั้นตอนที่ 2
  6. เรากำลังสร้าง "ฟังก์ชัน" ซึ่งจะถูกเรียกเมื่อโค้ดของเราเรียกคอนโทรลเลอร์นี้ วัตถุ $scope เป็นวัตถุพิเศษใน AngularJS ซึ่งเป็นวัตถุส่วนกลางที่ใช้ใน Angular.js วัตถุ $scope ใช้เพื่อจัดการข้อมูลระหว่างตัวควบคุมและมุมมอง
  7. เรากำลังสร้างตัวแปรสมาชิกที่เรียกว่า "ข้อความ" โดยกำหนดค่า "HelloWorld" และแนบตัวแปรสมาชิกเข้ากับวัตถุขอบเขต

หมายเหตุ: คำสั่ง ng-controller เป็นคำหลักที่กำหนดไว้ AngularJS (ขั้นตอนที่ #2) และใช้เพื่อกำหนดตัวควบคุมในแอปพลิเคชันของคุณ ในแอปพลิเคชันของเรา เราได้ใช้คีย์เวิร์ด ng-controller เพื่อกำหนดคอนโทรลเลอร์ชื่อ 'HelloWorldCtrl' ตรรกะที่แท้จริงสำหรับคอนโทรลเลอร์จะถูกสร้างขึ้นใน (ขั้นตอนที่ #5)

หากดำเนินการคำสั่งสำเร็จ ผลลัพธ์ต่อไปนี้จะปรากฏขึ้นเมื่อคุณรันโค้ดในเบราว์เซอร์

Output:

จะแสดงข้อความ 'สวัสดีโลก'

โปรแกรม AngularJS สวัสดีชาวโลก