Arabic Knowledge blog مدونة المعرفة العربية

 Aurelia - Debugging اقتناص الأخطاء او التصحيح أوريليا في هذا الفصل ، ستتعلم كيفية إضافة مصحح سياق Aurelia كامتداد chrome. ملاحظة  - قبل إضافة الامتداد ، يجب أن يكون لديك  ملفات  أدوات aurelia  .  إذا لم يكن لديك ، يمكنك التحقق من فصل الأدوات. الخطوة 1 - افتح ملحقات كروم أسهل طريقة لفتح ملحقات chrome هي تشغيل الكود التالي في شريط عنوان URL بالمتصفح. chrome://extensions الخطوة 2 - إضافة ملحق نظرًا لأن هذا الامتداد غير متاح حتى الآن من متجر Chrome ، تحقق من  مربع اختيار  وضع التطوير  وانقر فوق  تحميل الإضافات غير المضغوطة  .  سيؤدي هذا إلى فتح نافذة صغيرة حيث يمكنك اختيار الامتداد المراد إضافته. في هذا المثال ، دعنا نختار مجلد Desktop / aurelia-projects / tools / Context-debugger ونفتحه. الآن ، يمكننا أن نرى أن الامتداد يتم تحميله في المتصفح. يمكننا أيضًا التحقق من وحدة تحكم المطورين.  عندما  نضغط على  علامة تبويب  العناصر  ، سنرى  خصائص aurelia  في الركن الأيمن السفلي.

 Aurelia - Bundling أوريليا - تجميع في هذا الفصل ، ستتعلم كيفية استخدام التجميع في إطار عمل Aurelia. الخطوة 1 - تثبيت المتطلبات الأساسية يمكنك تثبيت  aurelia-bundler  عن طريق تشغيل الأمر التالي في  موجه الأوامر  . C:\Users\username\Desktop\aureliaApp>npm install aurelia-bundler --save-dev إذا لم يكن لديك برنامج gulp مثبتًا ، فيمكنك تثبيته عن طريق تشغيل هذا الرمز. C:\Users\username\Desktop\aureliaApp>npm install gulp يمكنك أيضًا تثبيت  حزمة  request  -dir  من  npm  . C:\Users\username\Desktop\aureliaApp>npm install require-dir الخطوة 2 - إنشاء مجلدات وملفات أولاً ، أنشئ  ملف  gulpfile.js  في دليل جذر التطبيقات. C:\Users\username\Desktop\aureliaApp>touch gulpfile.js C:\Users\username\Desktop\aureliaApp>mkdir build C:\Users\username\Desktop\aureliaApp\build>mkdir tasks تحتاج إلى إنشاء  ملف  bundle.js  داخل  مجلد  المهام  . C:\Users\username\Desktop\aureliaApp\build\tasks...

 Aurelia - Tools أوريليا - أدوات في هذا الفصل ، سوف تتعلم كيفية إعداد واستخدام  أدوات aurelia  . الخطوة 1 - المجلد الجذر لنقم بإنشاء مجلد جذر حيث سنحتفظ بجميع تطبيقات Aurelia. C:\Users\username\Desktop>mkdir aurelia-projects الخطوة 2 - أدوات أوريليا داخل  مجلد  aurelia-projects  ، سنقوم باستنساخ  مستودع  أدوات aurelia  من github. C:\Users\username\Desktop\aurelia-projects>git clone https://github.com/aurelia/tools.git الخطوة 3 - إنشاء مشروع جديد لبدء مشروع Aurelia جديد ، فإن الطريقة الموصى بها هي استخدام أحد  الهياكل العظمية aurelia  .  دعونا استنساخ الهياكل العظمية Aurelia من البوابة. C:\Users\username\Desktop\aurelia-projects>git clone https://github.com/aurelia/skeleton-navigation.git نحتاج أيضًا إلى تثبيت الحزم والوحدات والتبعيات.  يمكنك الاختيار من بين العديد من تطبيقات الهيكل العظمي.  سوف نستخدم  skeleton-es2016  . C:\Users\username\Desktop\aurelia-projects\skeleton-navigation\skeleton-es2016...

 Aurelia - Localization أوريليا - التعريف او الترجمة تقدم Aurelia  البرنامج المساعد  i18n  .  في هذا الفصل ، ستتعلم كيفية ترجمة تطبيقك باستخدام هذا المكون الإضافي. الخطوة 1 - تثبيت البرنامج المساعد افتح  نافذة  موجه الأوامر  وقم بتشغيل الكود التالي لتثبيت  المكون الإضافي  i18n  . C:\Users\username\Desktop\aureliaApp>jspm install aurelia-i18n نحتاج أيضًا إلى تثبيت المكون الإضافي الخلفي. C:\Users\username\Desktop\aureliaApp>jspm install npm:i18next-xhr-backend الخطوة 2 - إنشاء مجلدات وملفات في المجلد الجذر للمشروع ، نحتاج إلى إنشاء  دليل  محلي  . C:\Users\username\Desktop\aureliaApp>mkdir locale في هذا المجلد ، تحتاج إلى إضافة مجلدات جديدة لأي لغة تريدها.  سننشئ  en  مع  ملف  translation.js  بداخله. C:\Users\username\Desktop\aureliaApp\locale>mkdir en C:\Users\username\Desktop\aureliaApp\locale\en>touch translation.json الخطوة 3 - استخدم البرنامج المساعد تحتاج إلى استخدام...

 Aurelia - Dialog صندوق الحوار أوريليا تقدم Aurelia طريقة لتنفيذ نافذة الحوار (المشروطة).  في هذا الفصل ، سنوضح لك كيفية استخدامه. الخطوة 1 - تثبيت البرنامج المساعد للحوار يمكن تثبيت البرنامج المساعد Dialog من  نافذة  موجه الأوامر  . C:\Users\username\Desktop\aureliaApp>jspm install aurelia-dialog لكي يعمل هذا البرنامج المساعد ، نحتاج إلى استخدام التمهيد اليدوي.  لقد غطينا هذا في فصل التكوين.  داخل  ملف  main.js  ، نحتاج إلى إضافة  المكون الإضافي  aurelia-الحوار  . main.js export function configure ( aurelia ) { aurelia . use . standardConfiguration () . developmentLogging () . plugin ( 'aurelia-dialog' ); aurelia . start (). then (() => aurelia . setRoot ()); } الخطوة 2 - إنشاء مجلدات وملفات أولاً ، سنقوم بإنشاء دليل جديد يسمى  modal  .  دعنا نضعه داخل  مجلد  المكونات  .  افتح  موجه الأوامر  وقم بتشغيل التعليمات البرمجية التالية. C:\Users\usern...

 Aurelia - Animations أوريليا - صور متحركة في هذا الفصل ، ستتعلم كيفية استخدام الرسوم المتحركة لـ CSS في إطار عمل Aurelia. الخطوة 1 - عرض ستحتوي طريقة العرض الخاصة بنا على عنصر واحد سيتم تحريكه وزر لتشغيل  وظيفة  animateElement ()  . app.html <template> <div class = "myElement" ></div> <button click . delegate = "animateElement()" > ANIMATE </button> </template> الخطوة 2 - عرض النموذج داخل ملف JavaScript الخاص بنا ،  سنستورد  المكون الإضافي  CssAnimator ونحقنه  كتبعية.  و  animateElement  وظيفة استدعاء الرسوم المتحركة لبدء الرسوم المتحركة.  سيتم إنشاء الرسوم المتحركة في الخطوة التالية. import { CssAnimator } from 'aurelia-animator-css' ; import { inject } from 'aurelia-framework' ; @inject ( CssAnimator , Element ) export class App { constructor ( animator , element ) { this . animator = animator ; this . element = element ; } animat...