AngularJS Hello World: โปรแกรมตัวอย่างแรกของคุณ

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

⚡ สรุปอย่างชาญฉลาด

โปรแกรม Hello World ของ AngularJS ต้องการเพียงไฟล์ HTML ไฟล์เดียว การอ้างอิงสคริปต์หนึ่งรายการ และไดเร็กทีฟสองตัว คือ ng-app และ ng-controller เพื่อผูกตัวแปรขอบเขตคอนโทรลเลอร์เข้ากับหน้าเว็บผ่านนิพจน์วงเล็บปีกกาคู่

  • 🔘 ng-app: แอตทริบิวต์ ng-app จะทำเครื่องหมายองค์ประกอบรากและเริ่มต้นโมดูล AngularJS ที่ระบุชื่อโดยอัตโนมัติ
  • ☑️ ng-controller: ng-controller จะแนบ HelloWorldCtrl เข้ากับองค์ประกอบ h1 ทำให้ขอบเขตของคอนโทรลเลอร์สามารถใช้งานได้ที่นั่น
  • ✅ การผูกขอบเขต: การกำหนดค่า $scope.message ภายในคอนโทรลเลอร์จะส่งข้อมูลไปยังนิพจน์ {{message}} ที่แสดงผลในวิว
  • 🧪 เรียงแถวเดียว: ไฟล์ HTML เพียงไฟล์เดียวและการอ้างอิงสคริปต์หนึ่งรายการก็สามารถเรียกใช้ตัวอย่างได้ โดยไม่จำเป็นต้องมีขั้นตอนการสร้างใดๆ
  • 🛠️ การแก้ไขปัญหา: วงเล็บปีกกาที่ปรากฏบนหน้าจอเกือบทุกครั้งหมายความว่าไลบรารีไม่ได้โหลดหรือ ng-app หายไป
  • 📊 หมายเหตุเกี่ยวกับเวอร์ชัน: การสนับสนุน AngularJS สิ้นสุดลงในเดือนมกราคม 2022 โดยเวอร์ชัน 1.8.3 เป็นเวอร์ชันสุดท้าย งานใหม่ควรอยู่ใน Angular แทน
อ่านเพิ่มเติม

ตัวอย่างโปรแกรมแรกของ AngularJS Hello World โดยใช้ ng-app และ ng-controller

วิธีที่ดีที่สุดที่จะเห็นศักยภาพของแอปพลิเคชัน AngularJS คือการสร้างโปรแกรมพื้นฐานตัวแรกของคุณ เช่น แอป "Hello World" ใน AngularJS

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

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

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

หมายเหตุเกี่ยวกับเวอร์ชัน: AngularJS 1.x สิ้นสุดการสนับสนุนระยะยาว (Long Term Support) เมื่อวันที่ 31 ธันวาคม 2021 และทีมผู้พัฒนาเฟรมเวิร์กได้ยืนยันเรื่องนี้แล้ว การสนับสนุน AngularJS สิ้นสุดลงอย่างเป็นทางการแล้ว ในเดือนมกราคม 2022 โดยเวอร์ชัน 1.8.3 เป็นเวอร์ชันสุดท้ายและไม่มีการแก้ไขช่องโหว่ด้านความปลอดภัยใดๆ หลังจากนั้น ทุกขั้นตอนและบล็อกโค้ดด้านล่างจะถูกเก็บรักษาไว้เหมือนเดิมทุกประการ โครงการใหม่ๆ ควรใช้ Angular เวอร์ชันใหม่ ซึ่งเริ่มต้นด้วยขั้นตอนเดียวกัน ng serve และคอมโพเนนต์แบบสแตนด์อโลน และยังคงใช้แบบเดิม {{ }} ไวยากรณ์การแทรกค่า

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

ภาพหน้าจอที่มีคำอธิบายประกอบด้านล่างนี้ระบุแต่ละส่วนของไฟล์นั้น และตัวเลขเจ็ดตัวนั้นตรงกับ... Code คำอธิบายอยู่ด้านล่าง ไฟล์นี้ถูกบันทึกจากเวอร์ชัน 1.4.0 ก่อนหน้า ดังนั้นบรรทัดสคริปต์จึงแตกต่างจากเวอร์ชันที่ระบุไว้ในโค้ด

ไฟล์ HTML "Hello World" ของ AngularJS ที่มีคำอธิบายประกอบ พร้อมหมายเลขกำกับเจ็ดจุดสำหรับ ng-app, ng-controller, การอ้างอิงสคริปต์ และตัวแปรขอบเขต

<!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>

Code คำอธิบาย:

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

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

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

Output:

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

หน้าต่างเบราว์เซอร์ชื่อ Guru99 การแสดงผลหัวข้อ "Hello World" จากตัวแปรขอบเขตของ AngularJS

