Pug

بالطبع، إليك دليل سريع لإضافة Pug إلى Angular CLI. يعد Pug أداة قوية لتوليد HTML بشكل أكثر قراءة وفهمًا، ويمكنك الاستفادة منها بشكل كبير في تطوير تطبيقات Angular. دعني أشرح الخطوات بشكل مفصل:

1. أولاً وقبل كل شيء، تأكد من أنك قمت بتثبيت Angular CLI بنجاح وأن لديك مشروع Angular جاهز للعمل.

2. قم بتثبيت مكتبة Pug عبر npm. يمكنك القيام بذلك بفتح محطة الأوامر (Command Prompt) أو تيرمينال وتنفيذ الأمر التالي:

   cssCopy code
   npm install pug --save
   

3. بعد تثبيت Pug بنجاح، قم بتكوين Angular CLI لاستخدام Pug كمحرّر للقوالب.

4. قم بفتح ملف angular.json في مجلد مشروع Angular الخاص بك. هذا الملف يحتوي على إعدادات مشروع Angular الخاص بك.

5. ابحث عن المفتاح "builder" في ملف angular.json والذي يحدد المُنشئ (Builder) المستخدم لبناء المشروع. عادةً ما يكون المُنشئ "builder" هو @angular-devkit/build-angular:browser.

6. ضمن المُنشئ، ابحث عن مفتاح "options" ومن ثم "aot"، وقم بإضافة "assets" داخل "options" إذا لم يكن موجودًا بالفعل.

7. بعد ذلك، قم بإضافة "pugLoader" إلى مفتاح "assets" الذي أضفته سابقًا داخل المُنشئ. يجب أن تكون القيمة له مسارًا نحو المجلد الذي تحتوي فيه ملفات Pug. على سبيل المثال، إذا كانت ملفات Pug موجودة في مجلد src/app, فقم بتعيين المسار كالتالي:

   cssCopy code
   "pugLoader": {
     "input": "src/app",
     "output": "app"
   }
   

   حيث "input" هو المسار إلى مجلد ملفات Pug الخاص بك، و "output" هو المسار الذي ستتم فيه عملية البناء لتوليد الملفات HTML المقابلة.

8. بعد القيام بذلك، يمكنك الآن بدء استخدام ملفات Pug في مشروع Angular الخاص بك. قم بإنشاء ملفات قوالب جديدة بامتداد .pug بدلاً من .html، وستقوم Angular CLI بتحويلها إلى HTML عند عملية البناء.

بهذا، يكون قد تم إعداد Angular CLI لاستخدام Pug كمحرّر للقوالب. الآن يمكنك البدء في كتابة قوالب Pug الخاصة بك والتمتع بالتطوير السلس والفعّال في تطبيقات Angular الخاصة بك. إذا كانت هناك أي استفسارات إضافية، فلا تتردد في طرحها!

بالتأكيد، دعني أوسع شرحي للخطوات المذكورة لضمان فهم أعمق لكيفية إضافة Pug إلى Angular CLI.

أولاً، لنلقِ نظرة عامة على ما هو Pug ولماذا يمكن أن يكون مفيدًا في تطوير تطبيقات Angular.

Pug هو محرّر للقوالب يهدف إلى جعل كتابة HTML أكثر قراءةً وفهمًا. بدلاً من استخدام علامات HTML التقليدية مثل

When using Pug (formerly Jade) templating engine in your Node.js and Express application, you might encounter issues with variable interpolation inside anchor href attributes. To correctly inject variables into the href attribute of anchor links, you need to use string interpolation syntax, which is different from how it’s done in the Jade syntax.

Here’s how you can fix the issue in your code:

pugCopy code
table.table.table-striped
  thead
    tr
      th Name
      th Id
  tbody
    each room in rooms
      tr
        td(style="width: 50px;")
          a(href='/admin/rooms/delete/' + room.id) Delete
        td= allTitleCase(room.name)
        td= room.id

In the above code, the a(href='/admin/rooms/delete/' + room.id) syntax concatenates the string '/admin/rooms/delete/' with the value of room.id, effectively injecting the room.id value into the href attribute of the anchor tag.

