AngularJS - การตั้งค่าสภาพแวดล้อม

บทนี้อธิบายถึงวิธีการตั้งค่าไลบรารี AngularJS เพื่อใช้ในการพัฒนาเว็บแอปพลิเคชัน นอกจากนี้ยังอธิบายโครงสร้างไดเร็กทอรีและเนื้อหาโดยย่อ

เมื่อคุณเปิดลิงค์ https://angularjs.org/คุณจะเห็นว่ามีสองตัวเลือกในการดาวน์โหลดไลบรารี AngularJS -

View on GitHub - เมื่อคลิกที่ปุ่มนี้คุณจะถูกโอนไปยัง GitHub และรับสคริปต์ล่าสุดทั้งหมด
Download AngularJS 1 - เมื่อคลิกที่ปุ่มนี้หน้าจอคุณจะเห็นกล่องโต้ตอบที่แสดงเป็น -

หน้าจอนี้ให้ตัวเลือกต่างๆในการใช้ Angular JS ดังนี้ -

Downloading and hosting files locally
- มีสองตัวเลือกที่แตกต่างกัน: Legacy และ Latest ชื่อตัวเองเป็นตัวอธิบาย Legacy มีเวอร์ชันน้อยกว่า 1.2.x และเวอร์ชันล่าสุดมาพร้อมกับเวอร์ชัน 1.3.x
- นอกจากนี้เรายังสามารถใช้เวอร์ชันย่อขนาดไม่บีบอัดหรือบีบอัดได้
CDN access- คุณยังสามารถเข้าถึง CDN CDN ช่วยให้คุณสามารถเข้าถึงศูนย์ข้อมูลระดับภูมิภาค ในกรณีนี้โฮสต์ของ Google CDN จะโอนความรับผิดชอบในการโฮสต์ไฟล์จากเซิร์ฟเวอร์ของคุณไปยังชุดไฟล์ภายนอก นอกจากนี้ยังมีข้อได้เปรียบที่หากผู้เยี่ยมชมหน้าเว็บของคุณดาวน์โหลดสำเนา AngularJS จาก CDN เดียวกันแล้วก็ไม่จำเป็นต้องดาวน์โหลดซ้ำ

เรากำลังใช้ไลบรารีเวอร์ชัน CDN ตลอดบทช่วยสอนนี้

ตัวอย่าง

ตอนนี้ให้เราเขียนตัวอย่างง่ายๆโดยใช้ไลบรารี AngularJS ให้เราสร้างไฟล์ HTML myfirstexample.html ที่แสดงด้านล่าง -

<!doctype html>
<html>
   <head>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.5.2/angular.min.js"></script>
   </head>
   
   <body ng-app = "myapp">
      <div ng-controller = "HelloController" >
         <h2>Welcome {{helloTo.title}} to the world of Tutorialspoint!</h2>
      </div>
      
      <script>
         angular.module("myapp", [])
         
         .controller("HelloController", function($scope) {
            $scope.helloTo = {};
            $scope.helloTo.title = "AngularJS";
         });
      </script>
      
   </body>
</html>

ให้เราอ่านรหัสด้านบนโดยละเอียด -

รวม AngularJS

เรารวมไฟล์ AngularJS JavaScript ไว้ในหน้า HTML เพื่อให้เราสามารถใช้งานได้ -

<head>
   <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">
   </script>
</head>

คุณสามารถตรวจสอบ AngularJS เวอร์ชันล่าสุดได้จากเว็บไซต์ทางการ

ชี้ไปที่แอพ AngularJS

จากนั้นจะต้องบอกว่าส่วนใดของ HTML ที่มีแอป AngularJS คุณสามารถทำได้โดยเพิ่มแอตทริบิวต์ ng-app ในองค์ประกอบ HTML รากของแอป AngularJS คุณสามารถเพิ่มลงในองค์ประกอบ html หรือองค์ประกอบของร่างกายตามที่แสดงด้านล่าง -

<body ng-app = "myapp">
</body>

ดู

มุมมองคือส่วนนี้ -

<div ng-controller = "HelloController" >
   <h2>Welcome {{helloTo.title}} to the world of Tutorialspoint!</h2>
</div>

ng-controllerบอก AngularJS ว่าจะใช้คอนโทรลเลอร์ใดกับมุมมองนี้ helloTo.titleบอกให้ AngularJS เขียนค่าโมเดลชื่อ helloTo.title ใน HTML ที่ตำแหน่งนี้

ตัวควบคุม

ส่วนควบคุมคือ -

<script>
   angular.module("myapp", [])
   
   .controller("HelloController", function($scope) {
      $scope.helloTo = {};
      $scope.helloTo.title = "AngularJS";
   });
</script>

รหัสนี้ลงทะเบียนฟังก์ชั่นชื่อตัวควบคุมเป็น HelloController ในโมดูลชื่อเชิงมุมmyapp เราจะศึกษาเพิ่มเติมเกี่ยวกับโมดูลและคอนโทรลเลอร์ในบทต่างๆ ฟังก์ชันคอนโทรลเลอร์ถูกลงทะเบียนในเชิงมุมผ่านการเรียกฟังก์ชัน angular.module (... ). controller (... )

โมเดลพารามิเตอร์ขอบเขต $ ถูกส่งผ่านไปยังฟังก์ชันคอนโทรลเลอร์ ฟังก์ชันคอนโทรลเลอร์จะเพิ่มอ็อบเจกต์helloTo JavaScript และในอ็อบเจ็กต์นั้นจะเพิ่มฟิลด์หัวเรื่อง

การดำเนินการ

บันทึกโค้ดด้านบนเป็นmyfirstexample.htmlและเปิดในเบราว์เซอร์ใดก็ได้ คุณจะเห็นผลลัพธ์ต่อไปนี้ -

Welcome AngularJS to the world of Tutorialspoint!

จะเกิดอะไรขึ้นเมื่อโหลดเพจในเบราว์เซอร์ ให้เราดู -

เอกสาร HTML ถูกโหลดลงในเบราว์เซอร์และประเมินโดยเบราว์เซอร์
ไฟล์ AngularJS JavaScript ถูกโหลดและสร้างวัตถุส่วนกลางเชิงมุม
จาวาสคริปต์ที่ลงทะเบียนฟังก์ชันคอนโทรลเลอร์ถูกเรียกใช้งาน
จากนั้น AngularJS จะสแกนผ่าน HTML เพื่อค้นหาแอป AngularJS ตลอดจนมุมมอง
เมื่อมุมมองตั้งอยู่มุมมองนั้นจะเชื่อมต่อมุมมองนั้นกับฟังก์ชันคอนโทรลเลอร์ที่เกี่ยวข้อง
ถัดไป AngularJS เรียกใช้ฟังก์ชันคอนโทรลเลอร์
จากนั้นแสดงมุมมองพร้อมข้อมูลจากโมเดลที่เติมโดยคอนโทรลเลอร์ ตอนนี้หน้าพร้อมแล้ว