วิธีการโหลด AngularJS: ผ่าน CDN หรือไฟล์ในเครื่อง

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

มีสองวิธีในการนำไฟล์นั้นเข้ามา

  1. อ้างอิงสำเนาจาก CDN ตัวอย่างนี้ชี้ให้เห็นว่า code.angularjs.org และพินเวอร์ชัน 1.6.9 โฮสต์นั้นยังคงให้บริการบิลด์ 1.x โดยเวอร์ชันสูงสุดคือ 1.8.2 ในขณะที่ Google Hosted Libraries ไม่แสดง AngularJS อีกต่อไปแล้ว
  2. ดาวน์โหลดสำเนาลงในเครื่องของคุณ บันทึกไฟล์ไว้ข้างๆ หน้าเว็บ HTML แล้วชี้แท็กสคริปต์ไปยังไฟล์นั้น การมีสำเนาอยู่ในเครื่องจะช่วยให้ตัวอย่างทำงานได้แบบออฟไลน์ ซึ่งสำคัญมากเมื่อพร็อกซีบล็อก CDN
<!-- Option 1: reference a CDN copy -->
<script src="https://code.angularjs.org/1.8.2/angular.min.js"></script>

<!-- Option 2: reference a downloaded copy in the same folder -->
<script src="angular.min.js"></script>

ใช้ angular.js ขณะเรียนรู้และ angular.min.js ในขั้นตอนการผลิต: บิลด์ที่ไม่ถูกย่อขนาดจะแสดงสแต็กที่อ่านได้ tracในขณะที่รายงานการสร้างแบบย่อส่วนจะเปลี่ยนชื่อตัวแปร

เมื่อโหลดไฟล์เสร็จแล้ว ng-app เฟรมเวิร์กนี้เริ่มต้นขึ้น AngularJS จะค้นหาแอตทริบิวต์นั้นเมื่อเอกสารโหลดเสร็จสมบูรณ์ ถือว่าองค์ประกอบที่มีแอตทริบิวต์นั้นเป็นรากของการคอมไพล์ และเริ่มต้นโมดูลที่ระบุชื่อในค่าของมัน ผลที่ตามมามีสามประการ:

  • เฉพาะอันแรกเท่านั้น ng-app บนหน้าเว็บจะมีการบูตสแตรปโดยอัตโนมัติ ส่วนอันที่สองจะถูกละเว้น เว้นแต่ว่า... angular.bootstrap ถูกเรียกใช้งานด้วยตนเอง
  • ค่าดังกล่าวต้องระบุชื่อโมดูลที่ลงทะเบียนไว้กับ แองกูลาร์โมดูลมิฉะนั้นคอนโซลจะรายงาน [$injector:modulerr].
  • การวาง ng-app บน html องค์ประกอบดังกล่าว ดังตัวอย่างที่แสดง จะนำเอกสารทั้งหมดมาอยู่ภายใต้ AngularJS; คอนเทนเนอร์ที่แคบกว่าก็ใช้ได้เช่นกัน

บทความที่เกี่ยวข้อง

วิธีการทำงานของ {{ }} Expression และการผูกข้อมูล ng-model

ตัวยึดคู่รอบ ๆ message ในแท็ก h1 ไม่ใช่ข้อความตัวอย่างที่จะถูกเติมข้อมูลเมื่อโหลดหน้าเว็บเสร็จ AngularJS จะคอมไพล์โหนดข้อความนั้นให้เป็นตัวตรวจสอบ (watcher) บนองค์ประกอบโดยรอบ ขอบเขตดังนั้นผลลัพธ์ที่แสดงออกมา tracks $scope.message ตราบเท่าที่หน้าเว็บนี้ยังคงอยู่

กระบวนการนี้ดำเนินไปในสามขั้นตอน

  1. ตัวควบคุมจะเขียนค่าลงไป $scope.
  2. การประมวลผลแบบไดเจสต์จะเปรียบเทียบผลลัพธ์ที่ตรวจสอบแต่ละรายการกับผลลัพธ์ก่อนหน้า
  3. แต่ละนิพจน์ที่ค่าเปลี่ยนแปลงจะถูกแสดงผลใหม่ในตำแหน่งเดิม

ดังนั้น นิพจน์ที่แทรกเข้าไปจึงเป็นแบบทางเดียว จากขอบเขตไปยังมุมมอง การเชื่อมโยงแบบสองทางจำเป็นต้องมี ng-รุ่นที่ คำสั่ง ออกแบบมาสำหรับส่วนควบคุมแบบฟอร์ม เพิ่ม <input ng-model="message"> พิมพ์ข้อความลงในช่องข้างๆ หัวข้อ แล้วหัวข้อจะเปลี่ยนไปทุกครั้งที่กดแป้นพิมพ์ เนื่องจาก ng-model จะเขียนค่าของฟิลด์กลับไปยังคุณสมบัติขอบเขตเดียวกันกับที่นิพจน์เฝ้าดูอยู่

