Aurelia - First Application أوريليا - أول تطبيق

 Aurelia - First Application أوريليا - أول تطبيق

في هذا الفصل ، سنشرح تطبيق بدء Aurelia الذي تم إنشاؤه في الفصل الأخير. سنوجهك أيضًا عبر بنية المجلد ، حتى تتمكن من فهم المفاهيم الأساسية وراء إطار عمل Aurelia.

هيكل المجلد

• يمثل package.json وثائق حول حزم npm المثبتة. يعرض أيضًا إصدار هذه الحزم ويوفر طريقة سهلة لإضافة أو حذف أو تغيير الإصدار أو تثبيت جميع الحزم تلقائيًا عندما يحتاج التطبيق إلى المشاركة بين المطورين.

• index.html هي الصفحة الافتراضية للتطبيق كما هو الحال في معظم التطبيقات المستندة إلى HTML. إنه مكان يتم فيه تحميل البرامج النصية وأوراق الأنماط.

• config.js هو ملف تكوين محمل Aurelia. لن تقضي الكثير من الوقت في العمل مع هذا الملف.

• jspm_packages هو دليل الوحدات النمطية المحملة في SystemJS .

• الأنماط هو دليل التصميم الافتراضي. يمكنك دائمًا تغيير المكان الذي تحتفظ فيه بملفات التصميم الخاصة بك.

• مجلد src هو المكان الذي ستقضي فيه معظم وقت التطوير. يحتفظ بملفات HTML و js .

ملفات المصدر

كما ذكرنا بالفعل ، فإن دليل src هو المكان الذي سيتم فيه الاحتفاظ بمنطق التطبيق الخاص بك. إذا نظرت إلى التطبيق الافتراضي يمكنك أن ترى أن app.js و app.html بسيطان للغاية.

يسمح لنا Aurelia باستخدام لغة JavaScript الأساسية لتعريفات الفئات. يظهر المثال الافتراضي التالي فئة EC6.

app.js

export class App {
   message = 'Welcome to Aurelia!';
}

ترتبط خاصية الرسالة بقالب HTML باستخدام بناء جملة $ {message} . يمثل بناء الجملة هذا ارتباطًا أحادي الاتجاه تم تحويله إلى سلسلة ويتم عرضه داخل عرض القالب.

app.html

<template>
   <h1>${message}</h1>
</template>

كما ناقشنا بالفعل في الفصل الأخير ، يمكننا بدء تشغيل الخادم عن طريق تشغيل الأمر التالي في نافذة موجه الأوامر .

C:\Users\username\Desktop\aureliaApp>http-server -o -c-1

سيتم تقديم الطلب على الشاشة.