Angular js دورة

‫الرحيم‬ ‫الرحمن‬ ‫هللا‬ ‫بسم‬
‫دورة‬AngularJS
‫تقدٌم‬:‫حمٌد‬ ‫أبو‬ ‫حكمت‬ ‫أنٌس‬.
ً‫اإللكترون‬ ‫البرٌد‬:aneeshikmat@2nees.com
ً‫اإللكترون‬ ‫الموقع‬:www.2nees.com
‫حمٌد‬ ‫أبو‬ ‫حكمت‬ ‫أنٌس‬(‫مجانٌة‬ ‫دورة‬)2nees.com

‫الفهرس‬
•‫المقدمة‬(‫النقاط‬ ‫من‬ ‫الكثٌر‬ ‫لذكر‬ ‫األساسٌات‬ ‫الى‬ ‫باإلضافة‬ ‫جدا‬ ‫مهمة‬
‫لشرحها‬ ‫نعود‬ ‫لن‬ ً‫الت‬..‫الرئٌسٌة‬ ‫المصطلحات‬ ‫تعرٌؾ‬ ‫مثل‬)
•‫ال‬ ‫أساسٌات‬Angular
•Expressions
•Directives
•Modules
•Controller
•Filters
•‫إنشاء‬tabs‫ال‬ ‫خالل‬ ‫من‬angular
•‫ال‬ ‫مع‬ ‫التعامل‬FORMS

‫الفهرس‬
•include-ng‫وال‬Custom Directive
•http$
•ً‫ف‬ ‫الجداول‬ ‫مع‬ ‫التعامل‬AngularJS(AngularJS Table)
•Create New ModuleAngularJS
•‫الخاتمة‬
(‫من‬ ‫تحمٌلها‬ ‫ٌمكنك‬ ‫األمثلة‬ ‫مع‬ ‫الدورة‬2nees.com/ar/courses)

‫المقدمة‬
‫فبأي‬ ،‫اإلنسان‬ ‫وخلق‬ ،‫البٌان‬ ‫م‬َّ‫ل‬َ‫وع‬ ،‫اللسان‬ ‫أعطى‬ ،‫العالمٌن‬ ‫رب‬ ‫هلل‬ ‫الحمد‬
‫تكذبان‬ ‫ربكما‬ ‫أآلء‬..،‫والمجد‬ ‫الثناء‬ ‫أهل‬ ،‫أهل‬ ‫للحمد‬ ‫هو‬ ‫من‬ ‫ٌا‬ ‫الحمد‬ ‫لك‬
‫عبد‬ ‫لك‬ ‫وكلنا‬ ‫العبد‬ ‫قال‬ ‫ما‬ ُّ‫أحق‬.
‫الحمد‬ ‫لك‬..‫ك‬َ‫ت‬‫نصر‬ ُ‫ٌطلب‬ ‫ضعٌؾ‬ ‫من‬..
‫الحمد‬ ‫لك‬..‫ؼناك‬ ُ‫ٌطلب‬ ‫فقٌر‬ ‫من‬..
‫الحمد‬ ‫لك‬..‫عزك‬ ُ‫ٌطلب‬ ٍ‫ذلٌل‬ ‫من‬..
‫الحمد‬ ‫لك‬..‫بك‬ ٍ‫ظن‬ َ‫حسن‬ ‫إال‬ ‫دعوناك‬ ‫ما‬..‫وما‬ ،‫فٌك‬ ً‫ثقة‬ ‫إال‬ ‫رجوناك‬ ‫وما‬
‫ووعٌدك‬ ‫بوعدك‬ ً‫ا‬‫تصدٌق‬ ‫إال‬ ‫خفناك‬..‫هلل‬ ‫فالحمد‬ ،‫ترضى‬ ‫حتى‬ ‫الحمد‬ ‫فلك‬
‫محمد‬ ،‫إمام‬ ‫كل‬ ‫وإمام‬ ،‫األعالم‬ ‫علم‬ ‫على‬ ‫والسالم‬ ‫والصالة‬ ‫العالمٌن‬ ‫رب‬
‫وبعد‬ ،‫أجمعٌن‬ ‫وصحبه‬ ‫آله‬ ‫وعلى‬ ‫وسلم‬ ‫علٌه‬ ‫هللا‬ ‫صل‬ ‫هللا‬ ‫عبد‬ ‫بن‬:

ً‫وه‬ ،‫المواقع‬ ‫تطوٌر‬ ‫مجال‬ ً‫ف‬ ‫ورائعة‬ ‫جدٌدة‬ ‫بدورة‬ ‫الٌوم‬ ‫لكم‬ ‫نعود‬
‫دروة‬AngularJS^_^‫ٌجب‬ ،‫هذه‬ ‫العمل‬ ‫بٌئة‬ ‫عن‬ ‫الحدٌث‬ ‫وقبل‬ ،
ً‫وه‬ ‫الدورة‬ ‫هذه‬ ‫متطلبات‬ ‫تعرؾ‬ ‫أن‬ ‫علٌك‬:
•HTML–CSS-JS
•jQuery, PHP, Database(..‫ضرورٌة‬ ‫متطلبات‬ ‫لٌست‬)
•‫ال‬ ‫جانب‬ ‫على‬ ‫مقترن‬ ‫عملنا‬ ‫سٌكون‬ ‫بالؽالب‬FRONT-END‫لكن‬
‫الحصول‬ ‫وٌمكنك‬ ً‫محل‬ ‫سٌرفر‬ ‫وجود‬ ‫الى‬ ‫األمثلة‬ ‫بعض‬ ً‫ف‬ ‫سنحتاج‬
‫مثل‬ ‫مواقع‬ ‫تطوٌر‬ ‫بٌئة‬ ‫تحمٌل‬ ‫خالل‬ ‫من‬ ‫علٌه‬wamp‫حسب‬ ‫ؼٌره‬ ‫أو‬
‫بك‬ ‫الخاص‬ ‫التشؽٌل‬ ‫نظام‬..‫على‬ ‫األمثلة‬ ‫بعض‬ ‫لتنفٌذ‬ ‫وذلك‬
requests‫ال‬ ‫طرٌق‬ ‫عن‬ ‫بٌانات‬ ‫وجلب‬ajax‫أو‬json..‫الخ‬

‫لل‬ ‫مهمة‬ ‫روابط‬AngularJS(‫المتواضعة‬ ‫الدورة‬ ‫هذه‬ ‫مراجع‬)
•AngularJS API Docs
•Guide to AngularJS Documentation
•schools Angular3W
•‫كتاب‬AngularJS Up & Running
•Shaping up with angular(PDF has a nice description
& examples)
‫تم‬ ‫تذكر‬ ‫لم‬ ‫أو‬ ‫ذكرت‬ ً‫الت‬ ‫الشروحات‬ ‫أو‬ ‫الكتب‬ ‫أو‬ ‫المواقع‬ ‫هذه‬ ‫جمٌع‬
‫الحاجة‬ ً‫ٌلب‬ ‫بما‬ ‫استخدامها‬..‫كتاب‬ ‫من‬ ‫الشرح‬ ‫كان‬ ‫فمثال‬AngualarJS
Up & Running..‫واألمثلة‬ ،ً‫الرسم‬ ‫الموقع‬ ‫روابط‬ ‫من‬ ‫وؼٌرها‬ ‫والدوال‬
‫من‬Shaping up with angular‫و‬w3schools...‫الى‬ ‫باإلضافة‬
‫هذه‬ ‫العمل‬ ‫بٌئة‬ ‫مع‬ ‫التعامل‬ ‫خالل‬ ‫ومن‬ ،‫المختلفة‬ ‫الملخصات‬..

‫واآلن‬‫قبل‬‫البدء‬‫بهذه‬‫الدورة‬..‫أحب‬‫أن‬‫أنقل‬‫لكم‬‫قوال‬‫سمعته‬‫من‬”‫برٌػ‬
‫بالك‬“‫ٌقول‬‫فٌه‬‫أن‬‫ال‬js‫ومكاتبها‬ً‫الت‬‫نعرفها‬‫مثل‬‫ال‬jQuery
‫نستخدمها‬‫لجعل‬‫صفحات‬‫الوٌب‬Dynamics‫بنائا‬‫على‬‫التالعب‬
‫بالعناصر‬‫والمواقع‬‫وؼٌرها‬..‫لكن‬‫ال‬AngularJS‫هو‬‫فعلٌا‬‫ٌقوم‬
‫على‬‫جعل‬‫ال‬HTML dynamic!!..‫وشخصٌا‬..‫استهجنت‬‫هذه‬
‫الفكرة‬ً‫ف‬‫بداٌة‬‫األمر‬..‫لكن‬‫وبعد‬ً‫تعلم‬ً‫وتجربت‬‫لل‬Angularً‫فإن‬
‫أقول‬‫أن‬‫هذا‬‫أقل‬‫ما‬‫ٌمكن‬‫قوله‬‫لشدة‬‫روعتها‬...‫وهذا‬‫ما‬‫ستشاهده‬‫أنت‬..
^_^

‫اآلن‬ ‫ببالنا‬ ‫ٌخطر‬ ‫أمر‬ ‫أول‬..‫ال‬ ‫أتعلم‬ ‫أن‬ ‫ٌجب‬ ‫لماذا‬Angular‫؟‬
‫هو‬ ‫الجواب‬..‫موقعك‬ ‫من‬ ‫لتجعل‬ ‫سكربت‬ ‫الجافا‬ ‫تستخدم‬ ‫كنت‬ ‫اذا‬
Dynamic..‫هو‬ ‫األمثل‬ ‫فالخٌار‬angularً‫اآلت‬ ‫لك‬ ‫ٌتٌح‬ ‫ألنه‬:
.1‫للمشروع‬ ‫البرمجة‬ ‫الشٌفرة‬ ‫تنظٌم‬ ‫على‬ ‫ٌساعدك‬.
.2‫الهاتؾ‬ ‫مع‬ ‫متجاوبة‬ ‫مواقع‬ ‫انشاء‬ ‫على‬ ‫ٌساعدك‬Responsive
.3‫ال‬ ‫خالل‬ ‫من‬ ‫ٌمكنك‬angular‫ال‬ ‫مع‬ ‫التعامل‬jQuery*_*
.4‫األخطاء‬ ‫واكتشاؾ‬ ‫الفحص‬ ً‫ف‬ ‫جدا‬ ‫سهلة‬.
‫ال‬ ‫هو‬ ‫ما‬ ‫اذا‬Angular‫؟‬

‫ال‬Angular‫عمل‬ ‫بٌئة‬ ً‫ه‬(Framework)‫نوعا‬ ‫لتضٌؾ‬ ‫مصممة‬
‫ال‬ ‫على‬ ‫التفاعلٌة‬ ‫من‬HTML‫لتتعامل‬ ‫أنك‬ ‫ممزٌاتها‬ ‫من‬ ً‫وٌكف‬ ،
‫سكربت‬ ‫الجافا‬ ‫تتعلم‬ ‫أن‬ ً‫ٌكف‬ ‫معها‬(pure)‫التقسٌم‬ ‫مبدأ‬ ‫وٌقوم‬ ،
‫ال‬ ‫مبدأ‬ ‫على‬ ‫لها‬ ً‫البنائ‬MVC‫أو‬MVVM...
‫ال‬ ‫مفهوم‬MVC:‫ال‬ ‫هو‬ ‫ما‬ ‫تعرؾ‬ ‫أن‬ ‫ٌجب‬MVC‫ألنك‬ ،‫البدء‬ ‫قبل‬
‫ال‬ ‫من‬ ‫قرٌبة‬ ‫لتكون‬ ‫ما‬ ‫نوعا‬ ‫مصممة‬ ‫عمل‬ ‫بٌئة‬ ‫مع‬ ‫ستتعامل‬MVC،
‫النوع‬ ‫هذا‬ ‫فهم‬ ‫ولهذا‬..‫ال‬ ‫فهم‬ ‫علٌك‬ ‫سٌسهل‬angular‫مهم‬ ‫أنه‬ ‫كما‬
‫أخرى‬ ‫عمل‬ ‫بٌئات‬ ‫تعلم‬ ‫أحببت‬ ‫اذا‬ ‫األمام‬ ً‫ف‬ ‫لك‬..

MVC‫ل‬ ‫اختصار‬ ً‫ه‬Model-View-Controller‫ال‬ ‫أحد‬ ‫وهو‬ ،
Design Pattern‫المشروع‬ ‫تقسٌم‬ ‫على‬ ‫فكرته‬ ‫وتقوم‬ ،‫شهرة‬ ‫األكثر‬
(‫منها‬ ‫الكبٌر‬ ‫وخصوصا‬)‫على‬ ‫ٌتعارؾ‬ ‫صؽٌرة‬ ‫منطقٌة‬ ‫وحدات‬ ‫الى‬
‫نقاط‬ ً‫ه‬ ‫الوحدات‬ ‫هذه‬ ‫وتكون‬ ،‫والمطورٌن‬ ‫المبرمجٌن‬ ‫بٌن‬ ‫نسقها‬
،‫وتحدٌثها‬ ‫وبنائها‬ ‫لألنظمة‬ ‫والتطوٌر‬ ‫المشاكل‬ ‫عن‬ ‫للبحث‬ ‫اإلنطالق‬
‫الى‬ ‫مقسمة‬ ‫الوحدات‬ ‫هذه‬ ‫وتكون‬3ً‫وه‬ ‫قطع‬ ‫أو‬ ‫أجزاء‬:
1)model:‫وعادة‬ ،‫تطبٌق‬ ‫أو‬ ‫مشروع‬ ‫أي‬ ‫مركز‬ ‫إعتبارها‬ ‫ٌمكننا‬ ‫فعلٌا‬
‫الخادم‬ ‫من‬ ‫جلبها‬ ‫ٌمكن‬ ً‫الت‬ ‫البٌانات‬ ‫على‬ ‫تحتوي‬(server( )‫عادة‬)،
‫هذا‬ ‫من‬ ‫جزء‬ ‫من‬ ‫قادمة‬ ‫ستكون‬ ‫ذلك‬ ‫بعد‬ ‫مستخدم‬ ‫أي‬ ‫ٌراها‬ ‫بٌانات‬ ‫وأي‬
‫ال‬model‫من‬ ‫أكثر‬ ‫من‬ ‫أو‬model...

