อธิบายโครงสร้างโปรเจกต์

พื้นที่ทำงานของ Angular มีโครงสร้างที่คาดเดาได้ การรู้จักไฟล์และโฟลเดอร์สำคัญจะช่วยให้คุณไปยังส่วนต่าง ๆ ของโครงการได้ทุกโครงการ

โฟลเดอร์ src/ เก็บซอร์สโค้ดของแอปพลิเคชัน ได้แก่ จุดเริ่มต้น โค้ดของแอป และทรัพยากรส่วนกลาง เช่น index.html และสไตล์ต่าง ๆ

src/main.ts คือจุดเริ่มต้นของแอปพลิเคชัน โดยจะเริ่มต้นคอมโพเนนต์รากด้วย bootstrapApplication

src/index.html คือหน้า HTML เพียงหน้าเดียว ภายใน body มีตัวเลือกของคอมโพเนนต์ราก ซึ่งเป็นตำแหน่งที่ Angular แสดงผลแอป

src/app/ เก็บคอมโพเนนต์ บริการ เส้นทาง และการกำหนดค่าของแอป โครงการใหม่จะมี app.component, app.config.ts และ app.routes.ts

โดยปกติคอมโพเนนต์รากจะประกอบด้วยคลาส .ts แม่แบบ .html และสไตล์ชีต .css (หรือ .scss) รวมถึงไฟล์การทดสอบ .spec.ts

app.config.ts ส่งออก ApplicationConfig ที่มีอาร์เรย์ผู้ให้บริการซึ่งใช้ระหว่างการเริ่มต้นระบบ เช่น ตัวจัดการเส้นทางและไคลเอ็นต์ HTTP

app.routes.ts ส่งออกอาร์เรย์คำจำกัดความเส้นทางที่ provideRouter นำไปใช้

ที่รากของพื้นที่ทำงาน angular.json ใช้กำหนดค่า CLI ได้แก่ เป้าหมายการสร้าง เส้นทางเอาต์พุต ทรัพยากร สไตล์ และตัวเลือกการให้บริการสำหรับแต่ละโครงการ

package.json แสดงรายการสิ่งที่ต้องพึ่งพาและสคริปต์ npm ส่วนไฟล์ tsconfig.json ใช้กำหนดค่าคอมไพเลอร์ TypeScript สำหรับแอปและการทดสอบ

ไฟล์แบบสแตติก เช่น รูปภาพ แบบอักษร และไอคอนเว็บไซต์ จะอยู่ในโฟลเดอร์ public หรือ assets และถูกคัดลอกไปยังเอาต์พุตการสร้างตามที่กำหนดไว้ใน angular.json

คุณได้สำรวจพื้นที่ทำงานแล้ว: src/ สำหรับซอร์สโค้ด, main.ts เป็นจุดเริ่มต้น, index.html เป็นหน้าโฮสต์, app/ สำหรับคอมโพเนนต์และการกำหนดค่า และ angular.json สำหรับการกำหนดค่า CLI ขั้นถัดไป: การสร้างโค้ดด้วย CLI