1) حقن الخدمات في Angular 14 بدون مُنشئ باستخدام inject.
في السابق، كان الفصل الذي يحتوي على مُنشئ مطلوبًا دائمًا لإدخال أي خدمة:

class MyClass {
  constructor(private myService: MyService) {}
}

الآن، يمكننا إدخال خدمة في كل من الوظائف والفئات. نحتاج فقط إلى الإعلان عن متغير وضبطه على قدم المساواة مع اسم الخدمة الموجود داخل:

const myService = inject(MyService);
وهذا مفيد، على سبيل المثال، في المعترضات والحراس، والتي يتم إجراؤها الآن بشكل شائع باستخدام الوظائف بدلاً من الفئات.

2) علامة الإغلاق الذاتي لحفظ الأسطر في Angular 15.
بدءًا من هذا الإصدار، يمكنك استخدام مكون بعلامة واحدة:

في السابق، كان من الضروري فتح وإغلاق علامة مكون لاستخدامها:

3) قلل وارداتك في Angular عن طريق إنشاء اختصارات.
بدلاً من وجود واردات طويلة مثل هذه:

استيراد { MyComponent } من '../../components/my-component';
يمكنك تقصير الواردات مثل هذا:

استيراد { MyComponent } من '@components/my-component';
لتحقيق ذلك، انتقل إلى ملف tsconfig.json وأضف مسارات ضمن خاصية compilerOptions. داخل المسارات، يمكنك تكوين اختصارات الاستيراد الخاصة بك:

{
  "compilerOptions": {
    "paths": {
      "@components/*": ["src/app/components/*"]
    }
  }
}

التوصية هي أنه إذا كنت داخل مكون وتريد استخدام شيء محدد لذلك المكون، فاستورده نسبيًا باستخدام ./ للوصول إلى هذا المورد. ولكن عند الوصول إلى المجلد الأصلي، استخدم الاختصار @. إذا واجهت مشكلات، فقد تحتاج إلى إغلاق Visual Studio Code وإعادة فتحه. تُحدث هذه التفاصيل الصغيرة فرقًا في الحفاظ على الكود منظمًا قدر الإمكان.

4) تحسين تحميل الصور باستخدام توجيه NgOptimizedImage في Angular 15.
إذا كانت لدينا قائمة تحتوي على 15 صورة وقمنا بالتكرار عبرها بشكل طبيعي باستخدام [src]، فسنواجه مشكلة تحميل جميع الصور الـ 15 مرة واحدة عند بدء تشغيل التطبيق، مما يقلل الأداء:

لإصلاح هذه المشكلة، توفر Angular التوجيه NgOptimizedImage. لاستخدامه، ما عليك سوى استيراده:

استيراد { NgOptimizedImage } من '@angular/common';
واستخدم [ngSrc] بدلاً من [src]. سيؤدي هذا إلى تحميل الصور بتكاسل، مما يؤدي إلى تحسين الأداء. ومع ذلك، يحتوي التوجيه على العديد من التكوينات الأخرى. إذا كنت تريد التحميل البطيء فقط، فإنني أوصي باستخدام سمة التحميل = "lazy"، والتي تعد جزءًا من معيار HTML ومتوافقة مع جميع المتصفحات:

توصية: إذا كانت لديك صورة رئيسية في أعلى القائمة، فلا تقم بتعيينها على التحميل البطيء، لأنها ستكون أول صورة يتم تحميلها عند فتح التطبيق. قم بتطبيق هذا فقط على الصور التي قد تظهر أسفل التمرير، لأننا لا نحتاج إلى تحميلها على الفور.

هذا مهم جدًا للتطبيقات العامة، مثل تطبيقات SSR التي تحتاج إلى تحسين محركات البحث بشكل جيد، حيث يساعد في تحسين الأداء.

— ملاحظات مبنية على دورة Angular المقدمة من EfisioDev —