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

แอปพลิเคชันจะแสดงบนหน้าจอ