2)view:ً‫وه‬ ،‫المستخدم‬ ‫معها‬ ‫ٌتعامل‬ ً‫الت‬ ‫الواجهة‬ ً‫ه‬Dynamic
‫ال‬ ‫من‬ ‫القادمة‬ ‫البٌانات‬ ‫بحسب‬ ‫معلوماتها‬ ‫وتتحدث‬ ،‫وتفاعلٌة‬model‫لذلك‬ ،
‫ال‬ ‫ٌحتوي‬ ‫ما‬ ‫على‬ ‫إعتمادا‬ ‫تصمم‬ ً‫فه‬model‫بٌانات‬ ‫من‬.
3)controller:‫البٌانات‬ ‫بٌن‬ ‫وتصل‬ ً‫تبن‬ ً‫الت‬ ‫المنطقٌة‬ ‫الوحدة‬ ً‫ه‬
‫ال‬ ‫بٌن‬ ‫الربط‬ ‫عن‬ ‫المسؤولة‬ ‫أنها‬ ‫أي‬ ،‫لها‬ ‫المناسبة‬ ‫العرض‬ ‫وطرٌقة‬ ‫المختلفة‬
View‫وال‬Model^_^‫بفصل‬ ‫تقوم‬ ً‫الت‬ ً‫فه‬ ،‫ذلك‬ ‫الى‬ ‫باإلضافة‬ ،
‫ال‬ ‫من‬ ‫القادمة‬ ‫البٌانات‬ ‫وتقسٌم‬model‫وؼٌرها‬ ‫الالزمة‬ ‫التؽٌرات‬ ‫وإجراء‬
‫لل‬ ‫وتعطٌها‬ ،‫األمور‬ ‫من‬view‫احتٌاجها‬ ‫حسب‬..
‫ال‬ ‫هذا‬pattern‫نستخدم‬ ‫أن‬ ‫أمكننا‬ ‫أٌضا‬ ‫خالله‬ ‫فمن‬ ،‫لنا‬ ‫كبٌرة‬ ‫فائدة‬ ‫قدم‬
‫العجلة‬ ‫بناء‬ ‫إعادة‬ ‫الى‬ ‫الحاجة‬ ‫دون‬ ‫مكان‬ ‫من‬ ‫أكثر‬ ً‫ف‬ ‫البرمجٌة‬ ‫ألشٌفرة‬
^_^

‫ال‬ ‫ممٌزات‬ ‫اآلن‬Angular:
.1AngularJS is a Single Page Application (SPA)
‫ال‬ ‫هو‬ ‫ما‬ ‫تعرؾ‬ ‫ال‬ ‫كنت‬ ‫وإن‬SPA‫الذي‬ ‫التطبٌق‬ ‫أو‬ ‫الموقع‬ ‫فهو‬
‫تحمٌل‬ ‫عملٌة‬ ‫أول‬ ً‫ف‬ ‫ٌحتاجها‬ ً‫الت‬ ‫المصادر‬ ‫جمٌع‬ ‫بتحمٌل‬ ‫ٌقوم‬
‫للصفحة‬.
.2‫البرمجٌة‬ ‫األسطر‬ ‫من‬ ‫أقل‬ ‫عدد‬ ‫الى‬ ‫تحتاج‬ ‫أنها‬ ‫أٌضا‬ ‫ممٌزاتها‬ ‫من‬
‫ال‬ ‫أو‬ ‫سكربت‬ ‫الجافا‬ ‫مع‬ ‫مقارنة‬jQuery..‫فالشٌفرة‬ ‫أٌضا‬
‫شٌفرة‬ ‫تعد‬ ‫بها‬ ‫الخاصة‬ ‫البرمجٌة‬clean_^*‫على‬ ‫تسٌر‬ ‫النك‬
‫أخرى‬ ‫أماكن‬ ً‫ف‬ ‫استخدامها‬ ‫وٌمكن‬ ،‫هذه‬ ‫العمل‬ ‫لبٌئة‬ ‫المحدد‬ ‫النمط‬
‫سهل‬ ‫بشكل‬ ‫وواضحة‬ ‫قلٌلة‬ ‫البرمجٌة‬ ‫الشٌفرة‬ ‫أن‬ ‫بما‬.

.3‫ال‬ ‫بوجود‬angular‫من‬ ‫فقط‬ ‫تطبٌق‬ ‫أي‬ ‫فهم‬ ‫السهل‬ ‫من‬ ‫أصبح‬
‫ال‬ ‫الى‬ ‫النظر‬HTML‫وال‬Controller‫وبالنسبة‬ ،‫المستخدم‬
‫ال‬ ‫لمطورٌن‬angular‫لك‬ ‫تسمح‬ ‫آخر‬ ‫وبمعنى‬ ‫المٌزة‬ ‫هذه‬ ‫فإن‬
‫بانشاء‬HTMLX‫خاللها‬ ‫من‬ ‫واضحة‬ ‫والتصنٌفات‬ ‫المسمٌات‬ ‫الن‬
‫ال‬ ‫على‬ ‫اإلعتماد‬ ‫الى‬ ‫الحاجة‬ ‫حتى‬ ‫دون‬html5‫ال‬ ‫انتظار‬ ‫أو‬
html6...
.4‫ال‬ ‫ٌعمل‬angular‫ال‬ ‫مع‬pure html‫المصمم‬ ‫ٌجد‬ ‫لن‬ ‫لذلك‬ ،
‫الصفحات‬ ‫هذه‬ ‫وتطوٌر‬ ‫تصمٌم‬ ً‫ف‬ ‫صعوبة‬.
.5‫ال‬ ‫عن‬ ً‫التخل‬ ‫بصدد‬ ‫هنا‬ ‫لسنا‬ ‫نحن‬jQuery UI‫ال‬ ‫حتى‬ ‫أو‬
Bootstrap‫ال‬ ‫وإنما‬ ،Angular‫ما‬ ‫ٌقدم‬ ‫ثالث‬ ‫كطرؾ‬ ‫ٌندمج‬
‫معا‬ ‫والخصائص‬ ‫المكاتب‬ ‫هذه‬ ‫دمج‬ ‫لٌتم‬ ‫خدمات‬ ‫من‬ ‫لدٌه‬^_^

‫تفكر‬ ‫لحظة‬

‫ال‬ ‫أساسيات‬Angular
‫اآلن‬..‫ال‬ ‫وشرح‬ ‫تحمٌل‬ ‫بعملٌة‬ ‫فعلٌا‬ ‫لنبدأ‬Angular^_^
‫ال‬ ‫تحمٌل‬Angular:
ً‫الرسم‬ ‫الموقع‬ ‫الى‬ ‫بالدخول‬ ‫قم‬https://angularjs.org/‫ثم‬ ‫ومن‬
‫ب‬ ‫مسمى‬ ‫ملؾ‬ ‫هو‬ ‫التحمٌل‬ ‫ناتج‬ ‫سٌكون‬ ،‫تحمٌل‬ ‫على‬ ‫بالضؽط‬ ‫قم‬
angular.min.js...
‫للوقت‬ ‫إختصارا‬ ‫أٌضا‬..‫األمثلة‬ ‫تطبٌق‬ ‫عند‬..‫ال‬ ‫باستخدام‬ ‫تقوم‬ ‫أن‬ ‫أرٌدك‬
bootstrap‫الموقع‬ ‫خالل‬ ‫من‬ ‫ذلك‬ ‫وٌمكنك‬
http://getbootstrap.com/..‫من‬ ‫المطلوب‬ ‫الملؾ‬ ‫وسٌكون‬
‫هو‬ ‫التحمٌل‬bootstrap.min.css..

‫بعرض‬ ‫سنقوم‬ ‫اآلن‬template‫ال‬ ‫دورة‬ ً‫ف‬ ‫باستخدامه‬ ‫سنقوم‬
Angular..‫أن‬ ‫أرٌدك‬ ،‫بتحمٌلها‬ ‫قمنا‬ ً‫الت‬ ‫الملفات‬ ‫الى‬ ‫وباإلضافة‬ ‫أٌضا‬
‫بانشاء‬ ‫تقوم‬style.css‫و‬app.js‫الصورة‬ ً‫ف‬ ‫كما‬..

‫البدء‬ ‫قبل‬ ‫مهمة‬ ‫تعرٌفات‬( :‫عنوان‬ ‫كل‬ ‫الى‬ ‫الوصول‬ ‫لحٌن‬ ‫مبدئٌة‬ ‫تعرٌفات‬)
‫البدء‬ ‫أو‬ ‫الخوض‬ ‫قبل‬ ‫تعرفها‬ ‫ان‬ ‫علٌك‬ ‫ٌجب‬ ‫مهمة‬ ‫تعرٌفات‬ ‫عدة‬ ‫ٌوجد‬
‫بال‬ ‫مفهوم‬ ‫أي‬ ‫بشرح‬angularً‫وه‬:
1)Template:‫ال‬ ‫بها‬ ‫وٌقصد‬HTML‫الخصائص‬ ‫مع‬
‫المضافة‬...
2)Directives:‫ال‬ ‫عناصر‬ ‫بها‬ ‫وٌقصد‬HTML‫الٌها‬ ‫مضافا‬
custom attributes and elements...
3)Model:‫ال‬ ‫خالل‬ ‫من‬ ‫للمستخدم‬ ‫ستعرض‬ ً‫الت‬ ‫البٌانات‬ ‫بها‬ ‫وٌقصد‬
view‫المستخدم‬ ‫وبٌن‬ ‫بٌنها‬ ‫التفاعل‬ ‫ما‬ ‫على‬ ‫بنائا‬ ،‫بها‬ ‫الخاصة‬.
4)Scope:‫ال‬ ‫حفظ‬ ‫مكان‬ ‫وهو‬model‫ٌمكن‬ ‫الذي‬ ‫النطاق‬ ‫ٌحدد‬ ‫والذي‬
‫من‬ ‫كل‬ ‫قبل‬ ‫من‬ ‫الٌه‬ ‫الوصول‬controllers, directives and
expressions‫حمٌد‬ ‫أبو‬ ‫حكمت‬ ‫أنٌس‬(‫مجانٌة‬ ‫دورة‬)2nees.com

5)Expressions:‫ضمن‬ ‫والدوال‬ ‫المتؽٌرات‬ ‫الى‬ ‫بالوصول‬ ‫لك‬ ‫تسمح‬
‫بال‬ ‫الخاص‬ ‫النطاق‬model‫قٌم‬ ‫اضافة‬ ‫على‬ ‫القدرة‬ ‫ٌعٌطٌنا‬ ‫وذلك‬ ،
dynamic‫لل‬html..
6)Filter:‫للمستخدم‬ ‫طباعتها‬ ‫المراد‬ ‫القٌمة‬ ‫بشكل‬ ‫التحكم‬ ‫لنا‬ ‫تتٌح‬ ‫هذه‬
(‫آخر‬ ‫بمعنى‬Format for Expressions.)..
7)View:‫المستخدم‬ ‫ٌشاهده‬ ‫ما‬ ‫وهو‬(DOM.)
8)Data Binding:‫الوقت‬ ً‫ف‬ ‫تبادل‬ ‫عملٌة‬ ‫الى‬ ‫ٌشٌر‬ ‫المصطلح‬ ‫هذا‬
ً‫الحقٌق‬(‫متزامن‬ ‫بشكل‬)‫ال‬ ‫من‬ ‫كل‬ ‫بٌن‬view‫وال‬model
9)Controller:‫بٌن‬ ً‫المنطق‬ ‫الربط‬ ‫خالل‬ ‫من‬ ‫بالتطبٌق‬ ‫بالتحكم‬ ‫ٌقوم‬
‫ال‬view‫وال‬model..

10)Module:‫مثل‬ ‫المشروع‬ ‫من‬ ‫مختلفة‬ ‫عدة‬ ‫ألجزاء‬ ‫الحاوي‬ ‫هو‬
controllers, services, filters, directives...
‫مالحظة‬:‫ال‬ ً‫تعن‬ng‫المشروع‬ ً‫ف‬
Angular Directive(‫الحقا‬ ‫التفاصٌل‬. )ً‫ف‬ ‫هللا‬ ‫بركة‬ ‫على‬ ‫لنبدأ‬ ‫اآلن‬
‫ال‬ ً‫ف‬ ‫بسٌط‬ ‫مثال‬angular..

