ตอนนี้เรากำลังเตรียมที่จะเขียนแอปพลิเคชัน AngularJS - PhoneCat ในขั้นตอนนี้ (ขั้นตอนที่ 0) คุณจะคุ้นเคยกับไฟล์ซอร์สโค้ดที่สำคัญเรียนรู้ที่จะเริ่มสภาพแวดล้อมการพัฒนาที่มีโครงการเมล็ดพืช AngularJS และเรียกใช้แอปพลิเคชันทางด้านเบราว์เซอร์
ป้อนไดเรกทอรีเชิงมุม-ฟีนเนคัทและเรียกใช้คำสั่งต่อไปนี้:
การคัดลอกรหัสมีดังนี้:
git checkout -f step -0
คำสั่งนี้จะรีเซ็ตไดเรกทอรีการทำงานของโครงการ PhoneCat ขอแนะนำให้คุณเรียกใช้คำสั่งนี้ในแต่ละขั้นตอนการเรียนรู้เปลี่ยนหมายเลขในคำสั่งเป็นหมายเลขที่สอดคล้องกับขั้นตอนการเรียนรู้และคำสั่งจะล้างการเปลี่ยนแปลงใด ๆ ที่คุณทำในไดเรกทอรีการทำงาน
เรียกใช้คำสั่งต่อไปนี้:
การคัดลอกรหัสมีดังนี้:
Node Scripts/web-server.js
ในการเริ่มต้นเซิร์ฟเวอร์เทอร์มินัลบรรทัดคำสั่งจะแจ้งให้เซิร์ฟเวอร์ HTTP ทำงานที่ http: // localhost: 8000 โปรดอย่าปิดเทอร์มินัล ปิดเทอร์มินัลจะปิดเซิร์ฟเวอร์ ป้อน http: // localhost: 8000/app/index.html ลงในเบราว์เซอร์ของคุณเพื่อเข้าถึงแอปพลิเคชัน PhoneCat ของเรา
ตอนนี้ในเบราว์เซอร์คุณควรเห็นแอปพลิเคชันเริ่มต้นของเราซึ่งง่าย แต่ก็หมายความว่าโครงการของเราพร้อมที่จะทำงาน
"ยังไม่มีอะไรที่นี่!" แสดงในแอปพลิเคชันถูกสร้างขึ้นจากรหัส HTML ต่อไปนี้ซึ่งมีองค์ประกอบสำคัญของ AngularJs ซึ่งเป็นสิ่งที่เราต้องเรียนรู้
App/index.html
การคัดลอกรหัสมีดังนี้:
<! doctype html>
<html lang = "en" ng-app>
<head>
<meta charset = "utf-8">
<tite> ไฟล์ html ของฉัน </title>
<link rel = "stylesheet" href = "css/app.css">
<link rel = "stylesheet" href = "css/bootstrap.css">
<script src = "lib/angular/angular.js"> </script>
</head>
<body>
<p> ไม่มีอะไรที่นี่ {{'ยัง' + '!'}} </p>
</body>
</html>
รหัสกำลังทำอะไร?
คำสั่ง ng-app:
การคัดลอกรหัสมีดังนี้:
<html lang = "en" ng-app>
คำสั่ง NG-APP ทำเครื่องหมายขอบเขตของสคริปต์ AngularJS การเพิ่มแอตทริบิวต์ NG-APP ใน <HTML> หมายความว่าทั้งหมด <HTML> คือขอบเขตของสคริปต์ AngularJS นักพัฒนายังสามารถใช้คำสั่ง NG-APP ในพื้นที่เช่น <div ng-app> และสคริปต์ AngularJS จะทำงานใน <div> เท่านั้น
แท็กสคริปต์ AngularJS:
การคัดลอกรหัสมีดังนี้:
<script src = "lib/angular/angular.js"> </script>
บรรทัดของรหัสนี้ถูกโหลดลงในสคริปต์ angular.js เมื่อเบราว์เซอร์โหลดหน้า HTML ทั้งหมดสคริปต์ Angular.js จะถูกดำเนินการ หลังจากเรียกใช้สคริปต์ Angular.js มันจะมองหาแท็ก HTML ที่มีคำสั่ง NG-APP แท็กนี้กำหนดขอบเขตของแอปพลิเคชัน AngularJS
การจัดฟันสองครั้งการแสดงออกที่ถูกผูกไว้:
การคัดลอกรหัสมีดังนี้:
<p> ไม่มีอะไรที่นี่ {{'ยัง' + '!'}} </p>
บรรทัดของรหัสนี้แสดงให้เห็นถึงฟังก์ชันหลักของเทมเพลต AngularJS - การเชื่อมโยงซึ่งประกอบด้วยการจัดฟันสองครั้ง {{}} และนิพจน์ 'ยัง' + '!'
การเชื่อมโยงนี้บอก AngularJS ว่าจำเป็นต้องคำนวณการแสดงออกและแทรกผลลัพธ์ลงใน DOM ในขั้นตอนต่อไปเราจะเห็นว่า DOM สามารถอัปเดตได้แบบเรียลไทม์เมื่อผลการดำเนินการนิพจน์เปลี่ยนไป
การแสดงออกของ AngularJS การแสดงออกของมุมเป็นตัวอย่างที่มีลักษณะคล้ายจาวาสคริปต์การแสดงออกของ AngularJS จะทำงานในขอบเขตของ AngularJs เท่านั้นไม่ใช่ใน DOM ทั้งหมด
บูตแอปพลิเคชัน AngularJS
การบูตแอพพลิเคชั่น AngularJS โดยอัตโนมัติผ่านคำสั่ง NGAPP เป็นวิธีที่กระชับเพื่อให้เหมาะกับสถานการณ์ส่วนใหญ่ ในการพัฒนาขั้นสูงเช่นการใช้สคริปต์เพื่อโหลดแอพคุณยังสามารถใช้ bootstrap เพื่อบูตแอปพลิเคชัน AngularJS ด้วยตนเอง
มีสามจุดสำคัญในกระบวนการบูตแอปพลิเคชัน AngularJS:
1. หัวฉีดจะใช้เพื่อสร้างการฉีดพึ่งพาสำหรับแอปพลิเคชันนี้
2. หัวฉีดจะสร้างขอบเขตรูทเป็นขอบเขตของโมเดลแอปพลิเคชันของเรา
3. AngularJS จะเชื่อมโยง DOM ในขอบเขตรากเริ่มต้นด้วยแท็ก HTML ที่ทำเครื่องหมายด้วย NGAPP และค่อยๆจัดการกับคำสั่งและการผูกใน DOM
เมื่อแอปพลิเคชัน AngularJS ถูกบูตแล้วมันจะยังคงฟังเหตุการณ์ HTML ของเบราว์เซอร์เช่นเหตุการณ์การคลิกเมาส์เหตุการณ์การกดปุ่มการตอบสนองที่เข้ามา HTTP ฯลฯ ที่เปลี่ยนโมเดล DOM เมื่อเหตุการณ์ดังกล่าวเกิดขึ้น AngularJS จะตรวจจับการเปลี่ยนแปลงโดยอัตโนมัติและทำการประมวลผลและการอัปเดตที่สอดคล้องกัน
โครงสร้างของแอปพลิเคชันข้างต้นนั้นง่ายมาก แพ็คเกจเทมเพลตมีเพียงคำสั่งเดียวและการผูกคงที่หนึ่งครั้งและโมเดลก็ว่างเปล่า ต่อไปลองแอปพลิเคชันที่ซับซ้อนกว่าเล็กน้อย!
ไฟล์เหล่านี้ในไดเรกทอรีการทำงานของฉันทำอะไร?
แอพพลิเคชั่นข้างต้นมาจากโครงการเมล็ดพันธุ์ AngularJS เรามักจะใช้โครงการ SEED AngularJS เพื่อสร้างโครงการใหม่ โครงการเมล็ดพันธุ์รวมถึงฐานรหัส AngularJS ล่าสุด, ไลบรารีทดสอบ, สคริปต์และตัวอย่างแอปพลิเคชันอย่างง่ายที่มีการกำหนดค่าพื้นฐานที่จำเป็นในการพัฒนาเว็บแอปพลิเคชันทั่วไป
สำหรับบทช่วยสอนนี้เราได้ทำการเปลี่ยนแปลงโครงการเมล็ด AngularJS ต่อไปนี้:
1. ลบแอปพลิเคชันตัวอย่าง
2. เพิ่มภาพโทรศัพท์มือถือลงในแอพ/img/โทรศัพท์/;
3. เพิ่มไฟล์ข้อมูลโทรศัพท์มือถือ (JSON) ลงในแอพ/โทรศัพท์/;
4. เพิ่มไฟล์ bootstrap Twitter ลงในแอป/CSS/และแอพ/img/
ฝึกฝน
ลองเพิ่มนิพจน์ใหม่เกี่ยวกับการดำเนินการทางคณิตศาสตร์เพื่อ index.html:
การคัดลอกรหัสมีดังนี้:
<p> 1 + 2 = {{1 + 2}} </p>
สรุป
ตอนนี้ไปที่ขั้นตอนที่ 1 และเพิ่มเนื้อหาบางส่วนลงในเว็บแอปพลิเคชัน