ما الجديد في Angular v16؟

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

يقدم الإصدار الأخير من Angular 16 تحديثات وتحسينات مثيرة لتجربة التطوير ، بالإضافة إلى أداء واستقرار أفضل للتطبيق.

1. الإشارات الزاويّة

الإشارات الزاويّة هي مكتبة تمكن من تحديد القيم التفاعلية وإنشاء التبعيات بينها. فيما يلي مثال بسيط على كيفية استخدام Angular Signals داخل تطبيق Angular:

@عنصر ({
 المحدد: 'تطبيقي',
 مستقل: حقيقي,
 نموذج: `
{{ الاسم الكامل() }} "setName ('جون')"> انقر فوق </button>
`,
})
يصدّرفصل برنامج {
 الاسم الأول = إشارة ("جين");
 اسم العائلة = إشارة ("ظبية");
 fullName = محسوبة (() =>`${هذا.الاسم الأول()}${هذا.اسم العائلة()}`);
البناء() {
 تأثير(() =>وحدة التحكم.سجل("تم تغيير الاسم:", هذا.الاسم الكامل()))؛
 }
 setName (newName: خيط) {
هذا.firstName.set (newName) ؛
 }
}

ينشئ مقتطف الشفرة أعلاه قيمة محسوبة تسمى fullName ، والتي تعتمد على إشارات firstName و lastName. بالإضافة إلى ذلك ، فهي تحدد تأثيرًا ، وظيفة رد نداء تعمل كلما تغيرت قيمة الإشارات التي تقرأها.

في هذه الحالة ، تعتمد قيمة fullName على الاسم الأول والاسم الأخير ، لذلك يؤدي تغيير أي منهما إلى تشغيل التأثير. عندما يتم تعيين قيمة firstName إلى John ، يقوم المستعرض بتسجيل الرسالة التالية إلى وحدة التحكم:

 تم تغيير الاسم: جون دو.

2. مجموعة مستقلة Ng الجديدة

بدءًا من Angular v16 ، يمكنك إنشاء مشاريع مستقلة جديدة منذ البداية! لتجربة معاينة المطور للخطط المستقلة ، تأكد من تثبيت Angular CLI v16 وقم بتشغيل الأمر التالي:

نانوغرام جديد - مستقل

من خلال القيام بذلك ، ستحصل على هيكل مشروع أبسط بدون أي NgModules. علاوة على ذلك ، ستنتج جميع المولدات في المشروع توجيهات ومكونات وأنابيب مستقلة!

3. تعيين معلمات المسار التلقائي

ضع في اعتبارك تكوين التوجيه على النحو التالي:

يصدّرمقدار ثابت المسارات: المسارات = [{
 طريق: "البحث: / معرف",
 المكون: SearchComponent ،
 حل: {
 تفاصيل البحث: searchResolverFn
 }
}];

قبل Angular 16 ، كنت بحاجة إلى إدخال خدمة ActivatedRoute لاسترداد معلمات URL أو معلمات الاستعلام أو البيانات المرتبطة بعنوان URL معين.

إليك مثال على كيفية القيام بذلك:

@عنصر({
 ...
})
يصدّرفصل عنصر البحث {
 readonly #activatedRoute = injection (ActivatedRoute) ؛
 معرف للقراءة فقط $ = هذا. # activatedRoute.paramMap (خريطة (بارامز => params.get ('بطاقة تعريف')));
 بيانات للقراءة فقط $ = هذا. # activatedRoute.data.map (({
 تفاصيل البحث
 }) => تفاصيل البحث) ؛
}

مع Angular 16 ، لم تعد بحاجة إلى حقن خدمة ActivatedRoute لاسترداد معلمات المسار المختلفة لأنه يمكنك ربطها مباشرة بمدخلات المكون.

لتنشيط هذه الوظيفة في تطبيق يستخدم نظام الوحدة النمطية ، قم بتعيين القيمة المقابلة في خيارات RouterModule:

RouterModule.forRoot (المسارات ، {
 المدخلات: حقيقي
})

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

provideRoutes (المسارات ، withComponentInputBinding ()) ؛

بمجرد تنشيط هذه الوظيفة ، يصبح المكون أبسط بكثير:

@عنصر({
 ...
})
يصدّرفصل عنصر البحث {
@مدخل() بطاقة تعريف!: خيط;
@مدخل() تفاصيل البحث!: تفاصيل البحث ؛
}

4. المدخلات المطلوبة

الميزة المرتقبة للغاية لمجتمع Angular هي القدرة على تحديد مدخلات معينة على النحو المطلوب. حتى الآن ، كان عليك استخدام العديد من الحلول لتحقيق ذلك ، مثل رفع خطأ في NgOnInit دورة الحياة إذا لم يتم تعريف المتغير أو تعديل محدد المكون ليشمل الإلزامي المدخلات.

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

@مدخل({
 مطلوب: حقيقي
}) اسم!: خيط;

5. فايت كخادم ديف

قدمت Angular 14 حزمة JavaScript جديدة تسمى EsBuild ، مما أدى إلى تحسين أوقات البناء بشكل ملحوظ بنسبة 40٪ تقريبًا. ومع ذلك ، يمكنك فقط تحقيق مكاسب الأداء هذه أثناء مرحلة الإنشاء وليس أثناء التطوير باستخدام خادم dev.

في الإصدار القادم من Angular ، أداة Vite build يتيح استخدام EsBuild أثناء التطوير أيضًا.

لتفعيل هذه الميزة ، قم بتحديث تكوين Builder في ملف angular.json على النحو التالي:

"مهندس معماري": {
"يبني": {
"باني": "@ angular-devkit / build-angular: browser-esbuild",
"خيارات": {
 ...
 }
 }

يرجى ملاحظة أن هذه الوظيفة لا تزال تجريبية.

تعزيز تجربة التطوير والأداء

يقدم الإصدار 16 من Angular تحديثات مثيرة مثل Angular Signals لإدارة البيانات والمشروع المستقل الخلق ، وتعيين معلمات المسار التلقائي ، والمدخلات المطلوبة ، وتكامل Vite لتحسينه تطوير. تعمل هذه التحسينات على تحسين تجربة التطوير وزيادة أداء التطبيق.