| وجه المقارنة المعمارية | المعالجة التقليدية داخل صنف المكون (Component Methods) | استخدام الأنابيب في أنجولر (Angular Pipes) |
|---|---|---|
| مكان تنفيذ عملية التحويل | داخل دوال وخصائص صنف المكون (TypeScript Class Logic) | مباشرة داخل قالب العرض باستخدام رمز الخط العمودي (|) |
| إعادة الاستخدام البرمجي | محدودة وتحتاج لكتابة نفس دالة التحويل عبر عدة مكونات مختلفة | قابلة لإعادة الاستخدام الفوري في أي قالب داخل التطبيق وبدون تكرار للشفرة |
| التأثير على دورة التحقق من الأداء | تتطلب أحياناً إدارة يدوية لكشف التغييرات أو استدعاء الدوال باستمرار مع كل تحديث | مدعومة بنظام التحسين التلقائي للأنابيب النقية (Pure Pipes) في أحدث الإصدارات |
في تطبيقات الويب الحقيقية، غالباً ما نستقبل البيانات من الخوادم بصيغ خام (مثل تواريخ بصيغة ISO، أرقام عشريّة طويلة، أو نصوص تتطلب تنسيق حالة الأحرف). الأنابيب (Pipes) هي أدوات معمارية مصممة خصيصاً داخل أنجولر لتنقيح وتحويل هذه البيانات مباشرة داخل القوالب (HTML Templates) بطريقة نظيفة، تصريحية (Declarative)، وبأعلى كفاءة في الأداء.
يعتمد بناء الأنابيب على تمرير البيانات الخام من اليسار إلى اليمين باستخدام رمز الخط العمودي (Pipe Operator), متبوعاً باسم الأنبوب المراد تطبيقه. يمكنك أيضاً ربط عدة أنابيب ببعضها البعض (Chaining Pipes) لتنفيذ عمليات تحويل متسلسلة بدقة متناهية.
بدلاً من إجهاد صنف المكون (TypeScript Component) بكتابة دوال معقدة لتنسيق النصوص والأرقام والتواريخ، تتيح لك الأنابيب تركيز صنف المكون على إدارة الحالة والأعمال فقط، بينما يتولى الأنبوب مسؤولية المظهر النهائي للبيانات في واجهة المستخدم.
| 1 | import { Component } from '@angular/core'; |
| 2 | import { CommonModule } from '@angular/common'; |
| 3 | |
| 4 | @Component({ |
| 5 | selector: 'app-pipes-intro-demo', |
| 6 | standalone: true, |
| 7 | imports: [CommonModule], |
| 8 | template: ` |
| 9 | <div class="master-container"> |
| 10 | <h3>مقدمة حول الأنابيب (Pipes) في Angular 22.1</h3> |
| 11 | <p>شاهد كيف يتم تحويل البيانات الخام وعرضها بصيغ منسقة ونظيفة:</p> |
| 12 | |
| 13 | <div class="data-card"> |
| 14 | <p><strong>النص الخام الأصلي:</strong> {{ rawTitle }}</p> |
| 15 | <p><strong>النص بعد تطبيق أنبوب الحروف الكبيرة (uppercase):</strong> {{ rawTitle | uppercase }}</p> |
| 16 | <p><strong>النص بعد تطبيق أنبوب الحروف الصغيرة (lowercase):</strong> {{ rawTitle | lowercase }}</p> |
| 17 | <p><strong>النص بعد تطبيق أنبوب العنوان (titlecase):</strong> {{ rawTitle | titlecase }}</p> |
| 18 | </div> |
| 19 | |
| 20 | <div class="data-card"> |
| 21 | <p><strong>تاريخ اليوم الخام:</strong> {{ todayDate }}</p> |
| 22 | <p><strong>التاريخ بعد تنسيق الأنبوب (date: 'fullDate'):</strong> {{ todayDate | date: 'fullDate' }}</p> |
| 23 | </div> |
| 24 | </div> |
| 25 | `, |
| 26 | styles: [` |
| 27 | .master-container { background: #090d16; color: #fff; padding: 24px; border-radius: 12px; } |
| 28 | .data-card { background: #1e293b; color: #38bdf8; padding: 16px; border-radius: 8px; margin: 12px 0; border: 1px solid #334155; font-weight: bold; } |
| 29 | .data-card p { margin: 8px 0; color: #e2e8f0; } |
| 30 | `] |
| 31 | }) |
| 32 | export class PipesIntroDemoComponent { |
| 33 | rawTitle = 'welcome to angular 22.1 advanced architecture masterclass'; |
| 34 | todayDate = new Date(); |
| 35 | } |
| 1 | import { Component } from '@angular/core'; |
| 2 | import { CommonModule } from '@angular/common'; |
| 3 | |
| 4 | @Component({ |
| 5 | selector: 'app-advanced-pipes-demo', |
| 6 | standalone: true, |
| 7 | imports: [CommonModule], |
| 8 | template: ` |
| 9 | <div class="master-container"> |
| 10 | <h3>أمثلة متقدمة: دمج الأنابيب (Chaining) وتنسيق الأرقام</h3> |
| 11 | <p>تتيح لك أنجولر تطبيق أكثر من أنبوب على نفس البيانات بالتسلسل:</p> |
| 12 | |
| 13 | <div class="data-card"> |
| 14 | <p><strong>النص الخام:</strong> {{ sampleText }}</p> |
| 15 | <p><strong>تطبيق سلاسل الأنابيب (uppercase + slice):</strong> {{ sampleText | uppercase | slice: 0: 15 }}...</p> |
| 16 | </div> |
| 17 | |
| 18 | <div class="data-card"> |
| 19 | <p><strong>الرقم الخام:</strong> {{ rawNumber }}</p> |
| 20 | <p><strong>تنسيق الرقم العشري (digits: '3.2-5'):</strong> {{ rawNumber | number: '3.2-5' }}</p> |
| 21 | </div> |
| 22 | </div> |
| 23 | `, |
| 24 | styles: [` |
| 25 | .master-container { background: #090d16; color: #fff; padding: 24px; border-radius: 12px; margin-top: 16px; } |
| 26 | .data-card { background: #1e293b; color: #38bdf8; padding: 16px; border-radius: 8px; margin: 12px 0; border: 1px solid #334155; font-weight: bold; } |
| 27 | .data-card p { margin: 8px 0; color: #e2e8f0; } |
| 28 | `] |
| 29 | }) |
| 30 | export class AdvancedPipesDemoComponent { |
| 31 | sampleText = 'angular pipes chaining mechanism in 22.1 version'; |
| 32 | rawNumber = 12345.6789; |
| 33 | } |
| 1 | import { Component } from '@angular/core'; |
| 2 | import { CommonModule } from '@angular/common'; |
| 3 | |
| 4 | @Component({ |
| 5 | selector: 'app-text-formatting-demo', |
| 6 | standalone: true, |
| 7 | imports: [CommonModule], |
| 8 | template: ` |
| 9 | <div class="master-container"> |
| 10 | <h3>تنسيق النصوص المتقدم وتقطيع السلاسل باستخدام الأنابيب</h3> |
| 11 | <p>تطبيق أنبوب العرض `slice` لاقتصاص الجمل الطويلة بدقة عالية:</p> |
| 12 | |
| 13 | <div class="data-card"> |
| 14 | <p><strong>الوصف الكامل:</strong> {{ longDescription }}</p> |
| 15 | <p><strong>الوصف المختصر (بعد استخدام slice: 0: 40):</strong> {{ longDescription | slice: 0: 40 }}...</p> |
| 16 | </div> |
| 17 | </div> |
| 18 | `, |
| 19 | styles: [` |
| 20 | .master-container { background: #090d16; color: #fff; padding: 24px; border-radius: 12px; margin-top: 16px; } |
| 21 | .data-card { background: #1e293b; color: #38bdf8; padding: 16px; border-radius: 8px; margin: 12px 0; border: 1px solid #334155; font-weight: bold; } |
| 22 | .data-card p { margin: 8px 0; color: #e2e8f0; } |
| 23 | `] |
| 24 | }) |
| 25 | export class TextFormattingDemoComponent { |
| 26 | longDescription = 'هذه الجملة طويلة جداً وتمثل وصفاً تفصيلياً لمنتج أو مقال سيتم اقتطاعه بعناية داخل واجهة المستخدم باستخدام الأنابيب البرمجية المدمجة في أنجولر.'; |
| 27 | } |