Aurelia - การสมัครครั้งแรก
ในบทนี้เราจะอธิบายแอปเริ่มต้นของ Aurelia ที่สร้างขึ้นในบทสุดท้ายของเรา นอกจากนี้เราจะแนะนำคุณตลอดโครงสร้างโฟลเดอร์เพื่อให้คุณเข้าใจแนวคิดหลักที่อยู่เบื้องหลังกรอบงาน Aurelia
โครงสร้างโฟลเดอร์
package.json แสดงถึงเอกสารเกี่ยวกับ npmติดตั้งแพ็คเกจแล้ว นอกจากนี้ยังแสดงเวอร์ชันของแพ็กเกจเหล่านั้นและให้วิธีง่ายๆในการเพิ่มลบเปลี่ยนเวอร์ชันหรือติดตั้งแพ็กเกจทั้งหมดโดยอัตโนมัติเมื่อต้องแชร์แอพระหว่างนักพัฒนา
index.htmlเป็นหน้าเริ่มต้นของแอปเหมือนกับในแอปที่ใช้ HTML ส่วนใหญ่ เป็นที่สำหรับโหลดสคริปต์และสไตล์ชีต
config.jsคือไฟล์คอนฟิกูเรชันตัวโหลด Aurelia คุณจะใช้เวลาไม่มากในการทำงานกับไฟล์นี้
jspm_packages เป็นไดเร็กทอรีสำหรับไฟล์ SystemJS โหลดโมดูล
stylesเป็นไดเร็กทอรีสไตล์เริ่มต้น คุณสามารถเปลี่ยนสถานที่เก็บไฟล์สไตล์ได้ตลอดเวลา
srcโฟลเดอร์คือสถานที่ที่คุณจะใช้เวลาส่วนใหญ่ในการพัฒนา มันช่วยHTML และ js ไฟล์.
ไฟล์ต้นฉบับ
ตามที่เราได้ระบุไว้แล้วไฟล์ srcไดเร็กทอรีคือสถานที่ที่จะใช้ลอจิกแอปของคุณ หากคุณดูแอปเริ่มต้นคุณจะเห็นสิ่งนั้นapp.js และ app.html ง่ายมาก
Aurelia ช่วยให้เราใช้ภาษาหลักของ JavaScript สำหรับคำจำกัดความของคลาส ตัวอย่างเริ่มต้นต่อไปนี้แสดงคลาส EC6
app.js
export class App {
message = 'Welcome to Aurelia!';
}
message คุณสมบัติถูกผูกไว้กับเทมเพลต HTML โดยใช้ ${message}ไวยากรณ์ ไวยากรณ์นี้แสดงถึงการผูกแบบทางเดียวที่แปลงเป็นสตริงและแสดงภายในมุมมองเทมเพลต
app.html
<template>
<h1>${message}</h1>
</template>
ดังที่เราได้กล่าวไปแล้วในบทที่แล้วเราสามารถเริ่มเซิร์ฟเวอร์ได้โดยเรียกใช้คำสั่งต่อไปนี้ในไฟล์ command prompt หน้าต่าง.
C:\Users\username\Desktop\aureliaApp>http-server -o -c-1
แอปพลิเคชันจะแสดงบนหน้าจอ