นิพจน์ถูกจำกัดไว้โดยเจตนา พวกมันอ่านคุณสมบัติของขอบเขต เรียกใช้เมธอดของขอบเขต และยอมรับค่าที่ไม่กำหนดโดยไม่แจ้งให้ทราบ แต่ไม่สามารถประกาศตัวแปร ใช้คำสั่งควบคุมการไหลของโปรแกรม หรือเข้าถึงอ็อบเจ็กต์ส่วนกลางได้ เช่น window.

วิธีแก้ไขหน้าว่างหรือ {{ }} ที่ไม่แสดงผล

โปรแกรม AngularJS ตัวแรกมักล้มเหลวในสองลักษณะที่เห็นได้ชัด คือ หน้าเว็บว่างเปล่า หรือข้อความที่แสดงไม่ถูกต้อง {{message}} ปรากฏข้อความ "Hello World" ในตำแหน่งที่ควรจะเป็น ทั้งสองกรณีหมายความว่าเฟรมเวิร์กไม่ได้ควบคุมมาร์กอัป โปรดตรวจสอบตามขั้นตอนด้านล่างตามลำดับ โดยเปิดคอนโซลของเบราว์เซอร์ไว้ด้วย

  1. ตรวจสอบว่าได้โหลดไลบรารีเรียบร้อยแล้ว เปิดแผงเครือข่ายและมองหา angular.js คำขอ 404 หรือ CDN ที่เข้าถึงไม่ได้ จะทำให้วงเล็บบนหน้าจอไม่เปลี่ยนแปลง
  2. ตรวจสอบเส้นทางของสคริปต์ เส้นทางสัมพัทธ์จะอ้างอิงถึงโฟลเดอร์ที่เก็บไฟล์ HTML ดังนั้นสำเนาในโฟลเดอร์หนึ่งๆ จึงอาจตรงกับตำแหน่งในโฟลเดอร์ HTML นั้นๆ js โฟลเดอร์ย่อยต้องการ js/angular.min.js.
  3. ตรวจสอบ ng-app คุณลักษณะที่หายไปหรือสะกดผิดจะไม่มีผลใดๆ ต่อ Bootstrap คุณลักษณะดังกล่าวมีเครื่องหมายขีดคั่น ng-app ในมาร์กอัป แม้ว่าคำสั่งนั้นจะใช้รูปแบบ camel-case ก็ตาม Javaต้นฉบับ
  4. อ่านข้อความแสดงข้อผิดพลาดในคอนโซล [$injector:modulerr] หมายความว่าโมดูลที่ระบุโดย ng-app ไม่เคยได้รับการลงทะเบียนมาก่อน [ng:areq] โดยปกติหมายความว่าชื่อคอนโทรลเลอร์ในมาร์กอัปไม่ตรงกับชื่อที่ส่งผ่านไปยัง .controller().
  5. มองหา ng-app ตัวที่สอง เฉพาะส่วนแรกเท่านั้นที่ใช้การบูตสแตรป ดังนั้นสำเนาที่หลงเหลืออยู่บนองค์ประกอบภายในจะทำให้ส่วนนั้นของหน้าเว็บใช้งานไม่ได้โดยไม่แจ้งให้ทราบล่วงหน้า

สาเหตุอีกสองประการที่เหลือเป็นสาเหตุหลักของรายงานส่วนใหญ่ที่เหลืออยู่

  • โปรโตคอลไฟล์ ตัวอย่างไฟล์เดียวนี้ทำงานได้ดีเมื่อเปิดโดยตรงจากดิสก์ แต่เทมเพลตใดๆ ที่ดึงมาผ่าน XHR จะถูกบล็อกโดยกฎต้นทางของเบราว์เซอร์ ควรให้บริการโฟลเดอร์ผ่าน HTTP เมื่อเทมเพลตปรากฏขึ้น
  • เห็นเหล็กดัดฟันแวบหนึ่ง เมื่อโค้ด HTML แสดงผลก่อนที่เฟรมเวิร์กจะคอมไพล์ นิพจน์ดิบจะปรากฏให้เห็นชั่วขณะหนึ่ง เพิ่ม ng-cloak ไปยังองค์ประกอบ หรือสลับนิพจน์สำหรับ ng-bind="message"ซึ่งจะไม่แสดงมาร์กอัปของตัวเองเลย