Using string interpolation with #{} syntax as in your example does not work in Pug for anchor href attributes. Instead, you should concatenate the strings directly to achieve the desired result.

Make sure to replace allTitleCase(room.name) with the appropriate function or variable for your use case.

عند استخدام محرك التخطيط Pug في تطبيقك Node.js و Express، يمكن أن تواجه مشاكل في تضمين المتغيرات داخل سمات href للروابط الخاصة بالمراسلة. لتضمين المتغيرات بشكل صحيح داخل سمات href لروابط الأنكور، يجب عليك استخدام بناء جملة التخطيط التسلسلي النصي، والذي يختلف عن كيفية القيام به في بناء الجيدة.

هنا كيف يمكنك حل المشكلة في الكود الخاص بك:

cssCopy code
table.table.table-striped
  thead
    tr
      th Name
      th Id
  tbody
    each room in rooms
      tr
        td(style="width: 50px;")
          a(href='/admin/rooms/delete/' + room.id) Delete
        td= allTitleCase(room.name)
        td= room.id

في الكود أعلاه، تقوم بتوصيل سلسلة '/admin/rooms/delete/' بقيمة room.id، مما يحقق تضمين قيمة room.id داخل سمة href لعلامة الأنكور.

استخدام تضمين السلسلة مع النص #{} كما هو الحال في مثالك لا يعمل في Pug لسمات href لروابط الأنكور. بدلاً من ذلك، يجب عليك دمج السلاسل مباشرة لتحقيق النتيجة المطلوبة.

تأكد من استبدال allTitleCase(room.name) بالدالة أو المتغير المناسب لحالتك.

رسالة الخطأ “input is a self closing element but contains nested content” تعني أن عنصر الـ يتم إغلاقه ذاتيًا بواسطة /، وبالتالي لا يمكن أن يحتوي على محتوى مدمج (nested content) داخله.

في الكود الذي وضعته، أنت تحاول إنشاء عنصر مع عنصر المدمج به. لكن بسبب طبيعة عنصر الـ الذي يجب أن يكون فارغًا ولا يحتوي على محتوى، فإن Pug/ Jade يُعرض عنصر الـ كعنصر مستقل ويعتبر المحتوى المدمج بعد الـ كمحتوى عادي.

لتصحيح الكود، يمكنك وضع عنصر الـ داخل العنصر بشكل منفصل مع وضع النص المحتوى (Visible) بعد ذلك. الكود الصحيح يمكن أن يكون على هذا النحو:

pugCopy code
label.radio-inline
    input(type="radio", name="hidden", value="0", checked="")
    | Visible

هذا الكود يقوم بإنشاء عنصر مع الفئة radio-inline، ثم يضيف عنصر داخله، وأخيرًا يضيف النص “Visible” كمحتوى نصي بعد الـ .

بعد تعديل الكود على هذا النحو، يجب أن تتمكن من إنشاء العنصر المطلوب بدون أي أخطاء.

في Pug/ Jade، يُستخدم | لتحديد نص متعدد الأسطر. يمكنك استخدام | لتضمين النص المتعدد الأسطر كمحتوى نصي داخل عنصر معين.

عند استخدام |، يجب أن تبدأ كل سطر جديد بمسافة أربعة مسافات للتأكيد على أنه جزء من النص المتعدد الأسطر. يمكنك تحرير الكود ليبدو كالتالي:

pugCopy code
label.radio-inline
    input(type="radio", name="hidden", value="0", checked="")
    | Visible

هذا الكود سيُنشئ العنصر مع الفئة radio-inline، ثم يضيف عنصر داخله، وبعد ذلك يضيف النص “Visible” كمحتوى نصي داخل العنصر .

باستخدام هذا النهج، يمكنك إنشاء العنصر المطلوب دون أي أخطاء.

In Jade/Pug, you can add a style tag in the header by using the pipe (|) followed by your CSS code. Here’s how you can achieve this:

jadeCopy code
html
  head
    style(type="text/css").
      table {
        width: 100%;
      }
  body
    table

The | is used to indicate a block of text in Jade/Pug, which is then rendered as-is without any interpretation. This should help you include your CSS code in the header without any syntax errors.

في لغة Jade/Pug، يمكنك إضافة عنصر