วิธีที่ดีในการเริ่มเรียนรู้ AngularJS คือการสร้างแอปพลิเคชั่นคลาสสิก "Hello World!":
1. สร้างไฟล์ HTML โดยใช้ตัวแก้ไขข้อความที่คุณชื่นชอบตัวอย่างเช่น: helloWorld.html
2. คัดลอกซอร์สโค้ดต่อไปนี้ไปยังไฟล์ HTML ของคุณ
3. เปิดไฟล์ HTML นี้ในเว็บเบราว์เซอร์
ซอร์สโค้ด:
การคัดลอกรหัสมีดังนี้:
<! doctype html>
<html ng-app>
<head>
<script src = "http://code.angularjs.org/angular-1.0.1.min.js"> </script>
</head>
<body>
สวัสดี {{'World'}}!
</body>
</html>
โปรดเรียกใช้รหัสด้านบนในเบราว์เซอร์ของคุณเพื่อดูเอฟเฟกต์
ทีนี้มาดูรหัสอย่างใกล้ชิดและดูว่าเกิดอะไรขึ้น เมื่อโหลดหน้าเว็บแท็ก NG-APP จะบอก AngularJS ให้ประมวลผลหน้า HTML ทั้งหมดและบูทแอปพลิเคชัน:
การคัดลอกรหัสมีดังนี้:
<html ng-app>
บรรทัดนี้โหลดสคริปต์ AngularJS:
การคัดลอกรหัสมีดังนี้:
<script src = "http://code.angularjs.org/angular-1.0.1.min.js"> </script>
(สำหรับรายละเอียดเกี่ยวกับ AngularJS ที่จัดการหน้า HTML ทั้งหมดโปรดดู Bootstrap)
ในที่สุดร่างกายในแท็กคือเทมเพลตสำหรับแอปพลิเคชันแสดงคำทักทายของเราใน UI:
การคัดลอกรหัสมีดังนี้:
สวัสดี {{'World'}}!
โปรดทราบว่าเนื้อหาของ {{}} ติดแท็กด้วยวงเล็บปีกกาคู่คือการแสดงออกที่ถูกผูกไว้ในคำทักทายซึ่งเป็นสตริงที่เรียบง่าย 'โลก'
ด้านล่างเรามาดูตัวอย่างที่น่าสนใจยิ่งขึ้น: ผูกการแสดงออกแบบไดนามิกกับข้อความทักทายของเราโดยใช้ AngularJs
สวัสดี Angularjs World!
ตัวอย่างนี้แสดงให้เห็นถึงการเชื่อมโยงข้อมูลสองทิศทางสำหรับ AngularJS:
1. แก้ไขเอกสาร helloWorld.html ที่สร้างขึ้นก่อนหน้านี้
2. คัดลอกซอร์สโค้ดต่อไปนี้ไปยังไฟล์ HTML ของคุณ
3. รีเฟรชหน้าต่างเบราว์เซอร์
ซอร์สโค้ด:
การคัดลอกรหัสมีดังนี้:
<! doctype html>
<html ng-app>
<head>
<script src = "http://code.angularjs.org/angular-1.0.1.min.js"> </script>
</head>
<body>
ชื่อของคุณ: <อินพุต type = "text" ng-model = "YourName" placeholder = "World">
<Hr>
สวัสดี {{yourname || 'โลก'}}!
</body>
</html>
โปรดเรียกใช้รหัสด้านบนในเบราว์เซอร์ของคุณเพื่อดูเอฟเฟกต์
ตัวอย่างนี้มีหมายเหตุสำคัญต่อไปนี้:
1. คำสั่งอินพุตข้อความ <อินพุต ng-model = "YourName" /> ถูกผูกไว้กับตัวแปรโมเดลที่เรียกว่า YourName
2. เครื่องหมายรั้งสองเท่าเพิ่มตัวแปรโมเดลชื่อ YourName ลงในข้อความทักทาย
3. คุณไม่จำเป็นต้องลงทะเบียนผู้ฟังเหตุการณ์หรือเพิ่มตัวจัดการเหตุการณ์สำหรับแอปพลิเคชัน!
ตอนนี้ลองพิมพ์ชื่อของคุณในกล่องอินพุตและชื่อที่คุณพิมพ์จะได้รับการอัปเดตทันทีและแสดงในคำทักทาย นี่คือแนวคิดของการเชื่อมโยงข้อมูลสองทาง AngularJS การเปลี่ยนแปลงใด ๆ ในกล่องอินพุตจะสะท้อนให้เห็นทันทีกับตัวแปรโมเดล (ทิศทางเดียว) และการเปลี่ยนแปลงใด ๆ ในตัวแปรโมเดลจะสะท้อนให้เห็นทันทีกับข้อความทักทาย (ทิศทางอื่น)
การวิเคราะห์แอปพลิเคชัน AngularJS
ส่วนนี้อธิบายองค์ประกอบทั้งสามของแอปพลิเคชัน AngularJS และอธิบายว่าพวกเขาแมปอย่างไรกับรูปแบบการออกแบบแบบจำลองมุมมอง:
เทมเพลต
เทมเพลตคือไฟล์ที่คุณเขียนใน HTML และ CSS เพื่อนำเสนอมุมมองของแอปพลิเคชัน คุณสามารถเพิ่มองค์ประกอบใหม่และแท็กแอตทริบิวต์ให้กับ HTML เป็นคำสั่งสำหรับคอมไพเลอร์ AngularJS คอมไพเลอร์ AngularJS สามารถขยายได้อย่างสมบูรณ์ซึ่งหมายความว่าด้วย AngularJS คุณสามารถสร้างแท็ก HTML ของคุณเองใน HTML!
ตรรกะและพฤติกรรมของแอปพลิเคชัน
แอปพลิเคชันตรรกะและพฤติกรรมเป็นตัวควบคุมที่คุณกำหนดใน JavaScript AngularJS นั้นแตกต่างจากแอปพลิเคชัน AJAX มาตรฐานคุณไม่จำเป็นต้องเขียนผู้ฟังหรือคอนโทรลเลอร์ DOM เนื่องจากมันถูกสร้างขึ้นใน AngularJS แล้ว คุณสมบัติเหล่านี้ทำให้ตรรกะแอปพลิเคชันของคุณง่ายต่อการเขียนทดสอบรักษาและทำความเข้าใจ
ข้อมูลแบบจำลอง (ข้อมูล)
แบบจำลองนี้ขยายออกจากคุณสมบัติของวัตถุที่มีขอบเขต AngularJS ข้อมูลในโมเดลอาจเป็นวัตถุจาวาสคริปต์อาร์เรย์หรือประเภทดั้งเดิมและไม่สำคัญว่ามันเป็นสิ่งสำคัญที่พวกเขาทั้งหมดเป็นของวัตถุ AngularJS
AngularJS รักษาการซิงโครไนซ์แบบสองทิศทางระหว่างโมเดลข้อมูลและอินเตอร์เฟสมุมมอง UI ผ่านขอบเขต เมื่อสถานะของโมเดลเปลี่ยนแปลงไปแล้ว AngularJS จะรีเฟรชทันทีที่สะท้อนในอินเตอร์เฟสมุมมองและในทางกลับกัน
นอกจากนี้ AngularJS ยังมีคุณสมบัติบริการที่มีประโยชน์มาก:
1. บริการพื้นฐานรวมถึงการฉีดพึ่งพา, XHR, แคช, การกำหนดเส้นทาง URL และบริการนามธรรมเบราว์เซอร์
2. คุณสามารถขยายและเพิ่มบริการแอปพลิเคชันเฉพาะของคุณเอง
3. บริการเหล่านี้สามารถทำให้คุณสะดวกมากในการเขียนเว็บแอปพลิเคชัน