หากไม่มีข้อใดตรงกับที่คุณต้องการ ให้ลดขนาดหน้าเว็บให้เหลือเพียงตัวอย่างด้านบน แล้วเพิ่มโค้ดของคุณทีละบรรทัด

คำถามที่พบบ่อย

วิธีใดวิธีหนึ่งในสี่วิธีที่กล่าวมาข้างต้นก็ใช้ได้ และตัวอย่างนี้ใช้วิธีใดวิธีหนึ่งจากสี่วิธีดังกล่าว Webstormเนื่องจากโปรแกรมเป็นไฟล์ HTML แบบคงที่ไฟล์เดียว โปรแกรมแก้ไขข้อความธรรมดาก็เพียงพอแล้ว IDE เพียงแค่เพิ่มฟังก์ชันการเติมคำสั่งอัตโนมัติ การโหลดซ้ำแบบเรียลไทม์ และการดีบักแบบบูรณาการเท่านั้น

$scope คืออ็อบเจ็กต์การผูกข้อมูลที่ใช้ร่วมกันระหว่าง ตัวควบคุม และมุมมองของมัน การเขียน $scope.message ภายใน HelloWorldCtrl จะทำให้คุณสมบัตินั้นปรากฏให้เห็นในนิพจน์ที่วางอยู่บนองค์ประกอบ h1

ทั้งสองไฟล์มีเฟรมเวิร์กเดียวกัน angular.js เป็นไฟล์ที่ไม่ได้ย่อขนาด ดังนั้นข้อผิดพลาดจึงชี้ไปยังซอร์สโค้ดที่อ่านได้ ส่วน angular.min.js เป็นไฟล์ที่บีบอัดสำหรับใช้งานจริงและต้องระบุคำอธิบายการพึ่งพาอย่างชัดเจน เนื่องจากกระบวนการย่อขนาดจะเปลี่ยนชื่อพารามิเตอร์ที่ AngularJS ตรวจสอบ

AngularJS คือเฟรมเวิร์กเวอร์ชัน 1.x ที่แสดงในภาพนี้ ซึ่งขับเคลื่อนด้วยไดเร็กทีฟ, $scope และคำสั่งพื้นฐาน Javaสคริปต์ Angular ซึ่งหมายถึงเวอร์ชัน 2 และเวอร์ชันที่ใหม่กว่านั้น เป็นสิ่งที่แยกต่างหาก TypeScript เฟรมเวิร์กนี้สร้างขึ้นจากส่วนประกอบต่างๆ และเป็นสายผลิตภัณฑ์ที่ได้รับการดูแลรักษาอย่างต่อเนื่อง

ส่วนใหญ่ใช้สำหรับบำรุงรักษาแอปพลิเคชันเวอร์ชัน 1.x ที่มีอยู่ ซึ่งยังคงใช้งานกันอย่างแพร่หลาย คำศัพท์เกี่ยวกับการผูกมัด คำสั่ง และ การฉีดพึ่งพา การโอนย้ายข้อมูลนั้นสามารถทำได้ แต่การสนับสนุนสิ้นสุดลงในเดือนมกราคม 2022 ดังนั้นโครงการใหม่ ๆ จึงควรใช้ Angular เวอร์ชันใหม่

ใช่แล้ว ลงทะเบียนแต่ละตัวด้วย .controller() ในโมดูลเดียวกัน แล้วเชื่อมโยงเข้ากับองค์ประกอบต่างๆ โดยใช้ ng-controller แต่ละตัวจะได้รับขอบเขตย่อยของตัวเอง ดังนั้นคุณสมบัติที่มีชื่อเดียวกันจึงยังคงเป็นอิสระต่อกัน

ผู้ช่วยสมัยใหม่จะอ่านโค้ดเบสเวอร์ชัน 1.x และสร้างรายการของไดเร็กทีฟ ฟิลเตอร์ และบริการ พร้อมคำแนะนำเกี่ยวกับส่วนประกอบและบริการที่เทียบเท่ากัน รายการดังกล่าวมีประโยชน์สำหรับการกำหนดขอบเขตping งานนั้น แม้ว่าแผนที่ทุกแผ่นก็ตามping ยังคงต้องตรวจสอบด้วยตนเองอีกครั้ง

นักบิน GitHub ดำเนินการตามโครงร่างคอนโทรลเลอร์ให้เสร็จสมบูรณ์ รวมถึงการกำหนดค่า $scope และอื่นๆ ng-ส่ง ตัวจัดการจากความคิดเห็นสั้นๆ แต่การฝึกอบรมนั้นเน้นไปที่ Angular เวอร์ชันใหม่ ดังนั้นโปรดตรวจสอบว่าคำแนะนำนั้นใช้ไวยากรณ์เวอร์ชัน 1.x จริงๆ

สรุปโพสต์นี้ด้วย: