ในบทนี้เราจะหารือเกี่ยวกับวิธีการตั้งค่าไลบรารี AngularJS เพื่อใช้ในการพัฒนาเว็บแอปพลิเคชัน นอกจากนี้เรายังจะตรวจสอบโครงสร้างไดเรกทอรีและเนื้อหาสั้น ๆ
เมื่อคุณเปิดลิงค์ https://angularjs.org/ คุณจะเห็นว่ามีสองตัวเลือกในการดาวน์โหลดไลบรารี AngularJS:
ดาวน์โหลด GitHub - คลิกปุ่มนี้เพื่อไปที่ GitHub และรับสคริปต์ล่าสุดทั้งหมด
ดาวน์โหลด - หรือคลิกปุ่มนี้แล้วคุณจะเห็น:
หน้าจอนี้ให้ตัวเลือกต่าง ๆ สำหรับการใช้มุม JS ดังนี้:
ดาวน์โหลดและไฟล์ localhost
มีสองตัวเลือกที่แตกต่างกัน: เก่าและล่าสุด ชื่อตัวเองเป็นการอธิบายตนเอง เวอร์ชันเก่าต่ำกว่ารุ่น 1.2.x แล้วและรุ่นล่าสุดคือรุ่น 1.3.x
นอกจากนี้เรายังสามารถใช้เวอร์ชันขนาดเล็กที่ไม่บีบอัดหรือบีบอัดได้
การเข้าถึง CDN: คุณสามารถใช้ 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.3.0-beta.17/angular.min.js"> <h2> ยินดีต้อนรับ {{helloTo.title}} สู่โลกของ yiibai! </h2> </div> <script> angular.module ("myapp", []). controller ("hellocontroller", ฟังก์ชั่น ($ scope) {$ scope.helloto = {}; </script> </body> </html>บทต่อไปนี้อธิบายถึงรหัสด้านบนโดยละเอียด:
รวมถึง AngularJs
เรารวมหน้า HTML ไว้ในไฟล์ JavaScript ของ AngularJs ดังนั้นเราจึงสามารถใช้ AngularJs:
<head> <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"> </script> </head>
ตรวจสอบ AngularJS เวอร์ชันล่าสุดบนเว็บไซต์ทางการ
ชี้ไปที่แอปพลิเคชัน AngularJS
ถัดไปบอกฉันว่าส่วนหนึ่งของ HTML มีแอปพลิเคชัน AngularJS สิ่งนี้สามารถทำได้โดยการวางแอตทริบิวต์ NG-APP ลงในองค์ประกอบ HTML ที่รากของแอปพลิเคชัน AngularJS สามารถเพิ่มลงในองค์ประกอบ HTML หรือองค์ประกอบร่างกายได้ดังนี้:
<body ng-app = "myapp"> </body>
ดู
มุมมองสำหรับส่วนนี้:
<div ng-controller = "hellocontroller"> <h2> ยินดีต้อนรับ {{helloTo.title}} สู่โลกของ yiibai! </h2> </div>NG-Controller บอก AngularJS ว่าตัวควบคุมและมุมมองคืออะไร HelloTo.Title บอก AngularJS ให้เขียนค่าของ "โมเดล" ของ HTML ที่เรียกว่า HelloTo.title ในตำแหน่งนี้
ผู้ควบคุม
ส่วนคอนโทรลเลอร์คือ:
<script> angular.module ("MyApp", []) .Controller ("Hellocontroller", ฟังก์ชั่น ($ scope) {$ scope.helloto = {}; $ scope.helloto.title = "Angularjs";});รหัสนี้ลงทะเบียนฟังก์ชั่น MyApp Module Controller ใน HelloController เราจะเรียนรู้เพิ่มเติมเกี่ยวกับโมดูลและตัวควบคุมในบทที่เกี่ยวข้อง ฟังก์ชั่นคอนโทรลเลอร์ลงทะเบียนที่มุมผ่าน Angular.module (... ) ฟังก์ชั่นคอนโทรลเลอร์ (... )
โมเดลพารามิเตอร์ $ SCOPE ส่งผ่านไปยังฟังก์ชั่นคอนโทรลเลอร์ ฟังก์ชั่นคอนโทรลเลอร์เพิ่มวัตถุ JavaScript ของ HelloTo ซึ่งมีฟิลด์ชื่อเรื่องเพิ่มเข้ามา
ดำเนินการ
บันทึกรหัสด้านบนเป็น myfirstexample.htmlll เปิดในเบราว์เซอร์ใด ๆ คุณจะเห็นผลลัพธ์ต่อไปนี้:
เมื่อหน้าโหลดในเบราว์เซอร์เหตุการณ์ต่อไปนี้จะเกิดขึ้น:
เอกสาร HTML ถูกโหลดลงในเบราว์เซอร์และคำนวณโดยเบราว์เซอร์ ไฟล์ AngularJS JavaScript ถูกโหลดและสร้างวัตถุ Global Angle ถัดไปฟังก์ชั่นควบคุมการลงทะเบียนใน JavaScript จะถูกดำเนินการ
AngularJS สแกนผ่าน HTML เพื่อค้นหาแอปพลิเคชันและมุมมอง AngularJS เมื่อพบมุมมองแล้วมันจะเชื่อมต่อมุมมองกับฟังก์ชั่นคอนโทรลเลอร์ที่เกี่ยวข้อง
ถัดไป AngularJS ดำเนินการฟังก์ชั่นการควบคุม จากนั้นจะแสดงผลมุมมองข้อมูลด้วยโมเดลคอนโทรลเลอร์ที่มีประชากร หน้าพร้อมแล้ว