‫السابق‬ ‫المثال‬ ‫شرح‬:
(1ng-app:‫طرحناها‬ ً‫الت‬ ‫التعرٌفات‬ ‫حسب‬..‫هذه‬ ‫أن‬ ‫نكتشؾ‬
‫عن‬ ‫عبارة‬ ‫الخاصٌة‬Directive..‫ال‬ ‫هذا‬ ‫ووظٌفة‬directive
‫ال‬ ‫تطبٌق‬ ‫تعرٌؾ‬ ً‫ه‬angular..‫أي‬ ‫لتطبٌق‬ ‫مهم‬ ‫وهذا‬
Expressions‫من‬ ‫ٌمكننا‬ ‫ذلك‬ ‫الى‬ ‫باإلضافة‬ ،‫ٌعمل‬ ‫لن‬ ‫وبدونه‬ ،
‫ال‬ ‫اسم‬ ‫تمثل‬ ‫القٌمة‬ ‫هذه‬ ،‫قٌمة‬ ‫اسناد‬modulesً‫الرئٌس‬
‫للمشروع‬..‫تعالى‬ ‫هللا‬ ‫بإذن‬ ‫الحقا‬ ‫هذه‬ ‫على‬ ‫لمثال‬ ‫وسنتطرق‬..
(2{{}}..‫ال‬ ‫لتعرٌؾ‬ ‫تستخدم‬ ‫هذه‬Expressions..‫أول‬ ‫وهو‬
‫تعالى‬ ‫هللا‬ ‫بإذن‬ ‫عنه‬ ‫بالحدٌث‬ ‫سنقوم‬ ‫موضوع‬..‫حٌز‬ ‫معا‬ ‫لنبدأ‬ ‫واآلن‬
ً‫الفعل‬ ‫العمل‬..
‫المثال‬ ‫شاهد‬

Expressions
‫ال‬ ‫إن‬Angular‫ال‬ ‫والى‬ ‫من‬ ‫البٌانات‬ ‫مزامنة‬ ‫على‬ ‫ٌقوم‬html‫من‬
‫خالل‬Expressions...‫لل‬ ‫بمكان‬ ‫باألهمٌة‬ ‫فهو‬ ‫ولهذا‬Angular..
‫ال‬ ‫قواعد‬Expressions:
(1‫ال‬ ‫كتابة‬ ‫علٌك‬ ‫ٌجب‬Expressions‫ال‬ ‫داخل‬{{ }}
(2ng-bind‫استخدامها‬ ‫وٌمكن‬ ،‫أٌضا‬ ‫البٌانات‬ ‫مزامنة‬ ‫بعملٌة‬ ‫تقوم‬
‫ال‬ ‫مثل‬Expressions
(3‫ال‬ ً‫ف‬ ‫تماما‬ ً‫ه‬ ‫كما‬ ‫النتائج‬ ‫طباعة‬ ‫سٌتم‬Expressions..
(4‫ال‬Expressions‫ال‬ ً‫ف‬Angular‫ال‬ ‫تشبه‬Expressions
‫وأحرؾ‬ ‫أرقام‬ ‫احتواء‬ ‫على‬ ‫القدرة‬ ‫حٌث‬ ‫من‬ ‫سكربت‬ ‫الجافا‬ ً‫ف‬
‫المختلفة‬ ‫والعملٌات‬...‫مثل‬(“anees” + “hikmat”.. )

Expressions
‫مثال‬1:

Expressions
‫مثال‬2:
‫مالحظة‬:ng-init‫ابتدائٌة‬ ‫قٌمة‬ ‫إلعطاء‬ ‫تستخدم‬.

Expressions
‫مثال‬3:
‫ال‬Expressions‫ال‬ ً‫ف‬Angular‫ال‬ ‫من‬ ‫القٌم‬ ‫استدعاء‬ ‫من‬ ‫ٌمكنها‬
objects‫المصفوفات‬ ‫من‬ ‫أو‬..‫مهم‬ ‫أمر‬ ‫وهذا‬..‫األوقات‬ ‫أؼلب‬ ً‫ف‬ ‫ألننا‬
‫مع‬ ‫سنتعامل‬JSON..‫وال‬JSON‫إما‬ ‫سٌكون‬ ‫الؽالب‬ ً‫ف‬objects
‫بٌنهما‬ ‫خلٌط‬ ‫أو‬ ‫مصفوفات‬ ‫أو‬..‫هذه‬ ‫على‬ ‫أٌضا‬ ‫مثاال‬ ‫سنورد‬ ‫لذلك‬
‫المهمة‬ ‫المالحظة‬..^_^

Directives
‫أي‬ ‫أن‬ ‫سبق‬ ‫فٌما‬ ‫تحدثنا‬attribute‫ب‬ ‫تسبق‬ng-‫تدل‬ ‫أو‬ ً‫تعن‬ ‫فهذه‬
‫على‬angular..‫هذه‬ ‫فإن‬ ،‫اآلن‬ ‫قلٌال‬ ‫أوضح‬ ‫أصبحت‬ ‫الفكرة‬ ‫أن‬ ‫وبما‬
‫ال‬ng-‫هو‬ ‫نراه‬ ‫ما‬ ‫أن‬ ‫بالتحدٌد‬ ‫تخبرنا‬directive..^_^
‫ال‬ ‫من‬ ‫العدٌد‬ ‫هناك‬ ‫تأكٌد‬ ‫بكل‬directive‫وتحدثنا‬ ،‫والمهمة‬ ‫المختلفة‬
‫األمام‬ ً‫وف‬ ‫اآلن‬ ‫أٌضا‬ ‫الٌها‬ ‫وسنضٌؾ‬ ،‫السابقة‬ ‫الشرائح‬ ً‫ف‬ ‫بعضها‬ ‫عن‬
‫ال‬ ‫من‬ ‫العدٌد‬ ‫الموضوع‬ ‫هذا‬ ‫وبعد‬Directive‫تعالى‬ ‫هللا‬ ‫بإذن‬...‫واآلن‬
‫ال‬ ‫أهم‬ ‫إحدى‬ ‫سنذكر‬directive..‫ال‬ ‫وهو‬ng-model..‫ال‬ ‫هذا‬
directive‫عمل‬ ‫على‬ ‫ٌقوم‬data bind(‫للبٌانات‬ ‫تزامن‬)‫عناصر‬ ‫مع‬
‫ال‬ ‫مثل‬ ‫التحكم‬input text‫وال‬text-area‫وال‬input..‫الخ‬

Directives
‫مثال‬1( :‫ال‬ ‫خالل‬ ‫من‬ ‫مباشرة‬ ‫وتحدٌثها‬ ‫القٌمة‬ ‫أخذ‬ ‫ٌتم‬ ‫كٌؾ‬ ‫هنا‬ ‫الحظ‬
Directive‫وال‬Expression^_^

Directives
‫مثال‬2:‫أٌضا‬ ‫هناك‬directive‫وهو‬ ‫رائع‬ng-repeat‫ووظٌفته‬ ،
‫دوران‬ ‫بعمل‬ ‫القٌام‬ ً‫ه‬^_^...‫المثال‬ ‫شاهد‬:
‫ال‬ ‫ٌمثل‬items‫المعلومات‬ ‫هنا‬
‫شكل‬ ‫على‬ ‫جلبها‬ ‫المراد‬object..

Directives
‫مهمة‬ ‫مالحظات‬:
(1ng-init‫هذا‬ ‫لكن‬ ،‫للعناصر‬ ‫اإلبتدائٌة‬ ‫القٌم‬ ‫إلسناد‬ ‫تستخدم‬ ‫أنها‬ ‫قلنا‬
‫ال‬Directive‫ال‬ ‫نستخدم‬ ً‫وإنم‬ ،‫عادة‬ ‫استخدامه‬ ‫من‬ ‫نكثر‬ ‫ال‬
controllers‫اإلبتدائٌة‬ ‫القٌم‬ ‫اسناد‬ ‫أو‬ ‫إلعطاء‬(..‫األمر‬ ‫ؼالب‬ ً‫ف‬)
(2‫ال‬ ‫من‬ ‫العدٌد‬ ‫هناك‬directive‫األخرى‬..‫علٌها‬ ‫اإلطالع‬ ‫ٌمكنك‬
‫سابقا‬ ‫أرفقتها‬ ً‫الت‬ ‫المراجع‬ ‫من‬..‫ال‬ ‫عدد‬ ‫ذكر‬ ‫تعالى‬ ‫هللا‬ ‫بإذن‬ ‫وسٌتم‬
‫الدورة‬ ‫هذه‬ ‫ٌنساب‬ ‫بما‬ ‫اإلمكان‬ ‫قدر‬ ‫به‬ ‫بأس‬...‫هذا‬ ‫ادراج‬ ‫وتم‬
‫لل‬ ‫كمقدمة‬ ‫الموضوع‬module‫وال‬controllers..
https://docs.angularjs.org/guide/directive

Modules
‫ال‬ ‫عن‬ ‫تحدثنا‬module‫ذلك‬ ‫لك‬ ‫أكرر‬ ‫كما‬ ،‫أٌضا‬ ‫السابقة‬ ‫الشرائح‬ ً‫ف‬
‫لل‬ ‫النظر‬ ‫عن‬ ‫به‬ ‫تفكر‬ ‫ما‬ ‫أول‬ ‫إن‬ ،‫آخر‬ ‫وبأسلوب‬ ‫الموضوع‬ ‫ألهمٌة‬
modules‫ال‬ ً‫ف‬ ‫تستخدم‬ ‫طرٌقة‬ ‫أنها‬angular‫إحتواء‬ ‫أو‬ ‫لضم‬
‫اسم‬ ‫أو‬ ‫عنوان‬ ‫تحت‬ ‫موجودة‬ ‫البرمجٌة‬ ‫الشٌفرات‬ ‫من‬ ‫مترابطة‬ ‫مجموعة‬
‫بال‬ ‫الخاص‬ ‫اإلسم‬ ‫هو‬ ،‫واحد‬module^_^‫اآلخرٌن‬ ‫ٌشاهد‬ ‫ولذلك‬ ،
‫وأسرع‬ ‫أسهل‬ ‫فهمها‬ ‫وٌكون‬ ،‫بسهولة‬ ‫بك‬ ‫الخاصة‬ ‫البرمجٌة‬ ‫الشٌفرة‬^_^
‫ال‬ ‫حول‬ ‫مهمتان‬ ‫جزئٌتان‬ ‫وهناك‬moduleً‫وه‬
(1‫ال‬ ‫تعرٌؾ‬ ‫ٌمكننا‬ ‫أنه‬controller‫وال‬services‫وال‬directives
‫لكل‬module..
(2‫انشاء‬ ‫أٌضا‬ ‫ٌمكننا‬modules‫ال‬ ‫علٌها‬ ‫تعتمد‬ ‫أخرى‬module‫الذي‬
‫ببنائه‬ ‫قمنا‬..module can also depend on other
modules as dependencies

Modules
‫السابقة‬ ‫الشرٌحة‬ ً‫ف‬ ‫الكالم‬ ‫إطالة‬ ‫عن‬ ‫أعتذر‬..‫الموضوع‬ ‫ألهمٌة‬ ‫لكن‬
..‫التنفٌذ‬ ‫عند‬ ‫جدا‬ ‫بسٌط‬ ‫أمر‬ ‫الى‬ ‫هو‬ ‫ما‬ ،‫الكثٌر‬ ‫الكالم‬ ‫هذا‬ ‫أن‬ ‫وستجد‬^_^
‫بال‬ ‫اإلتصال‬ ‫أو‬ ‫تحمٌل‬ ‫ٌتم‬ ‫كٌؾ‬ ‫واآلن‬module‫؟‬
‫ال‬ ‫خالل‬ ‫من‬ ‫ذلك‬ ‫ٌكون‬ng-app..‫ارسال‬ ً‫ه‬ ‫والفكرة‬‫الخاص‬ ‫اإلسم‬
‫بال‬module‫ال‬ ‫الى‬directive ng-app...
‫أوضح‬ ‫الصورة‬ ‫ولتصبح‬..‫انشاء‬ ‫ٌمكننا‬ ‫كٌؾ‬ ‫شاهد‬module..
‫ال‬ ‫علٌها‬ ‫أطلقنا‬ ‫ما‬ ‫هذه‬
Dependencies‫الشرٌحة‬ ً‫ف‬
‫السابقة‬..‫ال‬ ‫نضع‬ ‫هنا‬module
‫على‬ ‫تعتمد‬ ً‫الت‬ ‫األخرى‬module
‫ببنائه‬ ‫ثمنا‬ ‫الذي‬...

Modules
‫اآلن‬..‫ال‬ ‫الى‬ ‫عدت‬ ‫اذا‬template‫سأستخدمه‬ ً‫بأنن‬ ‫قلت‬ ‫الذي‬..‫ستجد‬
‫ملؾ‬ ‫هناك‬app.js..‫ال‬ ‫بوضع‬ ‫سنقوم‬ ‫الملؾ‬ ‫هذا‬module‫بداخله‬
ً‫التال‬ ‫الشكل‬ ‫على‬:
‫واآلن‬..‫بعد؟‬ ‫ماذا‬
‫ال‬ ‫نخبر‬ ‫أن‬ ‫علٌنا‬ ‫ٌجب‬ng-app‫بوجود‬module‫اسمه‬store‫حتى‬
‫ال‬ ‫استخدام‬ ‫طرٌق‬ ‫عن‬ ‫ٌتم‬ ‫ذلك‬ ‫وقلنا‬ ،‫ومناداته‬ ‫به‬ ‫اإلتصال‬ ‫ٌستطٌع‬
module..‫المثال‬ ‫شاهد‬:ng-app="store"

Modules
‫اآلن‬ ‫الملؾ‬ ‫شكل‬( :‫ال‬ ‫وبناء‬ ‫انشاء‬ ‫طرٌقة‬ ‫شرح‬ ‫من‬ ‫انتهٌنا‬ ‫نكون‬ ‫وبهذا‬
module‫الصفحات‬ ‫داخل‬)‫الموضوع‬ ‫سهولة‬ ‫الحظت‬ ‫هل‬^_^..
‫بأول‬ ‫أوال‬ ‫اآلن‬ ً‫مع‬ ‫بالتطبٌق‬ ‫تقوم‬ ‫أن‬ ‫المهم‬..‫من‬ ‫ستبدأ‬ ‫اإلضافات‬ ‫ألن‬
‫هنا‬..._^*

Controller
‫ال‬ ‫عن‬ ‫الحدٌث‬ ً‫ف‬ ‫أجزلنا‬ ‫لقد‬controller‫أٌضا‬..ً‫ف‬ ‫العجٌب‬ ‫لكن‬
‫وهذا‬ ،‫اآلن‬ ‫الى‬ ‫مثال‬ ‫أي‬ ‫الى‬ ‫أتطرق‬ ‫أو‬ ‫أتحدث‬ ‫لم‬ ً‫أنن‬ ،‫الموضوع‬
‫ال‬ ‫تعرٌؾ‬ ‫طرٌقة‬ ‫شرح‬ ‫من‬ ‫اإلنتهاء‬ ‫أنتظر‬ ‫كنت‬ ً‫ألن‬ ،‫صحٌح‬
module‫الصحٌح‬ ‫بشكله‬ ‫الموضوع‬ ‫فهم‬ ‫لنا‬ ‫ٌتسنى‬ ‫حتى‬^_^‫واآلن‬ ،
‫ال‬ ‫الحظت‬ ‫اذا‬module‫فارغ‬ ‫أنه‬ ‫فستجد‬ ،‫السابق‬....‫علٌنا‬ ‫ٌجب‬ ‫ولذلك‬
‫وجوده‬ ‫من‬ ‫نستفٌد‬ ‫حتى‬ ‫ملئه‬..‫اآلن‬ ‫وسنمأله‬..‫وهو‬ ‫المكونات‬ ‫أهم‬ ‫بإحدى‬
‫ال‬Controller_^..*
‫ال‬ ‫فهذا‬Controller‫وؼٌرها‬ ‫السٌرفر‬ ‫من‬ ‫البٌانات‬ ‫ٌجلب‬ ‫الذي‬ ‫هو‬
‫ال‬ ‫طرٌق‬ ‫عن‬ ‫للمستخدم‬ ‫وٌستعرضها‬ ‫ٌفصلها‬ ‫ثم‬ ‫ومن‬view‫ٌحدد‬ ‫الذي‬ ‫وهو‬ ،
‫أي‬ ‫عن‬ ‫المسؤول‬ ‫أنه‬ ‫كما‬ ،‫للمستخدم‬ ‫تظهر‬ ‫أن‬ ‫ٌجب‬ ً‫الت‬ ‫البٌانات‬ ‫من‬ ‫أي‬
‫وال‬ ‫المستخدم‬ ‫بٌن‬ ‫بٌن‬ ‫ٌحصل‬ ‫تفاعل‬view‫أمر‬ ‫أي‬ ‫لتنفٌذ‬_^..*

Controller
‫واآلن‬..‫بانشاء‬ ‫لنقوم‬Controller:
‫ال‬ ‫تعرٌؾ‬ ‫سهولة‬ ‫الحظ‬controller‫ال‬ ‫باستخدام‬ ‫عرفته‬ ً‫أنن‬ ‫والحظ‬ ،
app‫ال‬ ‫وهذا‬app‫ال‬ ‫ٌحفظ‬ ‫الذي‬ ‫المتؽٌر‬ ‫هو‬object‫بال‬ ‫الخاص‬
module..،‫البرمجٌة‬ ‫الشٌفرة‬ ‫كتابة‬ ً‫ف‬ ‫وأرتب‬ ‫أسهل‬ ‫آراها‬ ‫الطرٌقة‬ ‫هذه‬
‫ب‬ ‫كود‬ ‫سكربت‬ ‫الجافا‬ ‫احتوٌت‬ ‫أٌضا‬ ‫ولذلك‬(function()…_^*

Controller
‫المتجر‬ ً‫ف‬ ‫عرضه‬ ‫سٌتم‬ ‫منتج‬ ‫بتعرٌؾ‬ ‫سأقوم‬ ‫واآلن‬(store)،
‫ال‬ ‫دور‬ ‫كٌؾ‬ ،‫اآلن‬ ‫وسنشاهد‬controller‫الرائع‬...‫المثال‬ ‫شاهد‬:
(‫ال‬ ‫طرٌق‬ ‫عن‬ ‫القٌم‬ ‫بارجاع‬ ‫سنقوم‬controller‫ال‬ ‫خالل‬ ‫من‬
function‫ال‬ ً‫ه‬ ‫الراجعة‬ ‫قٌمته‬ ‫جعلنا‬ ‫الذي‬product)

Controller
‫اآلن‬..‫خالل‬ ‫من‬ ‫وعرضها‬ ‫السابقة‬ ‫القٌمة‬ ‫الى‬ ‫الوصول‬ ‫سنستطٌع‬ ‫كٌؾ‬
‫ال‬html‫؟‬..‫اإلجابة‬ ‫على‬ ‫مصرا‬ ‫كنت‬ ‫اذا‬..‫التالٌة‬ ‫الصورة‬ ‫فشاهد‬:
(‫التنفٌذ‬ ‫أثناء‬ ‫معا‬ ‫لنبقى‬ ‫بالصور‬ ‫عرضه‬ ‫ٌتم‬ ‫ما‬ ‫وكتابة‬ ‫تطبٌق‬ ‫تنسى‬ ‫ال‬)

Controller
‫السابقة‬ ‫الصورة‬ ‫شرح‬:
1)StoreController‫ال‬ ‫اسم‬ ‫هو‬Controller‫بانشائه‬ ‫قمنا‬ ‫الذي‬
‫ال‬ ‫داخل‬module store...
2)as store‫بانشاء‬ ‫قمنا‬ ‫هنا‬store‫لل‬ ‫مرادؾ‬ ‫اسم‬ ‫أنه‬ ‫على‬
StoreController..‫اإلسم‬ ‫مع‬ ‫التعامل‬ ً‫ٌمكنن‬ ‫وبهذا‬store‫وكأنه‬
StoreController..‫البرمجٌة‬ ‫الشٌفرات‬ ‫لتنفٌذ‬ ‫أسهل‬ ‫وهذا‬..
‫مهمة‬ ‫مالحظة‬:‫ال‬ ‫ٌعمل‬ ‫لن‬StoreController‫نطاق‬ ‫ضمن‬ ‫اال‬
‫لل‬ ‫والنهاٌة‬ ‫البدائٌة‬div‫به‬ ‫الخاص‬..‫ال‬ ‫بوضع‬ ‫قمنا‬ ‫لو‬ ‫لذلك‬
{{store.product.cost}}‫ال‬ ‫هذا‬ ‫خارج‬ ‫كمثال‬div..‫شًء‬ ‫ٌطبع‬ ‫فلن‬
^_^...‫ال‬ ‫اسم‬ ‫أٌضا‬ ‫نضع‬ ‫لم‬ ‫أننا‬ ‫لو‬ ‫ماذا‬ ‫لكن‬module‫؟‬

Controller

Controller
‫للنتٌجة‬ ‫جٌدا‬ ‫انتبه‬^_^

Controller
‫بكل‬..‫اإلحتماالت‬ ‫من‬ ‫العدٌد‬ ‫تجربة‬ ‫ٌمكنك‬ ‫تأكٌد‬..‫تطرقت‬ ً‫لكن‬
‫بها‬ ‫الوقوع‬ ً‫ف‬ ‫الخطأ‬ ‫ٌكثر‬ ‫قد‬ ‫الحتماالت‬^_^..
‫المثال‬ ‫شاهد‬( :‫البرمجٌة‬ ‫الشٌفرة‬ ‫وكتابة‬ ‫تطبٌق‬ ‫تستطٌع‬ ‫أنك‬ ‫من‬ ‫وتأكد‬
‫تلٌها‬ ً‫الت‬ ‫للمستوٌات‬ ‫اإلنتقال‬ ‫قبل‬)..
‫خطٌرة‬ ‫نقطة‬ ‫لشرح‬ ‫التالٌة‬ ‫للشرٌحة‬ ‫انتقل‬ ‫ذلك‬ ‫وبعد‬^_^...

Controller
‫شاهد‬
‫هذه‬
‫المالحظة‬
‫الخطٌرة‬:
‫تعرٌؾ‬ ‫لطرٌقة‬ ‫انتبه‬
‫ال‬ ‫داخل‬ ‫الرسائل‬
Controller
^_^..
‫عدم‬ ‫والحظ‬
‫ال‬ ‫ظهور‬bye

Controller
‫السابقة؟‬ ‫الرسالة‬ ‫تظهر‬ ‫لم‬ ‫لماذا‬
‫المطلوبة‬ ‫النتٌجة‬ ‫الى‬ ‫نصل‬ ‫حتى‬ ‫األحداث‬ ‫تسلسل‬ ‫لنعٌد‬^_^
(1‫بوضع‬ ‫قمنا‬ng-app‫ال‬ ‫اسم‬ ‫على‬ ‫وتحتوي‬module store(‫لم‬
‫فقط‬ ‫الصفحة‬ ‫حجم‬ ‫استؽالل‬ ‫لؽاٌات‬ ‫السابقة‬ ‫بالصفحة‬ ‫اظهارها‬ ‫ٌتم‬)
(2‫بانشاء‬ ‫قمنا‬controller‫بعنوان‬
aneesMessageControler..
(3‫ال‬ ‫استخدام‬ ‫خالل‬ ‫من‬ ‫عرفت‬ ‫األولى‬ ،‫رسالتٌن‬ ‫بوضع‬ ‫قمنا‬ ‫ثم‬this
‫ال‬ ‫استخدام‬ ‫خالل‬ ‫من‬ ‫واألخر‬var‫أنها‬ ‫على‬local variable
(4‫ال‬ ‫خالل‬ ‫من‬ ‫القٌم‬ ‫هذه‬ ‫بجلب‬ ‫قمنا‬html‫ال‬ ‫طرٌق‬ ‫عن‬
controller‫ال‬ ‫لكن‬localvar‫ٌطبع‬ ‫لم‬(..bye)

Controller
‫اذن‬...‫السابق‬ ‫التتبع‬ ‫خالل‬ ‫من‬..‫ال‬ ‫أن‬ ً‫وه‬ ،‫مهمة‬ ‫لنتٌجة‬ ‫نصل‬
Local variable‫ال‬ ‫أو‬inner variable‫الٌها‬ ‫الوصول‬ ‫ٌمكن‬ ‫ال‬
‫ٌجب‬ ،‫القٌم‬ ‫أو‬ ‫المتؽٌرات‬ ‫الى‬ ‫الوصول‬ ‫ولنستطٌع‬ ،‫ولذلك‬ ،‫هذه‬ ‫بالطرٌقة‬
‫المحجوزة‬ ‫الكلمة‬ ‫نستخدم‬ ‫أن‬this‫ال‬ ‫عمل‬ ‫تعمل‬ ً‫ه‬ ‫وهنا‬ ،var‫من‬
‫صالحٌة‬ ً‫تعط‬ ‫أنها‬ ‫اال‬ ،‫متؽٌر‬ ‫بتعرٌؾ‬ ‫تقوم‬ ‫أنها‬ ‫أي‬ ،‫المبدأ‬ ‫حٌث‬
‫الٌها‬ ‫للوصول‬^_^
‫عملٌا‬ ‫المثال‬ ‫شاهد‬ ‫واآلن‬^_^:

Controller
‫اآلن‬..‫من‬ ‫مجموعة‬ ‫تحتوي‬ ‫مصفوفة‬ ‫من‬ ‫القٌم‬ ‫استرجاع‬ ‫أردنا‬ ‫لو‬ ‫ماذا‬
‫ال‬objects‫؟‬
ً‫التال‬ ‫الشكل‬ ‫خالل‬ ‫من‬ ‫ذلك‬ ‫ٌمكنك‬ ‫تأكٌد‬ ‫وبكل‬ ،‫طبعا‬^_^:
(‫للشرائح‬ ‫استكمالك‬ ‫قبل‬ ‫النتائج‬ ‫وانظر‬ ‫البرمجٌة‬ ‫الشٌفرة‬ ‫بتنفٌذ‬ ‫قم‬^_^)

Controller
‫بها‬ ‫الخاصة‬ ‫والنتائج‬ ‫السابقة‬ ‫الشرٌحة‬ ‫الحظت‬ ‫هل‬^_^‫؟‬
‫تلك؟‬ ‫الحل‬ ‫بطرٌقة‬ ‫رأٌك‬ ‫ما‬
‫المنطق‬ ‫من‬ ‫هل‬ ‫لكن‬ ،‫صحٌح‬ ‫بشكل‬ ‫معك‬ ‫سٌعمل‬ ‫السابق‬ ‫الحل‬ ‫تأكٌد‬ ‫بكل‬
‫؟‬ ‫واحدة‬ ‫واحدة‬ ‫المصفوفة‬ ‫من‬ ‫القٌم‬ ‫استدعاء‬ ‫أو‬ ‫بتكرار‬ ‫أقوم‬ ‫أن‬
‫ال‬ ‫من‬ ‫وجدٌد‬ ‫آخر‬ ‫جمال‬ ‫أٌضا‬ ‫ٌظهر‬ ‫وهنا‬ ،‫ال‬ ‫طبعا‬Angular‫وهو‬
‫الدوران‬ ‫طرٌق‬ ‫عن‬ ‫القٌم‬ ‫جمٌع‬ ‫باستدعاء‬ ‫لك‬ ‫تسمح‬ ‫خاصٌة‬ ‫وجود‬^_^
‫ذلك‬ ‫كٌؾ‬ ً‫سألتن‬ ‫وإن‬^_^..‫استخدام‬ ‫علٌك‬ ‫أنه‬ ‫سأخبرك‬directive
‫وهو‬ ‫وبسٌط‬ ‫واحد‬ng-repeat_^.. *
‫مثاال‬ ‫لنشاهد‬^_^

Controller
‫مثال‬:‫هنا‬ ‫الحظ‬ng-repeat=“…”
‫ال‬course Loop‫الدوران‬ ‫عند‬ ‫بالقٌمة‬ ‫الخاص‬ ‫المتؽٌر‬ ‫اسم‬..
in aneesCourse.courses‫ال‬ ‫اسم‬ ‫تمثل‬ ‫هذه‬Alias‫بال‬ ‫الخاص‬
controller‫مجموعة‬ ‫ٌحتوي‬ ‫الذي‬ ‫المتؽٌر‬ ‫اسم‬ ‫الى‬ ‫باإلضافة‬
‫ال‬ ‫ملؾ‬ ً‫ف‬ ‫القٌم‬app.js(..this.courses... )
(‫السابق‬ ‫المثال‬ ‫نفس‬ ‫هذا‬..‫ال‬ ‫باستخدام‬ ‫لكن‬ng-repeat)

Controller
‫اآلن‬..^_^..‫السابقة‬ ‫الدورات‬ ‫لتحمٌل‬ ‫زر‬ ‫بإضافة‬ ‫نقوم‬ ‫أن‬ ‫رأٌك‬ ‫ما‬^_^
‫الزر‬ ‫سٌكون‬ ‫طبعا‬–ً‫وهم‬-_*-‫الشرح‬ ‫لؽاٌات‬:P..
‫هو‬ ‫بالضبط‬ ‫أٌضا‬ ‫أرٌده‬ ‫ما‬..ً‫ل‬ ‫المسموح‬ ‫للدورات‬ ‫التحمٌل‬ ‫زر‬ ‫اظهار‬
‫فقط‬ ‫بتحمٌلها‬^_^..‫الدورات‬ ‫لعبض‬ ‫ظاهرا‬ ‫ٌكون‬ ‫لن‬ ‫الزر‬ ‫أن‬ ‫أي‬..
‫اآلن‬ ‫والسؤال‬_^..*‫هو‬ ‫والجواب‬ ‫هذا؟‬ ‫كٌؾ‬ng-show*_*
‫المثال‬ ‫شاهد‬:

Controller
‫لدٌنا‬ ‫ٌوجد‬ ،‫السابقة‬ ‫للخاصٌة‬ ‫المقابل‬ ً‫ف‬ng-hide^_^..‫وبنفس‬
‫ال‬ ‫كانت‬ ‫حالة‬ ً‫ف‬ ‫األسلوب‬ng-hide‫تساوي‬true‫أنها‬ ً‫ٌعن‬ ‫فهذا‬
‫مخفٌة‬ ‫ستكون‬^_^..‫سرٌعا‬ ‫مثاال‬ ‫لنستعرض‬ ‫واآلن‬( :‫لتصل‬ ‫بتطبٌقه‬ ‫قم‬
‫لنتٌجة‬)

Controller
^_^..‫السابق‬ ‫المثال‬ ‫بتطبٌق‬ ‫قمت‬ ‫اذا‬..‫باستخدام‬ ‫تقوم‬ ‫أن‬ ‫اآلن‬ ‫رأٌك‬ ‫ما‬
‫ال‬ ‫مع‬ ‫استخدامها‬ ‫ٌمكننا‬ ً‫والت‬ ‫الموجودة‬ ‫المتؽٌرات‬ ‫بعض‬ng-repeat
^_^...
$first‫و‬$middle‫و‬$last‫هذه‬3‫نوعها‬ ‫متؽٌرات‬boolean،
‫ال‬first‫وال‬ ‫العناصر‬ ‫أول‬ ‫العنصر‬ ‫كان‬ ‫اذا‬ ‫لتحدٌد‬middle‫جمٌع‬
‫وال‬ ‫والنهاٌة‬ ‫البداٌة‬ ‫بٌن‬ ‫العناصر‬last‫العناصر‬ ‫نهاٌة‬ ً‫ف‬_*
$index‫القٌمة‬ ‫موقع‬ ‫ارجاع‬ ‫على‬ ‫ٌقوم‬...
$even‫و‬$oddً‫زوج‬ ‫أم‬ ‫فردي‬ ‫العنصر‬ ‫هل‬ ‫فحص‬ ‫على‬ ‫تقوم‬..
‫المتحققة‬ ‫الفائدة‬ ‫مقدار‬ ‫تخٌل‬^_^..
‫أن‬ ‫تأكٌد‬ ‫بكل‬true‫و‬ ‫الشرط‬ ‫ٌحقق‬ ً‫تعن‬false‫الشرط‬ ‫ٌحقق‬ ‫ال‬ ‫أنه‬^^

Controller
‫مثال‬( :‫المثال‬ ‫شاهد‬ ‫ثم‬ ‫بتطبٌقه‬ ‫قم‬)

Controller
‫اآلن‬..‫من‬ ‫واستخدامها‬ ‫معها‬ ‫التعامل‬ ‫من‬ ‫ٌمكننا‬ ‫جمٌلة‬ ‫حركة‬ ‫أٌضا‬ ‫هناك‬
‫ال‬ ‫خالل‬repeat..‫ال‬ ‫عناصر‬ ‫تكرار‬ ‫امكانٌة‬ ً‫ف‬ ‫الخاصٌة‬ ‫هذه‬ ‫وتكمن‬
html‫الدوران‬ ‫أثناء‬..
‫ال‬ ‫باستخدام‬ ‫هذا‬ ‫وٌكون‬ng-repeat-start=“”‫وال‬
ng-repeat-end...

Controller
‫ممم‬...‫بعد‬ ‫ماذا‬^_^‫معا؟‬ ‫بتطبٌقها‬ ‫نقوم‬ ‫أن‬ ‫رأٌك‬ ‫ما‬ ‫رائعة‬ ‫فكرة‬ ‫هناك‬ ،
‫هناك‬directive‫اسمه‬ng-click..‫ٌمثل‬ ‫وهذا‬event...
‫اآلن‬..‫ال‬ ‫هذا‬ ‫على‬ ‫مثاال‬ ‫لنشاهد‬event^_^
‫الفكرة‬ ‫سهولة‬ ‫الحظت‬ ‫هل‬^_^..
‫لل‬ ‫المباشر‬ ‫التنفٌذ‬ ‫هذا‬ ‫لكن‬ng-click..‫أو‬ ‫ارسال‬ ‫أردنا‬ ‫لو‬ ‫ماذا‬ ‫لكن‬
‫ال‬ ‫خالل‬ ‫من‬ ‫قٌم‬ ‫استقبال‬app.js‫؟‬ ‫المتؽٌرات‬ ‫مع‬ ‫نتعامل‬ ‫كنا‬ ‫كما‬

Controller
‫السابق‬ ‫السؤال‬ ‫على‬ ‫ولإلجابة‬..‫التالٌة‬ ‫الصورة‬ ‫شاهد‬:
‫من‬ ‫القٌمة‬ ‫نأخذ‬ ً‫لك‬function..‫ال‬ ‫باستخدام‬ ‫قمنا‬this‫ألجل‬ ‫وذلك‬
‫ال‬scope^_^..‫واستقبالها‬ ‫وارسالها‬ ‫للقٌم‬ ‫الوصول‬ ‫أستطٌع‬ ‫وبهذا‬..
‫المثال‬ ‫لنشاهد‬ ‫واآلن‬
‫وانتبه‬ ً‫عمل‬ ‫بشكل‬
‫جزئٌة‬ ‫لكل‬^_^:

Filters
ً‫البدٌه‬ ‫السؤال‬..^_^..‫ال‬ ‫هو‬ ‫ما‬AngularJS Filters‫؟‬
‫لٌتم‬ ‫البٌانات‬ ‫شكل‬ ‫أو‬ ‫البٌانات‬ ‫لمعالجة‬ ‫تستخدم‬ ‫مزٌة‬ ً‫ه‬ ‫بساطة‬ ‫بكل‬
‫ال‬ ‫هذه‬ ‫تطبٌق‬ ‫وٌتم‬ ،‫والفهم‬ ‫القرائة‬ ‫سهل‬ ‫بشكل‬ ‫للمستخدم‬ ‫عرضها‬
Filters‫ال‬ ‫داخل‬Expressions‫ال‬ ‫داخل‬ ‫أو‬services or
controller...‫البٌانات‬ ‫لشكل‬ ‫النهائٌة‬ ‫المرحلة‬ ً‫ه‬ ‫تكون‬ ‫ما‬ ‫وعادة‬
‫للمستخدم‬ ‫الناتجة‬..‫أو‬ ‫الوقت‬ ‫بصٌؽة‬ ‫الخاص‬ ‫الفلتر‬ ‫علٌها‬ ‫األمثلة‬ ‫ومن‬
‫العملة‬..‫الخ‬
‫فلو‬ ،‫متعددة‬ ‫بأشكال‬ ‫البٌانات‬ ‫تخزٌن‬ ‫علٌنا‬ ‫ٌوفر‬ ‫أنه‬ ‫الفلتر‬ ‫مزاٌا‬ ‫من‬ ‫أٌضا‬
‫محتوى‬ ‫لدٌنا‬ ‫كان‬dynamic..‫ال‬ ‫داخل‬ ‫الفلتر‬ ‫نضع‬ ‫أن‬ ً‫ٌكف‬ ‫فإنه‬
view‫بالفلتر‬ ‫تم‬ ‫كما‬ ‫هذه‬ ‫البٌانات‬ ‫عرض‬ ‫وسٌتم‬..‫تعدٌل‬ ‫أمر‬ ‫ٌجعل‬ ‫وهذا‬
‫اٌضا‬ ‫أسهل‬ ‫البٌانات‬ ‫شكل‬.._^..*

Filters
‫مالحظة‬:‫ال‬ ‫أحد‬ ‫استخدام‬ ‫ٌمكننا‬Filtersً‫ف‬ ‫أصال‬ ‫المبنٌة‬ ‫أو‬ ‫الموجودة‬
‫ال‬AngularJS‫ال‬ ‫بناء‬ ‫ٌمكنك‬ ‫أو‬Filter‫بك‬ ‫الخاص‬^_^
‫ال‬Filtersً‫ه‬ ‫الموجودة‬:
1)Currency:‫عملة‬ ‫شكل‬ ‫على‬ ‫الرقم‬ ‫جعل‬ ‫على‬ ‫الفلتر‬ ‫هذا‬ ‫ٌقوم‬(‫أي‬
‫مثل‬ ‫العملة‬ ‫مع‬ ‫نتعامل‬ ‫كأننا‬$1,234.56)‫الخاص‬ ‫الرمز‬ ‫وٌكون‬
‫محلٌا‬ ‫المستخدمة‬ ‫باللؽة‬ ‫الخاص‬ ‫الرمز‬ ‫هو‬ ‫بالعملة‬(‫الحالة‬
‫اإلفتراضٌة‬... )
‫الفلتر‬ ‫هذا‬ ‫على‬ ‫مثاال‬ ‫لنشاهد‬ ‫واآلن‬

Filters
‫العامة‬ ‫الصٌؽة‬:
‫المثال‬ ‫شاهد‬( :‫ال‬symbol‫وال‬ ‫اختٌاري‬fractionSize‫اختٌاري‬)..

Filters
2)number:‫رقم‬ ‫بصٌؽة‬ ً‫الرقم‬ ‫النص‬ ‫جعل‬ ‫على‬ ‫الفلتر‬ ‫هذا‬ ‫ٌقوم‬
‫الخانات‬ ‫عدد‬ ‫تحدٌد‬ ‫ٌمكن‬ ‫كما‬ ،‫الفئات‬ ‫بٌن‬ ‫تفصل‬ ‫فواصل‬ ‫ٌحتوي‬
‫باألعشار‬ ‫الخاصة‬..‫رقما‬ ‫للفلتر‬ ‫المسندة‬ ‫القٌمة‬ ‫تكن‬ ‫لم‬ ‫واذا‬..‫ارجاع‬ ‫سٌتم‬
Empty(‫شًء‬ ‫ال‬ ‫أي‬..‫فارؼة‬ ‫المخرجات‬ ‫وستصبح‬.. )‫استخدمنا‬ ‫وإذا‬
‫كلمة‬Infinity‫أو‬–Infinity‫الخاصة‬ ‫اإلشارة‬ ‫ارجاع‬ ‫فسٌتم‬
‫بالماالنهاٌة‬..

Filters
‫المثال‬ ‫شاهد‬:
‫الماالنهاٌة‬ ‫بخصوص‬..‫ال‬ ‫على‬ ‫تعمل‬ ‫لن‬ ‫فإنها‬local‫قمت‬ ‫حال‬ ً‫ف‬ ‫الى‬
‫التؽٌٌرات‬ ‫ببعض‬..‫المزٌد‬ ‫على‬ ‫اإلطالع‬ ‫ٌمكنك‬‫هنا‬ ‫من‬
‫مباشرة‬ ‫وتطبٌقه‬ ‫المثال‬ ‫رؤٌة‬ ‫ٌمكنك‬ ‫أو‬‫هنا‬ ‫من‬...

Filters
3)uppercase & lowercase:^_^‫هذا‬ ‫ٌقوم‬ ‫هههه‬ ‫فلتر‬ ‫أسهل‬
‫الى‬ ‫إما‬ ‫األحرؾ‬ ‫حالة‬ ‫تؽٌٌر‬ ‫على‬ ‫الفلتر‬uppercase‫الى‬ ‫أو‬
lowercase..._^*

Filters
‫مثال‬:

Filters
4)date:‫أٌضا‬ ‫سهلة‬..‫الخاص‬ ‫الشكل‬ ‫لتؽٌٌر‬ ‫الفلتر‬ ‫هذا‬ ‫نستخدم‬
‫بالتارٌخ‬..ً‫ه‬ ‫له‬ ‫العامة‬ ‫والصٌؽة‬:
ً‫ه‬ ‫اإلفتراضٌة‬ ‫الحالة‬mediumDate‫شكل‬ ‫تحدٌد‬ ‫عدم‬ ‫حال‬ ً‫ف‬
‫المراد‬ ‫التارٌخ‬..
Date،‫معٌن‬ ‫تارٌخ‬ ‫عن‬ ‫أو‬ ‫الثانٌة‬ ‫أجزاء‬ ‫عن‬ ‫ٌعبر‬ ‫رقم‬ ‫أو‬ ‫نص‬ ‫تمثل‬
‫ال‬ ‫مثل‬ ‫بالوقت‬ ‫الخاصة‬ ‫األنظمة‬ ‫أحد‬ ‫ٌعتمد‬ ‫أن‬ ‫إما‬ ،‫آخر‬ ‫بمعنى‬ISO‫أو‬
ً‫الثوان‬ ‫أجزاء‬ ‫عدد‬ ‫على‬ ‫بنائا‬ ‫المراد‬ ‫التارٌخ‬ ‫وضع‬ ‫ٌتم‬..

Filters
‫مثال‬:
‫المختلفة‬ ‫الوقت‬ ‫صٌػ‬ ‫مشاهدة‬ ‫ٌمكنك‬‫هنا‬ ‫من‬..

Filters
5)orderBy:‫كانت‬ ‫إن‬ ‫معٌنة‬ ‫مصفوفة‬ ‫قٌم‬ ‫لترتٌب‬ ‫المزٌة‬ ‫هذه‬ ‫تستخدم‬
‫رقمٌة‬ ‫أو‬ ‫نصٌة‬ ‫قٌم‬ ‫ذات‬ ‫المصفوفة‬ ‫هذه‬..ً‫النص‬ ‫الترتٌب‬ ‫ٌكون‬
‫أبجدٌا‬.._^*ً‫ه‬ ‫العامة‬ ‫والصٌؽة‬:
‫ال‬reverse‫بشكل‬ ‫الترتٌب‬ ‫اعادة‬ ‫من‬ ‫من‬ ‫لنا‬ ‫تسمح‬ ‫اختٌارٌة‬ ‫مزٌة‬ ً‫ه‬
‫من‬ ‫ترتٌب‬ ً‫ٌعن‬ ،ً‫عكس‬A – Z‫من‬ ‫ٌصبح‬ ً‫عكس‬Z 0 A..‫والقٌمة‬
ً‫ٌعن‬ ‫منطقٌة‬ ‫به‬ ‫الخاصة‬(true or false.. )

Filters
‫مثال‬1:

Filters‫مثال‬2:

Filters
‫ال‬ ‫شرح‬ ‫من‬ ‫تعالى‬ ‫هللا‬ ‫بإذن‬ ‫انتهٌنا‬ ‫نكون‬ ‫بهذا‬orderBy..‫لكن‬
‫الحظتها‬ ‫وأظنك‬ ‫مهمة‬ ‫كمالحظة‬..‫األمثلة‬ ‫ذكرت‬ ‫عندما‬ ً‫أنن‬ ً‫وه‬
‫والسبب‬ ‫الٌه‬ ‫أتطرق‬ ‫ولم‬ ‫السكربت‬ ‫أستخدم‬ ‫لم‬ ‫سبقت‬ ً‫الت‬ ‫العامة‬ ‫والصٌػ‬
‫ال‬ ‫فهم‬ ‫من‬ ‫اإلنتهاء‬ ‫حتى‬ ‫األمر‬ ‫تبسٌط‬ ‫محاولة‬ ‫الى‬ ‫ٌعود‬ ‫ذلك‬ ً‫ف‬
angular‫ٌعمل‬ ‫كٌؾ‬..‫جزئٌة‬ ‫آخر‬ ‫من‬ ‫تعالى‬ ‫هللا‬ ‫بإذن‬ ‫اإلنتهاء‬ ‫وحٌن‬
‫بالفلتر‬..‫خالل‬ ‫من‬ ‫فلتر‬ ‫واستخدام‬ ‫بناء‬ ‫طرٌقة‬ ‫ٌوضح‬ ‫مثال‬ ‫بطرح‬ ‫سنقوم‬
‫سكربت‬ ‫الجافا‬..‫ال‬ ‫مثل‬ ‫مهم‬ ‫مفهوم‬ ‫شرح‬ ‫وسٌتم‬$filter‫وال‬$scope
..‫وؼٌرها‬..‫لذلك‬..‫ذكرنا‬ ‫كما‬ ‫المسٌر‬ ‫نحاول‬ ‫دعنا‬...‫استطعت‬ ‫وإن‬
‫جدا‬ ‫ممتاز‬ ‫فهذا‬ ‫لوحدك‬ ‫تطبٌقها‬ ‫أو‬ ‫تعلمها‬..‫العامة‬ ‫الصٌؽة‬ ‫فهم‬ ‫فبعد‬
‫ال‬ ‫ٌعمل‬ ‫وكٌؾ‬Anguale(‫خالل‬ ‫من‬ ‫بذلك‬ ‫القٌام‬ ‫تستطٌع‬ ‫أنك‬ ‫ٌفترض‬
‫بالسكربت‬ ‫الخاصٌة‬ ‫العامة‬ ‫الصؽٌة‬^_^)..

Filters
6)limitTo:‫جدٌدة‬ ‫مصفوفة‬ ‫أو‬ ‫نص‬ ‫انشاء‬ ‫على‬ ‫المزٌة‬ ‫هذه‬ ‫تقوم‬
(‫فقط‬ ‫نسخة‬)‫كأكبر‬ ‫أو‬ ‫لإلقتطاع‬ ‫تحدٌده‬ ‫تم‬ ‫الذي‬ ‫العناصر‬ ‫عدد‬ ‫تحتوي‬
‫علٌه‬ ‫بالحصول‬ ‫لنا‬ ‫ٌسمح‬ ‫ممكن‬ ‫عدد‬..‫البدء‬ ‫مكان‬ ‫بتحدٌد‬ ‫البدء‬ ‫وٌمكن‬
‫المصوفة‬ ‫بداٌة‬ ‫من‬ ‫النسخ‬ ‫ٌتم‬ ‫حتى‬ ‫بالعد‬–‫النص‬ ‫أو‬-(‫موجب‬)‫نهاٌة‬ ‫من‬ ‫أو‬
‫المصفوفة‬–‫النص‬ ‫أو‬-(‫سالبة‬ ‫القٌمة‬ ‫كانت‬ ‫اذا‬... )‫الكالم‬ ‫شرح‬ ‫ولٌسهل‬
..‫العامة‬ ‫الصٌؽة‬ ‫الحظ‬:
Limit:‫للعناصر‬ ‫األعلى‬ ‫الحد‬(..‫عدد‬)‫و‬begin:‫قٌمتها‬ ‫اختٌارٌة‬ ‫مزٌة‬
‫اإلفتراضٌة‬0‫المصوفة‬ ‫أو‬ ‫النص‬ ‫مهاٌة‬ ‫من‬ ‫ابدأ‬ ً‫تعن‬ ‫هنا‬ ‫السالبة‬ ‫القٌمة‬

Filters
‫مثال‬2:

Filters
7)json:‫سكربت‬ ‫الجافا‬ ‫متؽٌر‬ ‫بتحوٌل‬ ‫القٌام‬ ‫من‬ ‫الفلتر‬ ‫هذا‬ ‫لنا‬ ‫ٌسمح‬
‫نوع‬ ‫من‬object‫الى‬JSON string..^_^..،‫اآلن‬ ‫تتسائل‬ ‫وقد‬
‫؟‬ ‫أصال‬ ‫التحوٌل‬ ‫هذا‬ ‫الى‬ ‫أحتاج‬ ‫أن‬ ‫ٌمكن‬ ‫لماذا‬!
‫جدا‬ ً‫منطق‬ ‫سؤال‬ ‫وهو‬..‫سهلة‬ ‫وإجابته‬^_^..‫هذا‬ ‫نستخدم‬ ‫أننا‬ ً‫وه‬
‫لعمل‬ ‫ؼالبا‬ ‫األسلوب‬debugging(‫حالة‬ ً‫ف‬ ‫وتصحٌحها‬ ‫القٌم‬ ‫فحص‬
‫مشكلة‬ ‫أي‬ ‫وجود‬)^_^..

Filters
8)filter:‫بال‬ ‫ٌوجد‬Filters‫اسمه‬ ‫فلتر‬filter^_^‫هذا‬ ‫وٌقوم‬ ،
‫مصفوفة‬ ‫أنه‬ ‫على‬ ‫وارجاعه‬ ‫المصفوفة‬ ‫من‬ ‫جزء‬ ‫اقتطاع‬ ‫على‬ ‫الفلتر‬
‫تصفٌته‬ ‫تمت‬ ‫ما‬ ‫على‬ ‫بنائا‬ ‫جدٌدة‬..‫اسم‬ ‫عن‬ ‫البحث‬ ‫مثل‬anees‫ضمن‬
‫من‬ ‫قائمة‬taher, anees, anas, saddam..‫كتابة‬ ‫حال‬ ً‫ف‬ ،‫الخ‬
an..‫تحتوي‬ ‫جدٌدة‬ ‫مصفوفة‬ ‫لنا‬ ‫سٌظهر‬anees‫و‬anas..‫الخ‬

Filters
‫العامة‬ ‫الصٌؽة‬ ‫شرح‬:
‫بال‬ ‫ٌقصد‬expression‫ال‬ ‫هو‬string, object, functionً‫الت‬
‫المصفوفة‬ ‫من‬ ‫العناصر‬ ‫إلختٌار‬ ‫استخدامها‬ ‫ٌمكن‬...
‫ال‬ ‫أما‬comparator‫فحص‬ ‫خاللها‬ ‫من‬ ‫ٌتم‬ ً‫الت‬ ‫المقارنة‬ ‫بها‬ ‫فٌقصد‬
‫عنها‬ ‫البحث‬ ‫المراد‬ ‫والقٌمة‬ ‫المصفوفة‬ ً‫ف‬ ‫العنصر‬ ‫بٌن‬ ‫الكامل‬ ‫التطابق‬..
‫تكون‬ ‫أن‬ ‫إما‬ ً‫وه‬true‫أو‬false|undefined‫أو‬
function(actual, expected)...‫ال‬ ‫هذا‬ ‫ٌقوم‬ ‫بحٌث‬function
‫بإرجاع‬true‫التطابق‬ ‫حالة‬ ً‫ف‬..‫ال‬ ‫استخدمنا‬ ‫حال‬ ً‫وف‬true‫مباشرة‬
‫ل‬ ‫اختصار‬ ‫فإنها‬function(actual, expected) { return angular.equals(actual, expected)}

Filters
‫مثال‬2:‫حمٌد‬ ‫أبو‬ ‫حكمت‬ ‫أنٌس‬(‫مجانٌة‬ ‫دورة‬)2nees.com
‫نتائج‬ ‫ٌوجد‬ ‫ال‬(..‫اإلسم‬ ‫ٌتطابق‬ ‫أن‬ ‫ٌجب‬)
‫التالٌة‬ ‫الشرٌحة‬ ً‫ف‬ ‫البرمجٌة‬ ‫الشٌفرة‬(..‫الشرح‬ ‫ألهمٌة‬)

Filters
‫كل‬ ‫أستخدم‬ ‫أن‬ ً‫ٌمكنن‬ ‫أنه‬ ‫الحظ‬object‫البحث‬ ‫بعملٌة‬ ‫للقٌام‬ ‫حدى‬ ‫على‬
^_^‫من‬ ‫البحث‬ ‫مربعات‬ ‫ألحد‬ ‫العناصر‬ ‫جمٌع‬ ‫تحدٌد‬ ً‫ٌمكنن‬ ً‫أنن‬ ‫كما‬ ،
‫ال‬ ‫استخدام‬ ‫خالل‬$...‫السابق‬ ‫للمثال‬ ‫البرمجٌة‬ ‫الشٌفرة‬ ‫شاهد‬:

Filters
‫اآلن‬..‫تعالى‬ ‫هللا‬ ‫بإذن‬ ‫نكون‬..‫ال‬ ‫موضوع‬ ‫من‬ ‫إنتهٌنا‬Filter..‫لكن‬
‫سابقا‬ ‫بتأجٌلها‬ ‫قمنا‬ ‫جزئٌة‬ ‫الى‬ ‫التنوٌه‬ ‫علٌنا‬ ‫ٌبقى‬..‫ال‬ ‫استخدام‬ ً‫وه‬
filter‫سكربت‬ ‫الجافا‬ ‫خالل‬ ‫من‬..‫انشاء‬ ‫حتى‬ ‫أو‬custom filter‫من‬
‫سكربت‬ ‫الجافا‬ ‫خالل‬..‫ان‬ ‫وكما‬ ،‫تعالى‬ ‫هللا‬ ‫بإذن‬ ‫الٌه‬ ‫سنتطرق‬ ‫ما‬ ‫وهذا‬
‫ال‬ ‫داخل‬ ‫استخدامها‬ ‫تعلمنا‬ ‫عامة‬ ‫صٌؽة‬ ‫هناك‬html..‫عامة‬ ‫صٌؽة‬ ‫هناك‬
‫سكربت‬ ‫للجافا‬..‫هذه‬ ‫ألن‬ ،‫واحد‬ ‫مثال‬ ‫الى‬ ‫عنها‬ ‫أشرح‬ ‫لن‬ ‫تأكٌد‬ ‫وبكل‬
‫تعلمناه‬ ‫ما‬ ‫تشابه‬ ‫الفكرة‬^_^‫سكربت‬ ‫الجافا‬ ‫استخدمنا‬ ‫أننا‬ ‫واإلختالؾ‬ ،
‫بالعملٌة‬ ‫للقٌام‬_^... *
‫التالٌة‬ ‫الشرٌحة‬ ‫الى‬ ‫اإلنتقال‬ ‫قبل‬..‫األمثلة‬ ‫جمٌع‬ ‫استعرض‬..‫على‬ ‫وتوقؾ‬
‫منها‬ ‫جزئٌة‬ ‫كل‬..‫فكرة‬ ‫تمثل‬ ‫جزئٌة‬ ‫فكل‬..‫كذلك‬ ‫البرجٌة‬ ‫والشٌفرة‬:

Filters
‫سكربت‬ ‫الجافا‬ ‫من‬ ‫الفلتر‬ ‫استخدام‬(:،‫اختٌارٌة‬ ‫تبقى‬ ‫اإلختٌارٌة‬ ‫الخٌارات‬
‫واإللزامٌة‬..‫كذلك‬ ‫تبقى‬..‫سابقا‬ ‫شرحنا‬ ‫كما‬^_^)‫الصٌؽة‬ ‫شاهد‬ ‫كمثال‬
‫سكربت‬ ‫للجافا‬ ‫العامة‬‫هنا‬ ‫من‬

Filters
‫واآلن‬..‫انشاء‬ ً‫وه‬ ‫تعالى‬ ‫هللا‬ ‫بإذن‬ ‫جزئٌة‬ ‫آخر‬custom filter^_^
‫إنشاء‬ ‫من‬ ‫نتمكن‬ ً‫لك‬filter‫ال‬ ً‫ف‬ ‫دالة‬ ‫هناك‬ ،‫بنا‬ ‫خاص‬angular
ً‫وه‬ ‫ذلك‬ ‫من‬ ‫تمكننا‬.filter()^_^‫كل‬ ً‫ف‬ ‫استخدامها‬ ‫وٌمكننا‬ ،
module‫ال‬ ‫داخل‬ ‫بإنشائه‬ ‫نقوم‬angular...
ً‫التال‬ ‫الشكل‬ ‫الى‬ ‫أنظر‬ ‫اآلن‬:

Filters
‫واآلن‬..‫رقم‬ ‫أي‬ ‫بتربٌع‬ ‫ٌقوم‬ ‫بسٌط‬ ‫فلتر‬ ‫بانشاء‬ ‫ولنقم‬ ،‫عملٌا‬ ‫مثاال‬ ‫لنأخذ‬..
‫ال‬filter‫بانشاء‬ ‫الخاصة‬ ‫الدالة‬ ‫اسم‬custom filter.._^*
‫ال‬makeSquareNumber‫ٌربع‬ ‫سنجعله‬ ‫الفلتر‬ ‫وهذا‬ ،‫الفلتر‬ ‫اسم‬
‫الرقم‬_^...*
‫مالحظة‬:‫ادخال‬ ‫مثل‬ ،‫الممكنة‬ ‫الخطأ‬ ‫حاالت‬ ‫األمثلة‬ ً‫ف‬ ‫اإلعتبار‬ ‫بعٌن‬ ‫آخذ‬ ‫ال‬
‫وؼٌرها‬ ‫رقم‬ ‫بدل‬ ‫نص‬..‫سكربت‬ ‫بالجافا‬ ‫تعرفها‬ ‫أن‬ ‫ٌجب‬ ‫األمور‬ ‫هذه‬ ‫ألن‬
‫ال‬ ‫بدورة‬ ‫ولٌس‬angular...

Filters
‫السابق‬ ‫المثال‬ ‫على‬ ‫مالحظات‬:
(1‫انشاء‬ ‫ٌتم‬makeSquareNumber‫ك‬global‫ٌمكنك‬ ‫فلتر‬
‫ال‬ ‫خالل‬ ‫من‬ ‫اال‬ ‫الفلتر‬ ‫هذا‬ ‫استخدام‬ ‫ٌمكن‬ ‫وال‬ ،‫استخدامه‬app
‫مودٌول‬*.._*
(2‫تمثل‬ ً‫الت‬ ‫األرقام‬ ‫معالجة‬ ‫المثال‬ ‫هذا‬ ً‫ف‬ ‫سٌتم‬object‫ولٌس‬ ،‫واحد‬
‫وؼٌرها‬ ‫مصفوفات‬..
‫السابق‬ ‫المثال‬ ‫استخدام‬ ‫طرٌقة‬ ‫هنا‬ ‫واآلن‬( :‫ال‬ ‫أستخدم‬ ً‫أنن‬ ‫كٌؾ‬ ‫والحظ‬
filter‫ك‬ ‫العنصر‬ ‫مع‬object‫الدوران‬ ‫جملة‬ ‫داخل‬)..

Filters
‫مثال‬2:‫ال‬ ‫مع‬ ‫سٌعمل‬ ‫لفلتر‬ ‫مثال‬ ‫بانشاء‬ ‫اآلن‬ ‫سنقوم‬repeat‫نفسها‬
‫ال‬ ‫من‬ ‫بدال‬object...‫المصفوفة‬ ‫عناصر‬ ‫فلترة‬ ‫على‬ ‫سٌقوم‬ ‫المثال‬ ‫هذا‬
‫بالحرؾ‬ ‫بها‬ ‫الخاصة‬ ‫األحرؾ‬ ‫تبدأ‬ ً‫الت‬“a”(..ً‫ف‬ ‫المثال‬ ‫تكملة‬
‫التالٌة‬ ‫الشرٌحة‬)

Filters
‫حقٌقة‬..‫هو‬ ‫به‬ ‫قمنا‬ ‫ما‬ ‫ففعلٌا‬ ،‫بجدٌدة‬ ‫لٌست‬ ‫السابق‬ ‫المثال‬ ‫من‬ ‫الفكرة‬ ‫إن‬
‫هو‬ ‫الشرط‬ ‫هذا‬ ،‫شرط‬ ‫واجراء‬ ‫المصفوفة‬ ‫عناصر‬ ‫ألخذ‬ ‫دوران‬ ‫عملٌة‬
ً‫الت‬ ‫النتائج‬ ‫تمثل‬ ،‫أخرى‬ ‫مصفوفة‬ ‫داخل‬ ‫حفظ‬ ‫به‬ ‫الخاص‬ ‫والناتج‬ ،‫الفلتر‬
‫ستعرض‬..‫كاملة‬ ‫المصفوفة‬ ‫الفلتر‬ ‫هذا‬ ‫ٌستقبل‬ ،‫وبهذا‬..^_^

Filters
‫واآلن‬..‫؟‬ ‫ماذا‬^_^
‫معٌن‬ ‫سؤال‬ ‫لذهنك‬ ‫ٌتبادر‬ ‫الم‬..‫؟‬
‫ذهنك‬ ً‫ف‬ ‫ٌدر‬ ‫الم‬..،‫مثال‬ ،‫الفلتر‬ ‫مع‬ ‫متؽٌرات‬ ‫استخدام‬ ً‫ٌمكنن‬ ‫كٌؾ‬
‫ال‬ ‫عن‬ ‫تحدثنا‬ ‫عندما‬JSON filter..‫كلمة‬ ‫نضع‬ ‫كنا‬json‫ثم‬:4‫أي‬
‫بمقدار‬ ‫المسافة‬ ‫اجعل‬4‫فراؼات‬..‫متؽٌر‬ ‫اضافة‬ ‫مثال‬ ‫اآلن‬ ً‫ٌمكنن‬ ‫كٌؾ‬
‫التضاعؾ‬ ‫مقدار‬ ‫أحدد‬ ‫بحٌث‬ ،‫الرقم‬ ‫لمثال‬ ‫هذا‬ ‫مثل‬..‫قوة‬2‫أو‬3‫أو‬4
..‫أحدد‬ ‫أن‬ ،ً‫الثان‬ ‫المثال‬ ً‫وف‬ ‫الطرٌقة‬ ‫بنفس‬ ‫أٌضا‬ ً‫ٌمكنن‬ ‫وكٌؾ‬ ،‫الخ‬
‫علٌه‬ ‫بنائا‬ ‫بالفلترة‬ ‫سأقوم‬ ‫الذي‬ ‫الحرؾ‬..‫مثل‬“b”‫أو‬“c”..‫الخ‬
‫جدا‬ ‫بسٌط‬ ‫األمر‬ ‫هذا‬..‫التحكم‬ ‫على‬ ‫كبٌرة‬ ‫قدرة‬ ‫ٌعطٌك‬ ‫بحٌث‬ ،‫ورائع‬
‫بك‬ ‫الخاص‬ ‫بالفلتر‬..^_^..‫اآلن‬ ‫مثاال‬ ‫لنشاهد‬:

‫المثال‬:
Filters

Filters
‫السابق‬ ‫المثال‬ ً‫ف‬ ‫الحظ‬..‫خالل‬ ‫من‬ ‫ارسالها‬ ‫تم‬ ً‫الت‬ ‫القٌم‬ ‫استقبلت‬ ً‫أنن‬
‫المرفوعة‬ ‫القوة‬ ‫وهو‬ ‫الزامٌا‬ ‫الخٌارات‬ ‫أحد‬ ‫جعلت‬ ‫ذلك‬ ‫وبعد‬ ،‫الفلتر‬
‫للرقم‬ ً‫وبإرجاع‬ ،‫للرقم‬1‫إنطباق‬ ‫لعدم‬ ‫القٌمة‬ ‫بهذه‬ ‫الفلتر‬ ً‫أنه‬ ‫فأنا‬
‫خطأ‬ ‫رسالة‬ ‫عرض‬ ‫أٌضا‬ ً‫وٌمكنن‬ ،‫الشروط‬..‫التحكم‬ ‫ٌمكنك‬ ‫ترٌد‬ ‫كما‬
‫بذلك‬..ً‫الثان‬ ‫الخٌار‬ ‫بٌنما‬..‫اختٌاري‬ ‫الرسالة‬ ‫حقل‬ ‫بجعل‬ ‫قمت‬..
‫الخصائص‬ ‫مع‬ ‫سهولة‬ ‫بكل‬ ‫التعامل‬ ‫أٌمكننا‬ ‫كٌؾ‬ ‫الحظ‬_^*
‫واآلن‬..‫ال‬ ‫مع‬ ‫الفكرة‬ ‫هذه‬ ‫لنستخدم‬repeat‫أٌضا‬*_.. *
ً‫الثان‬ ‫المثال‬ ‫لنشاهد‬:

Filters
‫ال‬ ‫عن‬ ‫المتواضع‬ ‫حدٌثنا‬ ‫من‬ ‫تعالى‬ ‫هللا‬ ‫بإذن‬ ‫إنتهٌنا‬ ‫نكون‬ ‫بهذا‬Filters،
‫السابقة‬ ‫األمثلة‬ ‫جمٌع‬ ‫بتطبٌق‬ ‫التزمت‬ ‫أنك‬ ‫بك‬ ‫رجائا‬ ً‫وكل‬..
‫ٌمكنك‬ ،ً‫عمل‬ ‫بشكل‬ ‫والعمل‬ ‫ذكرها‬ ‫تم‬ ً‫الت‬ ‫األمثلة‬ ‫جمٌع‬ ‫لمشاهدة‬ ‫اآلن‬
‫هنا‬ ‫النقر‬...‫وال‬ ‫البرمجٌة‬ ‫والشٌفرة‬ ‫بالنتائج‬ ‫النظر‬ ‫امعان‬ ‫ٌرجى‬
console..

ng-src Directive
‫الدروس‬ ‫بٌن‬ ‫وكفاصل‬ ‫وسرٌعة‬ ‫سهلة‬ ‫فقرة‬ ً‫ف‬ ‫اآلن‬:P..‫خطر‬ ‫هل‬
‫ال‬ ‫باستخدام‬ ‫ٌمكننا‬ ‫كٌؾ‬ ‫ببالك‬angular‫ال‬ ‫تحدٌد‬path‫للصورة‬.‫؟‬
‫حسنا‬..‫الطرٌقة‬ ‫هذه‬ ‫نرى‬ ‫أو‬ ‫نجرب‬ ‫أن‬ ‫رأٌك‬ ‫ما‬:
‫لها‬ ‫تجربتك‬ ‫بعد‬..
‫وخمن‬ ‫للخطأ‬ ‫انظر‬
‫؟‬ ‫الخطأ‬ ‫هذا‬ ‫لماذا‬
‫للشرٌحة‬ ‫انتقل‬ ‫بعدها‬
‫التالٌة‬^_^

ng-src Directive
‫ال‬ ً‫ف‬ ‫لدٌك‬ ‫خطأ‬ ‫وسٌظهر‬ ،‫الصورة‬ ‫تظهر‬ ‫لن‬ ‫طبعا‬console*_*،
‫؟‬ ‫لماذا‬
‫سٌحاول‬ ‫وهنا‬ ،‫سكربت‬ ‫مع‬ ‫نتعامل‬ ‫أننا‬ ‫تنسى‬ ‫ال‬ ‫وبالنهاٌة‬ ‫بساطة‬ ‫بكل‬
‫ال‬ ‫تنفٌذ‬ ‫قبل‬ ‫الصورة‬ ‫تحمٌل‬ ‫المتصفح‬Exeprission..‫ٌجب‬ ‫لهذا‬
‫المشكلة‬ ‫لهذه‬ ‫أخرى‬ ‫طرٌقا‬ ‫أو‬ ‫حال‬ ‫نجدث‬ ‫أن‬ ‫علٌنا‬^_^..‫الحل‬ ‫وٌكون‬
‫خالل‬ ‫من‬ng-src..‫المطلوبة‬ ‫الصورة‬ ‫بتحدٌد‬ ‫من‬ ‫لنا‬ ‫ستسمح‬ ‫فهذه‬
‫عملٌة‬ ‫فعال‬ ً‫وه‬ ،‫وجلبها‬resource..^_^..
‫المثال‬ ‫لمشاهدة‬ ‫لنذهب‬ ‫واآلن‬:

ng-src Directive
‫مثال‬:

‫إنشاء‬tabs‫ال‬ ‫خالل‬ ‫من‬angular^_^
‫اآلن‬..‫ال‬ ‫من‬ ‫المزٌد‬ ‫عن‬ ‫لنتحدث‬directive...‫عملٌا‬ ‫تطبٌقا‬ ‫ولنشاهد‬
‫إنشاء‬ ‫وهو‬ ،‫جمٌال‬tabs‫المحتوى‬ ‫بٌن‬ ‫للتنقل‬( ..‫أننا‬ ‫ننسى‬ ‫ال‬ ‫طبعا‬
‫نستخدم‬bootstrap‫للوقت‬ ‫اختصارا‬ ‫الدورة‬ ‫أول‬ ‫ذكرنا‬ ‫كما‬)..
‫ال‬ ‫باستخدام‬ ً‫وتفاعل‬ ً‫عمل‬ ‫تطبٌق‬ ‫هذا‬ ‫طبعا‬angular..‫بسٌط‬ ‫وهو‬
‫جدا‬ ‫مهمة‬ ‫فكرة‬ ‫وسٌشرح‬..ً‫التال‬ ‫الموضوع‬ ‫الى‬ ‫اإلنتقال‬ ‫قبل‬_^*
ً‫مع‬ ‫وسر‬ ‫إنتبه‬ ‫لذلك‬”‫حبة‬ ‫حبة‬^_^”..‫المثال‬ ‫شاهد‬:

‫جدا‬ ‫بسٌط‬ ‫السابق‬ ‫المثال‬..‫الموجودة‬ ‫الروابط‬ ‫أحد‬ ‫على‬ ‫النقر‬ ‫عند‬..‫سٌقوم‬
‫ال‬ ‫قٌمة‬ ‫بتؽٌر‬tab‫بال‬ ‫الخاص‬ ‫الحاوي‬ ‫أسفل‬ ‫مطبوعة‬ ‫وستشاهدها‬
Tab..‫النتٌجة‬ ‫شاهد‬:
‫ال‬ ‫قٌمة‬ ‫أن‬ ‫ستالحظ‬ ‫السابقة‬ ‫للصورة‬ ‫عدت‬ ‫اذا‬tabً‫ه‬2‫النقر‬ ‫عند‬
‫علٌها‬^_^..‫ال‬ ‫أن‬ ‫هو‬ ‫حصل‬ ‫ما‬ ‫وفعلٌا‬Expristion‫تحدٌث‬ ‫بعمل‬ ‫قام‬
(updated)‫ال‬ ‫باستخدام‬ ‫النقر‬ ‫عند‬ ‫مباشرة‬ ‫به‬ ‫الخاصة‬ ‫للقٌمة‬
Ng-click...‫واآلن‬..‫بكل‬ ‫الخاص‬ ‫المحتوى‬ ‫ولنعرض‬ ‫الرقم‬ ‫لنستبدل‬
tab...‫حاول‬ ‫؟‬ ‫تذكر‬ ‫؟‬ ‫ذلك‬ ‫ٌتم‬ ‫كٌؾ‬ ‫لكن‬..‫التالٌة‬ ‫للشرٌحة‬ ‫انتقل‬ ‫ثم‬*_*

‫اآلن‬..‫ال‬ ‫باستخدام‬ ‫سنقوم‬ng-show‫سابقا‬ ‫ذكرناها‬ ً‫الت‬!!..
‫ذلك؟‬ ‫كٌؾ‬.. !‫ال‬ ‫من‬ ‫القٌمة‬ ‫أخذ‬ ‫خالل‬ ‫من‬ ‫بساطة‬ ‫بكل‬tab‫النقر‬ ‫عند‬
‫ال‬ ‫داخل‬ ‫ومقارنتها‬ng-show..^_^...‫المثال‬ ‫شاهد‬:
‫بعرض‬ ‫قمنا‬ ‫أننا‬ ‫الحظ‬
‫ال‬ ‫على‬ ‫بنائا‬ ‫المحتوى‬tab

‫السابق‬ ‫التطبٌق‬ ً‫ف‬ ‫مشكلة‬ ‫هناك‬ ‫لكن‬^_^..‫؟‬ ‫الحظتها‬ ‫هل‬
‫ل‬ ‫محتوى‬ ‫أي‬ ‫عرض‬ ‫ٌتم‬ ‫لم‬ ‫أنه‬ ً‫ه‬ ‫المشكلة‬tab‫قٌمنا‬ ‫عند‬ ‫اال‬
‫بالنقر‬..‫لل‬ ‫ابتدائٌة‬ ‫قٌمة‬ ‫تحدٌد‬ ‫خالل‬ ‫من‬ ‫بساطة‬ ‫بكل‬ ‫تحل‬ ‫مشكلة‬ ‫وهذه‬
tab‫باستخدام‬^^^__^^^ng-init...‫المثال‬ ‫الحظ‬:

‫واآلن‬..‫المستخدم‬ ‫مع‬ ‫التفاعلٌة‬ ‫من‬ ‫نوعا‬ ‫المثال‬ ً‫نعط‬ ‫أن‬ ‫رأٌك‬ ‫ما‬.._^*
‫الكالس‬ ‫اضافة‬ ‫مثل‬active‫لل‬tab‫باختٌارها‬ ‫قام‬ ً‫الت‬^_^..‫الٌس‬
‫بذلك‬ ‫القٌام‬ ‫المنطق‬ ‫من‬^_^..‫المثال‬ ‫شاهد‬:
(ng-class)‫هو‬directive‫ال‬ ‫خالل‬ ‫من‬ ‫كالس‬ ‫إلضافة‬ ‫ٌستخدم‬
angular_^*

‫اآلن‬^_^..‫؟‬ ‫السابق‬ ‫التسلسل‬ ً‫ف‬ ‫رأٌك‬ ‫ما‬
‫إكتمل‬ ‫المثال‬ ‫أن‬ ‫أعتقد‬..‫من‬ ‫أنا‬ ً‫ألن‬ ‫لٌس‬ ‫طبعا‬ ،‫وواضح‬ ‫سهل‬ ‫وهو‬
‫المثال‬ ‫كتبت‬..‫ال‬ ‫ألن‬ ‫بل‬angular‫المهام‬ ‫علٌنا‬ ‫تبسط‬:P
‫عنه‬ ‫بسؤال‬ ‫أرؼب‬ ‫ما‬ ‫اآلن‬...‫السابق؟‬ ‫الشكل‬ ‫ٌعجبك‬ ‫هل‬
‫؟‬ ‫هذه‬ ‫العمل‬ ‫طرٌقة‬ ً‫ف‬ ً‫منطق‬ ‫خطأ‬ ‫بوجود‬ ‫تشعر‬ ‫وهل‬
‫نظٌفة‬ ‫البرمجٌة‬ ‫الشٌفرة‬ ‫بأن‬ ‫تشعر‬ ‫وهل‬“Clean”‫؟‬
‫ربما‬ ‫أو‬ ‫ال‬ ‫ثم‬ ‫ربما‬ ‫أو‬ ‫نعم‬ ‫ثم‬ ‫ربما‬ ‫أو‬ ‫ال‬ ‫ب‬ ‫إجابتك‬ ‫تكون‬ ‫أن‬ ‫ٌجب‬ ‫طبعا‬
^_^...‫لٌست‬ ً‫ه‬ ‫طبعا‬”‫حزٌرة‬”..‫للشٌفرة‬ ً‫منطق‬ ‫تخٌل‬ ً‫ه‬ ‫وإنما‬
‫بسٌطا‬ ‫ٌكون‬ ‫قد‬ ‫السابق‬ ‫فالشكل‬..‫كلٌا‬ ‫إعتمادا‬ ‫إعتمدنا‬ ‫الوقت‬ ‫بذات‬ ‫لكننا‬
‫ال‬ ‫على‬html..ً‫منطق‬ ‫خطأ‬ ‫لنا‬ ‫ٌسبب‬ ‫وهذا‬..‫ال‬ ‫أٌن‬controller‫؟‬!
‫البرمجٌة‬ ‫الشٌفرة‬ ‫تعتبر‬ ‫لن‬ ‫وبهذا‬clean.. !‫أنه‬ ‫وبما‬html‫تكرار‬ ‫علٌه‬ ‫سٌتوجب‬
‫كل‬ ً‫ف‬ ‫العملٌة‬ ‫هذه‬html..‫ال‬ ‫أستخدم‬ ‫ال‬ ‫لماذا‬controller‫من‬ ‫العملٌة‬ ‫وأنفذ‬
‫صفحة‬ ‫كل‬ ً‫ف‬ ‫خالله‬html..^_^‫علٌه‬ ‫ٌجاب‬ ‫أو‬ ‫ٌسأل‬ ‫أن‬ ‫ٌجب‬ ‫ما‬ ‫هو‬ ‫هذا‬&_&

‫الخطوات‬ ‫اتبع‬ ‫أفضل‬ ‫صٌؽة‬ ‫أو‬ ‫مثالٌة‬ ‫صٌؽة‬ ‫الى‬ ‫الصٌؽة‬ ‫ولتحوٌل‬
‫التالٌة‬:
1)

2)‫متؽٌر‬ ‫انشاء‬ ‫هو‬ ‫بساطة‬ ‫بكل‬ ‫منا‬ ‫المطلوب‬ ‫سٌكون‬ ،‫الخطوة‬ ‫هذه‬ ً‫ف‬
‫ال‬ ‫قٌمة‬ ‫وتعدٌل‬ ‫الوصول‬ ‫ٌمكننا‬ ‫خالله‬ ‫من‬tab‫بالنقر‬ ‫قمنا‬ ً‫الت‬
‫المتؽٌر‬ ‫أن‬ ‫تالحظ‬ ‫لذلك‬ ،‫علٌها‬tab3‫بنائا‬ ‫قٌمته‬ ‫تؽٌرت‬ ‫من‬ ‫هو‬
‫على‬setTab‫ال‬ ‫من‬ ‫استقبالها‬ ‫تم‬ ً‫الت‬html..^_^

3)‫عند‬ ‫فعلٌا‬ ،‫هنا‬ ‫الحظ‬
‫فإننا‬ ‫عملٌة‬ ‫أي‬ ‫من‬ ‫التحقق‬
‫قٌمة‬ ‫نرجع‬
1‫أو‬0
‫خطأ‬ ‫أو‬ ‫صح‬
‫ٌكون‬ ‫علٌها‬ ‫وبنائا‬
ً‫المنطق‬ ‫الناتج‬..‫وهنا‬
‫كذلك‬..‫التحقق‬ ‫سٌتم‬
‫علٌه‬ ‫النقر‬ ‫تم‬ ‫ما‬ ‫هل‬
‫الحالٌة‬ ‫ٌساوي‬..‫اذا‬
‫نعم‬..‫ال‬ ‫أضؾ‬active
‫المطلوب‬ ‫المحتوى‬ ‫وأظهر‬

‫للمثال‬ ‫الكامل‬ ‫الشكل‬ ‫شاهد‬ ‫واآلن‬:

‫ال‬ ‫مع‬ ‫التعامل‬FORMS
‫واآلن‬..‫نستذكر‬ ‫أن‬ ‫علٌنا‬ ،‫المهمة‬ ‫الجزئٌة‬ ‫بهذه‬ ‫وللبدء‬Directive‫مهم‬
‫ال‬ ‫وهو‬ ،‫جدا‬ng-model‫سابقا‬ ‫عنه‬ ‫تحدثنا‬ ‫تأكٌد‬ ‫وبكل‬ ،..‫اآلن‬ ‫لكن‬
‫بٌتا‬ ‫الشعر‬ ‫من‬ ‫سنزٌدكم‬^_^‫ال‬ ‫مع‬ ‫استخدامه‬ ‫ٌمكننا‬ ‫كٌؾ‬ ‫ونشاهد‬ ،
Controller‫ال‬ ‫مع‬ ‫دوره‬ ‫وأهمٌة‬ ،Forms_^... *
•‫تذكٌر‬:‫ال‬ ‫عن‬ ‫سابقا‬ ‫تحدثنا‬model-ng‫بعمل‬ ‫القٌام‬ ‫ووظٌفتها‬ ،
data-bind‫التحكم‬ ‫عناصر‬ ‫مع‬..
‫ال‬ ‫استخدام‬ ‫أو‬ ‫التفاعل‬ ‫طرٌقة‬ ‫على‬ ،‫سرٌعا‬ ‫مثاال‬ ‫لنشاهد‬ ‫واآلن‬
Ng-model‫ال‬ ‫مع‬Controller.._^*

‫مثال‬:‫المثال‬ ‫الى‬ ‫أنظر‬ ‫اآلن‬..‫ال‬ ‫استخدمت‬ ً‫أنن‬ ‫سوى‬ ‫جدٌد‬ ‫شًء‬ ‫ال‬
Alias name‫بال‬ ‫الخاص‬controllar‫ال‬ ‫داخل‬ng-model‫قبل‬
‫التسمٌة‬ ‫إطالق‬..‫اإلسم‬ ‫فأصبح‬formCtrl0.powerNumber..
‫المثال‬ ‫طبق‬ ‫اآلن‬(‫مهم‬)‫التالٌة‬ ‫للشرٌحة‬ ‫اإلنتقال‬ ‫قبل‬:P

‫اآلن‬..‫ال‬ ‫أن‬ ‫وهو‬ ،‫أمرا‬ ‫ستالحظ‬{{formCtrl.powerNumber}
‫مكانها‬ ‫الفعلٌة‬ ‫القٌمة‬ ‫وتعوض‬ ً‫تختف‬ ‫ثم‬ ،‫الصفحة‬ ‫تحمٌل‬ ‫أثناء‬ ‫ستظهر‬!
‫ال‬ ‫وضع‬ ‫هو‬ ‫هذا‬ ً‫ف‬ ‫والسبب‬angular js‫أو‬js‫نهاٌة‬ ً‫ف‬ ‫عموما‬
‫ال‬ ‫إؼالق‬ ‫قبل‬ ‫أو‬ ‫الصفحة‬body..‫الملؾ‬ ‫هذا‬ ‫تحمٌل‬ ‫ٌتم‬ ‫لن‬ ‫فإنه‬ ‫وبهذا‬
‫أوامر‬ ‫من‬ ‫قبله‬ ‫ما‬ ‫تنفٌذ‬ ‫بعد‬ ‫اال‬..‫ال‬ ‫سٌظهر‬ ‫لذلك‬Expression‫السابق‬
ً‫ٌختف‬ ‫ثم‬ ‫ومن‬..‫المسألة‬ ‫هذه‬ ‫ولحل‬..‫ال‬ ‫ملفات‬ ‫بوضع‬ ‫تقوم‬ ‫أن‬ ‫ٌمكنك‬js
‫ال‬ ً‫ف‬header..‫ال‬ ‫استخدام‬ ‫ٌمكنك‬ ‫أو‬ng-clock_^.. *
‫ال‬ ‫فكرة‬ ‫بساطة‬ ‫وبكل‬ng-clockً‫ه‬css!!‫وبالتحدٌد‬display
‫بقٌمة‬none^_^..‫ال‬ ‫خالل‬ ‫من‬ ‫عملٌات‬ ‫أو‬ ‫طبعا‬ ‫تفاعل‬ ‫وجود‬ ‫مع‬ ‫لكن‬
angular..‫أنت‬ ‫ٌهمك‬ ‫ما‬ ‫لكن‬..‫مثاال‬ ‫شاهد‬ ،‫استخدامه‬ ‫طرٌقة‬ ‫هو‬:_^*

‫الصفحة‬ ‫تحمٌل‬ ‫بعد‬
‫الصفحة‬ ‫تحمٌل‬ ‫قبل‬

‫واآلن‬^_^..‫بال‬ ‫لنبدأ‬Formsً‫فعل‬ ‫بشكل‬^_^..
‫البسٌط‬ ‫المثال‬ ‫هذا‬ ‫شاهد‬..ً‫ف‬ ‫وأهمها‬ ‫فكرة‬ ‫أول‬ng-submitً‫والت‬ ،
‫عمل‬ ‫ٌتم‬ ‫خاللها‬ ‫من‬submit‫الفورم‬ ‫هذا‬ ‫لمحتوٌات‬..‫قمت‬ ً‫انن‬ ‫والحظ‬
‫ال‬ ‫دور‬ ‫ٌظهر‬ ‫بدأ‬ ‫كٌؾ‬ ‫والحظ‬ ،‫بها‬ ‫أرؼب‬ ً‫الت‬ ‫العملٌة‬ ‫بإجراء‬ng-model

‫واآلن‬..‫سؤال‬ ‫ببالنا‬ ‫سٌخطر‬..‫ال‬ ‫نستخدم‬ ‫لم‬ ‫لماذا‬ng-click‫؟‬ ‫هنا‬!
‫؟‬ ‫استخدامها‬ ‫الممكن‬ ‫من‬ ‫الٌس‬..‫به‬ ‫وقمنا‬ ‫سابقا‬ ‫تعلمناه‬ ‫عما‬ ‫فرق‬ ‫ٌوجد‬ ‫ال‬
‫ال‬ ‫خالل‬ ‫من‬ng-click‫؟‬
ً‫صدٌق‬ ‫ٌا‬ ‫صحٌح‬ ‫قلته‬ ‫ما‬ ‫جمٌع‬^_^..‫بعض‬ ‫اآلن‬ ‫لك‬ ‫سأشرح‬ ‫لكن‬
‫ال‬ ‫استخدمت‬ ‫لماذا‬ ‫توضح‬ ً‫الت‬ ‫المهمة‬ ‫النقاط‬ng-submit‫تمثل‬ ً‫والت‬
‫ال‬ ‫بٌن‬ ‫فروقات‬ng-click‫وال‬ng-submit^_^
1)‫ال‬ ‫نستخدم‬ng-submit‫ال‬ ‫مع‬form element‫بٌنما‬ ،‫تحدٌدا‬
‫ال‬ ‫نستخدم‬ng-click‫آخر‬ ‫عنصر‬ ‫أي‬ ‫مع‬..‫ال‬ ‫أن‬ ‫ذلك‬ ً‫ف‬ ‫والسبب‬
submit‫ال‬ ‫محتوٌات‬ ‫لجمٌع‬ ‫ٌكون‬form(..‫تقول‬ ‫القاعدة‬
Form is Submitted, Not Button..^_^)

2)‫ال‬ ‫ٌنطلق‬trigger‫بال‬ ‫الخاص‬ng-submit‫ال‬ ‫خالل‬ ‫من‬click
‫ال‬ ‫خالل‬ ‫من‬ ‫أو‬enter‫عنصر‬ ‫أي‬ ‫فوق‬..‫ال‬ ‫بٌنما‬ng-click‫اذا‬
‫لل‬ ‫وضعها‬ ‫تم‬button‫ال‬ ‫على‬ ‫النقر‬ ‫عند‬ ‫الى‬ ‫الحدث‬ ‫ٌنطلق‬ ‫فلن‬
btn..
‫واآلن‬..ً‫وه‬ ‫مهمة‬ ‫جزئٌة‬ ‫الى‬ ‫لننتقل‬:
Form Validation and States
‫والتحقق‬ ‫التحكم‬ ‫وكٌفٌة‬ ،‫حدوثها‬ ‫الممكن‬ ‫األخطاء‬ ‫عن‬ ‫سنتحدث‬ ‫وهنا‬
‫ال‬ ‫باستخدام‬ ‫العملٌات‬ ‫من‬ ‫وؼٌرها‬angular^_^..

‫واآلن‬..‫بها‬ ‫ونقطة‬ ‫خاصٌة‬ ‫لكل‬ ‫وانتبه‬ ،‫البرمجٌة‬ ‫الشٌفرة‬ ‫هذه‬ ‫شاهد‬:^_^
‫هنا‬ ‫الحظ‬..‫استخدام‬ ‫خالل‬ ‫من‬ ‫بالفورم‬ ‫اإلعتٌادي‬ ‫التحقق‬ ‫بإطفاء‬ ‫قمنا‬ ‫أوال‬
‫ال‬novalidate‫ال‬ ً‫ف‬ ‫والموجودة‬HTML5..
‫ال‬ ‫باستخدام‬ ‫قمنا‬ ‫ذلك‬ ‫بعد‬required‫من‬ ‫سنتحقق‬ ‫خاصٌة‬ ‫على‬ ‫كمثال‬
‫الموجودة‬ ‫الحقول‬ ً‫ف‬ ‫تحققها‬..
‫ثم‬ ‫الفورم‬ ‫اسم‬ ‫استخدمنا‬ ‫ذلك‬ ‫وبعد‬.‫ثم‬$valid‫فهو‬ ،‫مهم‬ ‫المتؽٌر‬ ‫وهذا‬
‫للفورم‬ ‫بالتحقق‬ ‫الخاصة‬ ‫النهائٌة‬ ‫النتٌجة‬ ‫ارجاع‬ ‫عن‬ ‫المسؤول‬..--<

‫واآلن‬..‫السابقة‬ ‫البرمجٌة‬ ‫الشٌفرة‬ ‫تنفٌذ‬ ‫شاهد‬:^_^
‫للضرورة‬ ‫المثال‬ ‫بتنفٌذ‬ ‫قم‬
‫التؽٌرات‬ ‫معنا‬ ‫تتابع‬ ‫حتى‬
‫بأول‬ ‫أوال‬^_^...

‫اآلن‬..‫الحظت‬ ‫اذا‬..‫بال‬ ‫الخاصة‬ ‫النتٌجة‬ ‫فإن‬$valid‫إما‬ ‫مباشرة‬ ‫تظهر‬
false‫وإما‬ture‫معها‬ ‫التعامل‬ ‫تم‬ ً‫الت‬ ‫المعطٌات‬ ‫حسب‬..‫والسؤال‬
‫اآلن‬-__-‫؟‬..‫ال‬ ‫عملٌة‬ ‫لمنع‬ ‫القٌمة‬ ‫هذه‬ ‫استخدام‬ ً‫ٌمكنن‬ ‫كٌؾ‬
submitting‫؟‬ ‫بالفورم‬ ‫الخاصة‬
‫كشرط‬ ‫بوضعها‬ ‫ذلك‬ ‫ٌكون‬^_^...ً‫التال‬ ‫بالشكل‬:
‫واآلن‬..‫الجزئٌة‬ ‫هذه‬ ‫على‬ ‫عملٌا‬ ‫مثاال‬ ‫لمشاهدة‬ ‫سوٌا‬ ‫لنذهب‬_^*

‫مثال‬:

‫واآلن‬_^.. *‫ال‬ ً‫وه‬ ‫مهمة‬ ‫جزئٌة‬ ‫الى‬class‫الحقول‬ ً‫ف‬ ‫تتؽٌر‬ ً‫الت‬
‫والحقل‬ ‫المستخدم‬ ‫بٌن‬ ‫التفاعل‬ ‫عملٌة‬ ‫أثناء‬^_^ً‫ف‬ ‫أهمٌتها‬ ‫وتكمن‬ ،
‫الخطأ‬ ‫بها‬ ‫حصل‬ ً‫الت‬ ‫الحقول‬ ‫تمٌٌز‬..‫منها‬ ‫التحقق‬ ‫تم‬ ً‫الت‬ ‫والحقول‬
‫بنجاح‬..‫جدا‬ ‫سهل‬ ‫أمر‬ ‫هذا‬ ‫وعمل‬.._^..*‫هو‬ ‫معرفته‬ ‫علٌك‬ ‫ما‬ ‫كل‬
‫المطلوبة‬ ‫والحالة‬ ‫التفاعل‬ ‫لحظة‬ ‫تؽٌٌرها‬ ‫ٌتم‬ ً‫الت‬ ‫الكالس‬..‫ثم‬ ‫ومن‬
‫ال‬ ‫طرٌق‬ ‫عن‬ ‫اللون‬ ‫تحدٌد‬css^_^..
‫واآلن‬..‫معها‬ ‫التعامل‬ ‫ٌمكننا‬ ً‫الت‬ ‫الكالس‬ ‫مجموعة‬ ‫معا‬ ‫لنشاهد‬..
(‫ال‬ ‫بعملٌات‬ ‫تتعلق‬ ‫عنها‬ ‫نتحدث‬ ً‫الت‬ ‫الكالس‬input..‫تسمى‬ ‫لذلك‬
input class.. )

‫ال‬Input Classً‫ه‬ ‫عنها‬ ‫سنتحدث‬ ً‫الت‬:

Angular js دورة

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (20)

Similar a Angular js دورة

Similar a Angular js دورة (20)

Más de anees abu-hmaid

Más de anees abu-hmaid (19)

Último

Último (11)

Angular js دورة